HTML 和 CSS 流体圈答案

【问题标题】：HTML and CSS Fluid CircleHTML 和 CSS 流体圈
【发布时间】：2011-10-01 05:24:40
【问题描述】：

我正在尝试使用 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>

你能帮帮我吗？

【问题讨论】：

确保你测试它改变 div 内的文本从 12 到 100 等等
我看到很多答案建议使用 JavaScript 来强制元素的正方形纵横比为 50% 的边界半径。我最近写了一篇关于如何仅使用 CSS 来完成的博客文章：ansciath.tumblr.com/post/7347495869/css-aspect-ratio
哦，Safari 还没有优雅地处理指定为百分比的边框半径。

标签： html css geometry css-shapes

【解决方案1】：

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/

【讨论】：

【解决方案2】：

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

【讨论】：

这很有趣，但是如果我不想计算内容的绝对位置，现在如何将内容放在内部 div 中？
内容（在本例中为圆圈）绝对位于容器内。圆圈应占据容器的整个区域。通过这种方式，容器充当内容的一种代理。然后可以以您想要的任何方式放置容器，以您想要的任何方式计算其位置。

【解决方案3】：

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

在这个 html 上

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

这个 jQuery 脚本应该可以做到。

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

【讨论】：

不行，如果你试试，例如

12
12
12
12
Umair 写了content inside is dynamic。这意味着它可以改变宽度或高度。为什么总是宽度 > 高度？
好吧，它可能会中断，但是对于一行居中的文本，它可以正常工作！与您的不同，它将文本留在顶部，所以如果文本很长，那么文本就会从圆圈中出来，所以tbh 我的解决方案更好（假设 1 行文本）

【解决方案4】：

您正在使用的 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 图形。

希望对您有所帮助。

【讨论】：

【解决方案5】：

您需要将width 和height 都设置为这两者的最大值，以渲染一个正方形，它的角半径为 50%，形成一个圆形。

你可以在 jQuery 中做到这一点：

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

  $elem.width(maxSize).height(maxSize);
});

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

【讨论】：

【解决方案6】：

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

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

【讨论】：