如何使用 CSS 围绕内容制作一个圆圈？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9358882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a circle around content using CSS?
提问by Jitendra Vyas
Like this
像这样
With only this code
只有这个代码
<span>1</span>
回答by Jose Rui Santos
You can use this css
你可以使用这个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;
}
Because you want a circle, you need to set the same value to width, height and line-height (to center the text vertically). You also need to use half of that value to the border radius.
因为你想要一个圆，所以你需要为宽度、高度和行高设置相同的值（使文本垂直居中）。您还需要将该值的一半用于边界半径。
This solution always renders a circle, regardless of content length.
无论内容长度如何，此解决方案始终呈现一个圆圈。
But, if you want an ellipse that expands with the content, then http://jsfiddle.net/MafjT/256/
但是，如果您想要一个随内容扩展的椭圆，那么http://jsfiddle.net/MafjT/256/
Resize with content - Improvement
根据内容调整大小 - 改进
In this https://jsfiddle.net/36m7796q/2/you can see how to render a circle that reacts to a change in content length.
You can even edit the content on the last circle, to see how the diameter changes.
在这个https://jsfiddle.net/36m7796q/2/ 中，您可以看到如何渲染一个对内容长度变化做出反应的圆圈。
您甚至可以编辑最后一个圆上的内容，以查看直径如何变化。
回答by Shawn Taylor
You have many answers now but I try tell you the basics.
你现在有很多答案，但我试着告诉你一些基础知识。
First element is inline element so giving it margin from top we need to convert it to block element. I converted to inline-block because its close to inline and have features of block elements.
第一个元素是行内元素，因此我们需要将其从顶部设置为边距，我们需要将其转换为块元素。我转换为 inline-block 因为它接近 inline 并且具有块元素的特性。
Second, you need to giving padding right and left more than top and bottom because numerals itself extend from top to bottom so it gets reasonable height BUT as we want to make the span ROUND so we give them padding more on left and right to make room for BORDER RADIUS.
其次，你需要给左右填充比顶部和底部更多，因为数字本身从上到下延伸，所以它得到合理的高度但是因为我们想要使跨度为圆形，所以我们在左右给它们更多的填充以腾出空间用于边界半径。
Third, you set border-radius which should be more than PADDING + width of content itself so around 27px you will get required roundness but for safely covering all numerals you can set it to some higher value.
第三，您设置的 border-radius 应该大于 PADDING + 内容本身的宽度，因此大约 27px 您将获得所需的圆度，但为了安全地覆盖所有数字，您可以将其设置为更高的值。
实际例子。
回答by Curt
Using CSS3:
使用 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;
}
回答by Rupesh Pawar
The border-radius shorthand property can be used to define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.
border-radius 速记属性可用于同时定义所有四个角。该属性接受一组或两组值，每组值由一到四个长度或百分比组成。
The Syntax:
语法：
[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
Examples:
例子：
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;
I your case
我你的情况
span {
border-radius: 100px;
background: #000;
color : white;
padding : 10px 15px;
}
Check this Demo http://jsfiddle.net/daWcc/
回答by Urs
In addition to the other solutions, http://css3pie.com/does a great job as a polyfill for old internet explorer versions
除了其他解决方案之外，http://css3pie.com/ 作为旧 Internet Explorer 版本的 polyfill 做得很好
EDIT: not necessary as of 2016
编辑：自 2016 年起不需要
回答by Vivek Chandra
There are soo many tutorials out there.. try them.. here are a few..
那里有太多教程..试试看..这里有一些..
http://dev-tips.com/featured/css-tip-how-to-make-ircles-without-images
http://dev-tips.com/featured/css-tip-how-to-make-ircles-without-images
http://blog.ardes.com/2009/3/4/css-circles
http://blog.ardes.com/2009/3/4/css-circles
