我试图用
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图形.
希望有帮助.
