我想把一个数字围成一个圆,就像下图所示:
这可能吗?它是如何实现的?
我想把一个数字围成一个圆,就像下图所示:
这可能吗?它是如何实现的?
当前回答
下面是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仍然不支持圆角。
我在这里的解决方案-这很容易允许不同的大小和颜色,并连接到CMS进行编辑控制。IE退化为平方。
HTML:
<div class="circular-label label-outer label-size-large label-color-pink">
<div class="label-inner">
<span>Fashion & Beauty</span>
</div>
</div>
CSS:
.circular-label {
overflow: hidden;
z-index: 100;
vertical-align: middle;
font-size: 11px;
-webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.label-inner {
width: 85%;
height: 85%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 2px dotted white;
vertical-align: middle;
margin: auto;
top: 5%;
position: relative;
overflow: hidden;
}
.label-inner > span {
display: table;
text-align: center;
vertical-align: middle;
font-weight: bold;
text-transform: uppercase;
width: 100%;
position: absolute;
margin: auto;
margin-top: 38%;
font-family:'ProximaNovaLtSemibold';
font-size: 13px;
line-height: 1.0em;
}
.circular-label.label-size-large {
width: 110px;
height: 110px;
-moz-border-radius: 55px;
-webkit-border-radius: 55px;
border-radius: 55px;
margin-top:-55px;
}
.circular-label.label-size-med {
width: 76px;
height: 76px;
-moz-border-radius: 38px;
-webkit-border-radius: 38px;
border-radius: 38px;
margin-top:-38px;
}
.circular-label.label-size-med .label-inner > span {
margin-top: 33%;
}
.circular-label.label-size-small {
width: 66px;
height: 66px;
-moz-border-radius: 33px;
-webkit-border-radius: 33px;
border-radius: 33px;
margin-top:-33px;
}
要知道怎么做并不难。更大的问题是,是否有可能使圆圈的尺寸与内容相匹配。
目前我认为这是不可能的。有人知道吗?
虽然迟到了,但这里有一个对我有效的自助解决方案。我使用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; }
使用段落标签来书写文本。希望这能有所帮助
下面是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>