我想把一个数字围成一个圆，就像下图所示:
这可能吗?它是如何实现的?
当前回答
下面是JSFiddle的演示和代码片段:
.numberCircle { 这个特性:50%; 宽度:36 px; 高度:36 px; 填充:8 px; 背景:# fff; 边框:2px实体#666; 颜色:# 666; text-align:中心; 字体:32px Arial, sans-serif; ｝ < div class = " numberCircle " > < / div > 30
我的答案是一个很好的起点，其他一些答案为不同的情况提供了灵活性。如果你关心IE8，看看我回答的旧版本。
其他回答
你可以使用border-radius:
<html>
<head>
<style type="text/css">
.round
{
-moz-border-radius: 15px;
border-radius: 15px;
padding: 5px;
border: 1px solid #000;
}
</style>
</head>
<body>
<span class="round">30</span>
</body>
</html>
调整边界半径和填充值，直到你对结果满意为止。
但这并不适用于所有浏览器。我猜IE仍然不支持圆角。
下面是JSFiddle的演示和代码片段:
/* Creating a number within a circle using CSS */ .numberCircle { font-family: "OpenSans-Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif; display: inline-block; color: #fff; text-align: center; line-height: 0px; border-radius: 50%; font-size: 12px; min-width: 38px; min-height: 38px; } .numberCircle span { display: inline-block; padding-top: 50%; padding-bottom: 50%; margin-left: 1px; margin-right: 1px; } /* Some Back Ground Colors */ .clrGreen { background: #51a529; } .clrRose { background: #e6568b; } .clrOrange { background: #ec8234; } .clrBlueciel { background: #21adfc; } .clrMauve { background: #7b5d99; } <span class="numberCircle clrGreen"><span>8</span></span> <span class="numberCircle clrRose"><span>80</span></span> <span class="numberCircle clrOrange"><span>800</span></span> <span class="numberCircle clrMauve"><span>8000</span></span>
你可以使用
span.red { background: red; border-radius: 0.8em; -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; color: #ffffff; display: inline-block; font-weight: bold; line-height: 1.6em; margin-right: 15px; text-align: center; width: 1.6em; } span.grey { background: #cccccc; border-radius: 0.8em; -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; color: #fff; display: inline-block; font-weight: bold; line-height: 1.6em; margin-right: 15px; text-align: center; width: 1.6em; } span.green { background: #5EA226; border-radius: 0.8em; -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; color: #ffffff; display: inline-block; font-weight: bold; line-height: 1.6em; margin-right: 15px; text-align: center; width: 1.6em; } span.blue { background: #5178D0; border-radius: 0.8em; -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; color: #ffffff; display: inline-block; font-weight: bold; line-height: 1.6em; margin-right: 15px; text-align: center; width: 1.6em; } span.pink { background: #EF0BD8; border-radius: 0.8em; -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; color: #ffffff; display: inline-block; font-weight: bold; line-height: 1.6em; margin-right: 15px; text-align: center; width: 1.6em; } <h1><span class="grey">1</span>A grey circle with number inside</h1> <h1><span class="red">2</span>A red circle with number inside</h1> <h1><span class="blue">3</span>A blue circle with number inside</h1> <h1><span class="green">4</span>A green circle with number inside</h1> <h1><span class="pink">5</span>A pink circle with number inside</h1>
感谢https://wpsites.net/web-design/colored-numbered-circles-using-pure-css-html/
虽然迟到了，但这里有一个对我有效的自助解决方案。我使用Bootstrap 4:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> 身体< > <div class="行mt-4"> < div class = " col-md-12”> <span class="bg-dark text-white round -circle px-3 py-1 mx-2 h3">1</span> <span class="bg-dark text-white round -circle px-3 py-1 mx-2 h3">2</span> <span class="bg-dark text-white round -circle px-3 py-1 mx-2 h3">3</span> < / div > < / div > 身体< / >
基本上，您将bg-dark text-white圆圆px-3 py-1 mx-2 h3类添加到<span>(或其他)元素中，就完成了。
请注意，如果内容有多个数字，则可能需要调整边距和填充类。
最简单的方法是使用bootstrap和badge类
<span class="badge">1</span>
