如何使用CSS在内容周围创建一个圆圈？

Question

就像这样

只需使用这段代码

<span>1</span>

- Jitendra Vyas

---

可能是 https://dev59.com/Fm445IYBdhLWcg3wdqSO 的重复问题。 - Vivek Chandra

可能是重复的问题：如何使用CSS将数字包围在圆圈中？ - thirtydot

你写了“椭圆”，但展示的是一个圆形的图片。你到底是指哪一个？ - Jukka K. Korpela

使用CSS -moz-border-radius: 50%;border-radius: 30px;。 - XIMRX

看看我最新的改进，如何使圆形调整大小以适应所有内容。 - Jose Rui Santos

可能是重复的问题：如何在圆圈内创建三个垂直点（省略号）。 - Zach Saucier

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/中，您可以看到如何渲染一个圆形，以响应内容长度的变化。
甚至可以编辑最后一个圆圈上的内容，以查看直径的变化。

- Jose Rui Santos

---

添加：纯CSS信息图标以便更容易被搜索引擎找到。我搜索了一段时间，最终在搜索“围绕圆形的CSS文本”时找到了您的优秀CSS解决方案... - Avatar

它对内联元素无效，例如 Click on <span>i</span> for info，其中 display:block 已更改为 display:inline，以便作为文本的一部分流动。有什么办法解决这个问题吗？ - Ken Sharp

最后一个示例（https://jsfiddle.net/36m7796q/2/）在我的Firefox 50中无法正确呈现。我得到了一个椭圆形而不是一个圆形。 - leeb

@ leeb 在 Firefox 中使用“display: inline-block”替换“display: inline-flex”。这可以解决问题，但会导致文本垂直居中。 - Jose Rui Santos

@JoseRuiSantos 是的，这个方法可以用，但正如你所说，它不能得到完全相同的结果。我得出结论，最好的方法是使用固定的宽度/高度元素，并希望内容不会太长 ;) - leeb

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/

- Curtis

---

这在我的情况下并没有呈现为一个圆形，而更像是左右圆角和平顶和底部。你的HTML可能会有所不同。 - LosManos

Answer 3

现在您已经有了很多答案，但我会尝试告诉您基础知识。

首先，第一个元素是内联元素，因此如果我们要从顶部给它加上边距，我们需要将其转换为块级元素。我将其转换为内联块级元素，因为它靠近内联元素并具有块级元素的特性。

其次，您需要给它右侧和左侧更多的padding，而不是顶部和底部，因为数字本身从顶部到底部延伸，因此它会得到合理的高度，但是因为我们想使span标签变成圆形，所以我们在左右两侧给它们更多的padding以腾出空间来设置边框半径。

第三，您设置了border-radius，应该大于padding和内容本身的宽度，所以大约27px就可以得到所需的圆角度数，但为了安全起见，可以将其设置为更高的值。

实际示例。

- Shawn Taylor

Answer 4

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;


}

查看此示例 http://jsfiddle.net/daWcc/

- Rupesh Pawar

Answer 5

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

编辑：自 2016 年起不再需要。

- Urs

---

嘿，给我踩分的人，这个答案已经快三年了 - 当时它非常有效，对于旧版浏览器仍然有效。 - Urs

取决于问题 :-) - Urs

它并不是仍然错误，随着上下文的变化，它已经变得错误了。实际上，我想知道是否有一个关于这个主题的元帖？虽然这可能会伤害到人，但如果你的（在这种情况下，我的）答案过时了，失去分数是一件好事 - 这有助于 SO 的健康。 - Urs