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>在应用圆角之前是方形的，否则它将产生椭圆而不是圆形，正如您所指出的那样。

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

另外请注意，旧版本的 IE 不支持border-radius ，所以使用 IE6、IE7 或 IE8 的用户根本看不到你的圈子。 （虽然有一个叫做CSS3Pie的 hack ）

当然，调整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);
});

尝试在此处更改内容（宽度和高度）

Answer 3

仅使用 HTML 和 CSS的流体循环示例。 正如我在对该问题的评论中提到的，该技术在我的博客文章中进行了解释。 同样如前所述，Safari 目前在以百分比指定的边界半径时效果不佳。

Answer 4

像Jose Rui Santos那样，您可以实现您的目标。 但是对你的 css 做一些改变。

就像从.notify > div中删除填充并像这样添加 styles ：

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

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

.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

你需要一种方法来强制高度/宽度，否则它只会 go 椭圆形......它可能！

在这个 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 max-width:XXpx; max-height:XXpx将完成这项工作。

请注意，您可能需要使用 CSS3 word-wrap: break-word; 打破的话。 跨浏览器兼容性可能是个问题。