與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不同的彩色圓圈

回答

相關問題