73

像这样

围绕内容

只有这个代码

<span>1</span>
4

5 回答 5

125

http://jsfiddle.net/MafjT/

你可以使用这个CSS

span {
    display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;

    -moz-border-radius: 30px; /* or 50% */
    border-radius: 30px; /* or 50% */

    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
}

因为你想要一个圆圈，所以你需要为宽度、高度和行高设置相同的值（使文本垂直居中）。您还需要将该值的一半用于边界半径。

无论内容长度如何，此解决方案始终呈现一个圆圈。

但是，如果你想要一个随内容扩展的椭圆，那么http://jsfiddle.net/MafjT/256/

随内容调整大小 - 改进

在这个https://jsfiddle.net/36m7796q/2/中，您可以看到如何渲染一个对内容长度变化做出反应的圆圈。
您甚至可以编辑最后一个圆圈的内容，以查看直径如何变化。

于 2012-02-20T09:45:37.790 回答
6

你现在有很多答案，但我试着告诉你基础知识。

第一个元素是内联元素，因此从顶部给它留出边距，我们需要将其转换为块元素。我转换为 inline-block 因为它接近 inline 并且具有块元素的功能。

其次，你需要给左右填充多于顶部和底部，因为数字本身从顶部延伸到底部，所以它得到合理的高度但是因为我们想要使跨度为圆形，所以我们在左右两侧给它们更多填充以腾出空间为边界半径。

第三，您设置的边框半径应该大于 PADDING + 内容本身的宽度，因此大约 27px 您将获得所需的圆度，但为了安全地覆盖所有数字，您可以将其设置为更高的值。

实际例子。

于 2012-02-20T10:59:51.203 回答
6

使用 CSS3：

span
{-moz-border-radius: 20px;
    border-radius: 20px;
border-color:black;
    background-color:black;
color:white;
    padding-left:15px;
    padding-right:15px;
    padding-top:10px;
    padding-bottom:10px;
    font-size:1.3em;
}

​http://jsfiddle.net/NXZnq/

于 2012-02-20T09:43:19.553 回答
5

border-radius 速记属性可用于同时定义所有四个角。该属性接受一组或两组值，每组由一到四个长度或百分比组成。

语法：

[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

例子：

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

我是你的情况 

span {
    border-radius: 100px;
    background: #000;
    color : white;
    padding : 10px 15px;


}

检查这个演示http://jsfiddle.net/daWcc/

于 2012-02-20T09:40:19.307 回答
0

除了其他解决方案之外，http ://css3pie.com/ 作为旧 Internet Explorer 版本的 polyfill 做得很好

编辑：自 2016 年起没有必要

于 2013-06-03T16:03:19.263 回答