与CSS不同的彩色圆圈

-4

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

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

这对我来说都是非常新的。你能帮助我如何获得4个不同的彩色圆圈（戒指）具有相同的背景颜色？

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

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

来源

2016-03-21 Wizz

请仔细阅读[问]，并添加对你的问题[mcve]。 – j08691

在此处添加您的代码HTML和CSS。有很多方法可以做到这一点。没有人提出这个呢:) http://jsfiddle.net/dQR9T/6331/也有阴影可以使用 –

你的问题的措辞有点混乱，但根据您所提供的小提琴，我觉得这是你要什么（只是改变边框颜色为每圈）：

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

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

来源

2016-03-21 21:09:31 APAD1

最好是添加一个额外的类whic^h设置每个单独的环的颜色

像这样：

<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/

来源

2016-03-21 21:10:39 Bart

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

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

来源

2016-03-21 21:10:42

一个可能的解决方案是增加一个附加的类每一个圆圈的颜色是这样的：

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/

我希望这回答了你的问题:)

来源

2016-03-21 21:10:47 henningmu

如果我理解正确的，这就是你想要的东西：

.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

来源

2016-03-21 21:11:50

与CSS不同的彩色圆圈

回答

相关问题