我想把一个数字围成一个圆,就像下图所示:
这可能吗?它是如何实现的?
我想把一个数字围成一个圆,就像下图所示:
这可能吗?它是如何实现的?
当前回答
你可以使用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仍然不支持圆角。
其他回答
你可以使用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仍然不支持圆角。
虽然迟到了,但这里有一个对我有效的自助解决方案。我使用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>(或其他)元素中,就完成了。
请注意,如果内容有多个数字,则可能需要调整边距和填充类。
在css中做这样的事情吗
div { width: 10em; height: 10em; -webkit-border-radius: 5em; -moz-border-radius: 5em; } p { text-align: center; margin-top: 4.5em; }
使用段落标签来书写文本。希望这能有所帮助
.numberCircle { 这个特性:50%; 宽度:40像素; 高度:40像素; 显示:块; 浮:左; 边框:2px实体#000000; 颜色:# 000000; text-align:中心; margin-right: 5 px; } <h3><span class="numberCircle">1</span> Regiones del Interior</h3>
我很惊讶没有人使用更容易理解的flex,所以我把我的答案放在这里:
要创建一个圆,请确保宽等于高 为了适应圆圈中数字的字体大小,请使用em而不是px 要将数字居中,请使用flex和justify-content: center;对齐项目:中心; 如果数字增加(例如>1000),则同时增加宽度和高度
这里有一个例子:
.circled-number { color: #666; border: 2px solid #666; border-radius: 50%; font-size: 1rem; display: flex; justify-content: center; align-items: center; width: 2em; height: 2em; } .circled-number--big { color: #666; border: 2px solid #666; border-radius: 50%; font-size: 1rem; display: flex; justify-content: center; align-items: center; width: 4em; height: 4em; } <div class="circled-number"> 30 </div> <div class="circled-number--big"> 3000000 </div>