Html 带有css的不同颜色的圆圈

我试图在CSS中创建四个不同颜色的圆圈

我已经定义了填充大小、颜色、高度和背景

这对我来说都是新鲜事。你能帮我怎么得到4个不同颜色的圆圈和相同背景颜色的戒指吗

.数字圆圈{ 边界半径：50%； 行为：urlPIE.htc； /*如果不关心IE8，请删除*/ 宽度：36px； 高度：36px； 填充：8px； 背景：fff； 边框：2个实心666； 颜色：666； 文本对齐：居中； 字体：32px Arial，无衬线； } 30 1.

---

2你问题的措辞有点混乱，但根据你提供的提琴，我认为这就是你要做的，只需更改每个圆圈的边框颜色：

.数字圆圈{ 边界半径：50%； 宽度：36px； 高度：36px； 填充：8px； 背景：fff； 显示：内联块； } .编号循环：n-child1{ 边框：2件纯蓝； } .编号循环：N-child2{ 边框：2倍纯红； } .编号循环：N-child3{ 边框：2倍纯绿； } .编号循环：N-child4{ 边框：2倍纯黄色； }

---

最好是添加一个额外的类来设置每个环的颜色

像这样：

<div class="numberCircle red">30</div>
<div class="numberCircle blue">1</div>
<div class="numberCircle black">2</div>
<div class="numberCircle yellow">2</div>

---

如果我理解正确，您希望使用边框颜色仅设置边框的颜色

.数字圆圈{ 边界半径：50%； 行为：urlPIE.htc；/*如果不关心IE8，请删除*/ 宽度：36px； 高度：36px； 填充：8px； 背景：fff； 边框：2个实心666； 颜色：666； 文本对齐：居中； 字体：32px Arial，无衬线； } 红色{ 边框颜色：红色； } 蓝色{ 边框颜色：蓝色； } 黄色{ 边框颜色：黄色； }

---

一种可能的解决方案是为每个圆颜色添加一个附加类，如下所示：

HTML:

更新的JSFIDLE:

---

我希望这能回答你的问题：

如果我理解正确，那就是你想要的：

.numberCircle:nth-child(1) { border: 2px solid blue; }
.numberCircle:nth-child(2) { border: 2px solid green; }
.numberCircle:nth-child(3) { border: 2px solid yellow; }
.numberCircle:nth-child(4) { border: 2px solid red; }

---

请阅读并在问题中添加。在此处添加您的代码HTML和CSS。有很多方法可以做到这一点。还没有人提出这一点：有阴影也可以使用

.numberCircle {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */

    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}

.blue-circle {
  border-color: blue;
}

.green-circle {
  border-color: green;
}

.red-circle {
  border-color: red;
}

.numberCircle:nth-child(1) { border: 2px solid blue; }
.numberCircle:nth-child(2) { border: 2px solid green; }
.numberCircle:nth-child(3) { border: 2px solid yellow; }
.numberCircle:nth-child(4) { border: 2px solid red; }