Question

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

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

这对我来说都很新鲜。你能帮我看看如何获得4种不同颜色的圆圈（环），背景颜色相同吗？

＆＃13;

.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;
}

＆＃13;

<div class="numberCircle">30</div>
<div class="numberCircle">1</div>
<div class="numberCircle">2</div>

＆＃13;

Answer 1

你的问题的措辞有点令人困惑，但根据你提供的小提琴，我认为这就是你想要的（只需更改每个圆圈的边框颜色）：

＆＃13;

.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;
    background: #fff;
    display:inline-block;
}
        .numberCircle:nth-child(1) {
          border: 2px solid blue;
        }
        .numberCircle:nth-child(2) {
          border: 2px solid red;
        }
        .numberCircle:nth-child(3) {
          border: 2px solid green;
        }
        .numberCircle:nth-child(4) {
          border: 2px solid yellow;
        }

＆＃13;

<div class="numberCircle"></div>
<div class="numberCircle"></div>
<div class="numberCircle"></div>
<div class="numberCircle"></div>

＆＃13;

Answer 2

如果我理解正确，你想使用border-color只设置边框的颜色。

.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;
}

.red { 
    border-color:red;
}

.blue { 
    border-color:blue;
}

.yellow { 
    border-color:yellow;
}

<div class="numberCircle red"></div>
<div class="numberCircle blue"></div>
<div class="numberCircle yellow"></div>

Answer 3

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

像这样：

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

https://jsfiddle.net/dQR9T/6327/

Answer 4

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

HTML：

<div class="numberCircle red-circle">30</div>
<div class="numberCircle blue-circle">1</div>
<div class="numberCircle green-circle">2</div>

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;
}

更新了jsfiddle：http://jsfiddle.net/dQR9T/6328/

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

Answer 5

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

.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; }

Demo

与css的不同的色环

5 个答案: