如何使用CSS围绕内容创build一个圈子？

喜欢这个

只有这个代码

<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; } 

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

无论内容长度如何，此解决scheme总是呈现一个圆圈。

---

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

---

调整内容 – 改进

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

Answer 2

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

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

其次，因为数字本身从上到下延伸，所以需要给予填充左右多于顶部和底部，所以它得到合理的高度，但是，因为我们想要使跨度ROUND，所以我们给他们更多的左，右填充空间为BORDER RADIUS。

第三，你设置的border-radius应该超过PADDING +内容宽度，所以在27px左右你会得到所需的圆度，但是为了安全地覆盖所有的数字，你可以将它设置为更高的值。

实例 。

Answer 3

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

边界半径速记属性可以用来同时定义所有的四个angular。 该属性接受一组或两组值，每组包含一到四个长度或百分比。

语法：

 [ <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

除了其他的解决scheme之外， http ://css3pie.com/做一个很好的工作作为一个老的互联网浏览器版本的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/