HTML和CSS流体圈

Question

我正在尝试使用HTML和CSS创建一个流畅的圈子.我差不多完成但因为它应该是流动的,内部的内容是动态的,它的形状从圆形变为椭圆形等.

body {
  position: relative;
}
.notify {
  position: absolute;
  top: 100%;
  left: 20%;
  background: red;
  border: 2px solid white;
  border-radius: 50%;
  text-align: center;
}
.notify > div {
  padding: 20px;
}

<div class="notify">
  <div>
    12
  </div>
</div>

你能帮我吗？

Answer 1

border-radius:50%您正在使用的黑客假设<div>在应用圆角之前是正方形,否则它将产生椭圆形而不是圆形,正如您所指出的那样.

因此,如果您希望圆在内容展开时保持圆形,则需要动态调整高度以匹配宽度.您可能需要使用Javascript来实现此目的.

此外,请注意,border-radius旧版IE不支持,因此使用IE6,IE7或IE8的用户根本不会看到您的圈子.(虽然有一个叫做CSS3Pie的黑客攻击)

当然,调整height意志会产生使元素垂直占据更多空间的副作用.这可能不是你想要的; 您可能希望圆圈的大小相同,无论内容是什么？在这种情况下,您应该修复圆的高度和宽度,并提供内容position:absolute;以防止它影响其父级的大小.

使用border-radiushack生成圆的另一种方法是使用SVG.SVG是一种嵌入大多数浏览器的矢量图形格式.

同样,值得注意的例外是IE8及更早版本,但IE支持另一种称为VML的格式.存在可以在SVG和VML之间转换的各种脚本,因此您可以使用SVG和Javascript生成跨浏览器解决方案.

如果我们要接受Javascript是解决方案的一部分,你可以简单地使用javascript库来绘制它.我对此的建议是Raphael,它根据运行它的浏览器生成SVG或VML图形.

希望有所帮助.

Answer 2

您需要同时设置这两者width以及height这两者的最大值,以便渲染一个具有50%半径角的正方形,结果为圆形.

你可以在jQuery中做到这一点:

$(function() {
  var $elem = $(".notify > div");
  var maxSize = Math.max($elem.width(), $elem.height());

  $elem.width(maxSize).height(maxSize);
});

尝试在此处更改内容(宽度和高度)