如何使用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.

第三,你设置border-radius应该大于PADDING +内容宽度本身所以大约27px你将获得所需的圆度,但是为了安全地覆盖所有数字,你可以将它设置为更高的值.

实际例子.

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/