如何使用CSS围绕内容圈？

Question

喜欢这个

仅使用此代码

<span>1</span>

Answer 1

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/ 中，您可以看到如何呈现一个对内容长度更改做出反应的圆圈。
您甚至可以编辑最后一个圆圈上的内容，以查看直径如何变化。

Answer 2

使用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/

Answer 3

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

第一个元素是内联元素，所以从顶部给它边距我们需要将它转换为块元素。我转换为内联块，因为它接近内联并具有块元素的特征。

其次，你需要在顶部和底部之间给出左右填充，因为数字本身从上到下延伸所以它得到合理的高度但是我们想要制作跨度ROUND所以我们在左右两侧给它们填充更多为BORDER RADIUS腾出空间。

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

Practical Example

Answer 4

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/

Answer 5

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

编辑：截至2016年不需要

Answer 6

那里有很多教程..试试吧..这里有几个......

http://dev-tips.com/featured/css-tip-how-to-make-ircles-without-images

http://blog.ardes.com/2009/3/4/css-circles

http://bryanhadaway.com/how-to-create-circles-with-css/