就像这样
只需使用这段代码
<span>1</span>
你可以使用这个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/中,您可以看到如何渲染一个圆形,以响应内容长度的变化。
甚至可以编辑最后一个圆圈上的内容,以查看直径的变化。
Click on <span>i</span> for info
,其中 display:block
已更改为 display:inline
,以便作为文本的一部分流动。有什么办法解决这个问题吗? - Ken Sharp使用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;
}
现在您已经有了很多答案,但我会尝试告诉您基础知识。
首先,第一个元素是内联元素,因此如果我们要从顶部给它加上边距,我们需要将其转换为块级元素。我将其转换为内联块级元素,因为它靠近内联元素并具有块级元素的特性。
其次,您需要给它右侧和左侧更多的padding,而不是顶部和底部,因为数字本身从顶部到底部延伸,因此它会得到合理的高度,但是因为我们想使span标签变成圆形,所以我们在左右两侧给它们更多的padding以腾出空间来设置边框半径。
第三,您设置了border-radius,应该大于padding和内容本身的宽度,所以大约27px就可以得到所需的圆角度数,但为了安全起见,可以将其设置为更高的值。
实际示例。
border-radius 简写属性可同时定义四个角。该属性接受一个或两个值集,每个值集由1到4个长度或百分比组成。
语法:
[ <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;
}
-moz-border-radius: 50%;border-radius: 30px;
。 - XIMRX