14

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

你能帮我吗？

4

6 回答 6

8

您正在使用的border-radius:50%hack 假设<div>在应用圆角之前是正方形的，否则它将产生椭圆而不是圆形，正如您所指出的那样。

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

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

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

使用border-radiushack 生成圆圈的另一种方法是使用 SVG。SVG 是一种嵌入到大多数浏览器中的矢量图形格式。

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

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

希望有帮助。

于 2011-07-08T12:04:30.760 回答
5

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

您可以在 jQuery 中执行此操作：

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

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

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

于 2011-07-08T12:10:41.373 回答
2

仅使用 HTML 和 CSS的流体圆示例。正如我在对该问题的评论中提到的，该技术在我的博客文章中进行了解释。同样如前所述，Safari 目前不能很好地使用指定为百分比的边框半径。

于 2011-07-08T12:55:51.477 回答
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;

}

和 Jquery 代码，如下所述Jose Rui Santos：

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

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

于 2011-07-08T13:16:04.917 回答
0

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

在这个 html 上

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

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

var cw = $('.child').width();
$('.child').css({
    'height': cw + 'px',
    'line-height': cw + 'px'
});
于 2011-07-08T11:55:50.970 回答
0

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

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

于 2011-07-08T11:59:03.760 回答