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来实现此目的。

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

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

使用border-radius hack生成圆圈的替代方法是使用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);
});

尝试更改内容（宽度和高度）here

Answer 3

Example of a fluid circle仅使用HTML和CSS。正如我对该问题的评论中所提到的，该技术在我的blog post中得到了解释。同样如上所述，Safari目前不能使用指定为百分比的边框半径。

Answer 4

Jose Rui Santos的方式可以实现您的目标。但是你的css几乎没有变化。

喜欢从.notify > div移除填充并添加如下样式：

.notify > div
{    
    display: table-cell;
    vertical-align: middle;
}

并将填充添加到.notify类中，如下所示：

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

}

和Jose Rui Santos提到的Jquery代码：

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

参见工作演示：http://jsfiddle.net/2j5Ek/63/

Answer 5

你需要一种强制高度/宽度的方法，否则它就会变成椭圆形......这是可能的！

关于这个html

<div class="notify">
    <div class="child">
        12334        
    </div>
</div>

这个jQuery脚本应该这样做..

var cw = $('.child').width();
$('.child').css({
    'height': cw + 'px',
    'line-height': cw + 'px'
});

Answer 6

通过设置max-width:XXpx; max-height:XXpx强制它的最大高度和重量将完成这项工作。

请注意，您可能需要使用CSS3 word-wrap: break-word;来破解这些词语。跨浏览器兼容性可能是一个问题。

HTML和CSS流体圈

6 个答案: