我整理了一些HTML + CSS代码,在其中带有数字的灰色圆圈。如果我想创建另一种颜色的圆圈(例如橙色),那是最简单的方法。我想保留原始代码,因为我仍在使用灰色圆圈。
这是我的jsfiddle:
http://jsfiddle.net/huskydawgs/5f4kuLk5/6/
这是我的HTML
<div class="circle">
<span class="number">1</span>
</div>
这是我的CSS:
.circle {
border-radius: 100%;
height: 2em;
width: 2em;
text-align: center;
background: #616161;
margin: 0 auto;
}
.circle .number {
margin-top: 0.10em;
font-size: 1.5em;
font-weight: bold;
font-family: sans-serif;
line-height: 1.4em;
color: #ffffff;
}
最佳答案
在第二个元素中添加一个类,并使用该类覆盖具有不同背景色的主圆样式:
.circle {
border-radius: 100%;
height: 2em;
width: 2em;
text-align: center;
background: #616161;
margin: 0 auto;
}
.circle.orange {
background: orange;
}
.circle.red {
background: red;
}
.circle .number {
margin-top: 0.10em;
font-size: 1.5em;
font-weight: bold;
font-family: sans-serif;
line-height: 1.4em;
color: #ffffff;
}
<div class="circle">
<span class="number">1</span>
</div>
<div class="circle orange">
<span class="number">2</span>
</div>
<div class="circle red">
<span class="number">3</span>
</div>
关于html - 用最少的代码创建HTML圈子的另一种颜色,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28949824/