HTML和CSS流体圈

我试图用 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>

你能帮我吗？

解决方法

你所使用的border-radius：50％hack假定< div>在应用圆角之前是正方形,否则它将产生一个椭圆形而不是一个圆形,正如您所注意到的那样.

因此,如果要让内容扩展时保持循环,则需要动态调整高度以匹配宽度.你可能需要使用Javascript来实现这一点.

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

当然,调整高度会产生使元素垂直占据更多空间的副作用.这可能不是你想要的;您可能希望圈子的大小相同,无论其内容如何？在这种情况下,您应该修改圆的高度和宽度,并给出内容位置：absolute;以防止其影响其父级的大小.

使用边框半径黑客来生成一个圆圈的替代方法是使用SVG. SVG是嵌入大多数浏览器的矢量图形格式.

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

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

希望有帮助.

HTML和CSS流体圈

解决方法

相关文章