HTML和CSS流体圆 [英] HTML and CSS Fluid Circle

问题描述

我试图使用HTML和CSS创建一个流体圆。我几乎完成了，因为它应该是流动性和内容是动态的，它的形状从圆形到椭圆形和其他。

I am trying to create a fluid circle using HTML and CSS. I am almost done but as it should be fluid and content inside is dynamic, it's changing its shape from circle to oval and others.

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％你使用的是假设在应用圆角之前< div> 是正方形，否则它将产生一个椭圆而不是一个圆，正如

The border-radius:50% hack which you're using makes the assumption that the <div> is square prior to the rounded corners being applied, otherwise it will produce an oval rather than a circle, exactly as you've noted.

因此，如果您希望圈子在内容展开时保持循环，您需要动态调整高度以匹配宽度。

Therefore, if you want the circle to remain circular as the content expands, you need to dynamically adjust the height to match the width. You'd probably need to use Javascript to achieve this.

此外，请注意 border-radius 不是在旧版本的IE中支持，因此具有IE6，IE7或IE8的用户将不会看到您的圈子。 （虽然有一个黑客的名为 CSS3Pie ）

Also, please note that border-radius is not supported in older versions of IE, so users with IE6, IE7 or IE8 won't see your circle at all. (though there is a hack for it called CSS3Pie)

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

Of course, adjusting the height will have the side effect of making the element take up more space vertically. This may not be what you want; you may want the the circle to be the same size regardless of what content is in it? In this case, you should fix the height and width of the circle, and give the content position:absolute; to prevent it from affecting the size of its parent.

使用 border-radius hack生成圆圈的替代方法是使用SVG。 SVG是嵌入大多数浏览器的矢量图形格式。

An alternative to using the border-radius hack to produce a circle would be to use SVG. SVG is a vector graphics format which is embedded into most browsers.

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

Again, the notable exception is IE8 and earlier, but IE supports an alternative format called VML. Various scripts exist which can convert between SVG and VML, so you can produce a cross-browser solution with SVG plus Javascript.

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

If we're going to accept the Javascript is part of the solution, you could simply use a javascript library to draw it in the first place. My suggestion for this would be Raphael, which generates SVG or VML graphics according to the browser it's running it.

希望有所帮助。

这篇关于HTML和CSS流体圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！