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%您正在使用的 hack 假设 <div>在应用圆 Angular 之前是正方形，否则它会产生椭圆而不是圆形，正如您所注意到的。

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

另外，请注意 border-radius旧版本的 IE 不支持，因此使用 IE6、IE7 或 IE8 的用户根本看不到您的圈子。 (尽管有一个名为 CSS3Pie 的 hack)

当然，调整height将产生使元素在垂直方向上占用更多空间的副作用。这可能不是您想要的；您可能希望圆圈大小相同，而不管其中的内容是什么？在这种情况下，您应该固定圆的高度和宽度，并给出内容 position:absolute;以防止它影响其父级的大小。

使用 border-radius 的替代方法破解产生一个圆圈将使用 SVG。 SVG 是一种嵌入到大多数浏览器中的矢量图形格式。

同样，值得注意的异常(exception)是 IE8 和更早版本，但 IE 支持称为 VML 的替代格式。存在各种可以在 SVG 和 VML 之间转换的脚本，因此您可以使用 SVG 和 Javascript 生成跨浏览器的解决方案。

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

希望对您有所帮助。