Farklı renkteki iki kenarlıklı CSS dairesi veya en az

Question

gibi görünüyor. Tek kenarlıklı bir dairem var, ancak farklı renklerde iki kenarlıklı bir daire elde etmek için zaten bir yol var mı bilmek istiyorum. Ben şöyle CSS daireyi üreten vardır: Sen görebiliyordu

.circle { 
    width: 20px; 
    height: 20px; 
    border-radius: 12px; 
    border: 1.5px solid #fff; 
    font-family: Cambria; 
    font-size: 11px; 
    color: white; 
    line-height: 20px; 
    text-align: center; 
    background: #3E78B2; 
} 

.circle:hover { 
    width: 27px; 
    height: 27px; 
    border-radius: 18px; 
    font-size: 12px; 
    color: white; 
    line-height: 27px; 
    text-align: center; 
    background: #3E78B2; 
} 

Here is link to jsFiddle

şu anda bazı beyaz sınırı vardır. Beyaz sınırın üstüne yeni bir sınır eklemek istiyorum.

Lütfen herhangi bir fikriniz/önerileriniz varsa lütfen bize bildirin. Ben doğru anlamak

Answer 1

Merhaba u da bu yapabilirsiniz:

.container { 
    background-color: grey; 
    height: 200px; 
    padding:10px; // ADD THIS ALSO 
} 
.circle { 
    width: 20px; 
    height: 20px; 
    border-radius: 12px; 
    border: 1.5px solid #fff; 
    font-family: Cambria; 
    font-size: 11px; 
    color: white; 
    line-height: 20px; 
    text-align: center; 
    background: #3E78B2; 
    box-shadow: 0 0 0 3px #002525; // JUST ADD THIS LINE AND MODIFY YOUR COLOR 
} 

avantajı da böyle değişen bir bulanıklık efekti koymak olmasıdır: hoş

box-shadow: 0 0 3px 3px #002525; 

Answer 2

, ben, bu satırlar boyunca bir şey yapmak arıyorsanız düşünüyorum: http://jsfiddle.net/QCVjr/1/

.circle { 
    width: 20px; 
    height: 20px; 
    border-radius: 12px; 
    border: 1.5px solid #000; 
    font-family: Cambria; 
    font-size: 11px; 
    color: white; 
    line-height: 20px; 
    text-align: center; 
    background: #fff; 
    position: relative; 
    z-index: 1; 
} 
.circle:before { 
    position: absolute; 
    right: 2px; 
    top: 2px; 
    left: 2px; 
    bottom: 2px; 
    content: ''; 
    background: #3E78B2; 
    border-radius: 25px; 
    z-index: -1; 
} 
.circle:hover { 
    width: 27px; 
    height: 27px; 
    border-radius: 18px; 
    font-size: 12px; 
    color: white; 
    line-height: 27px; 
    text-align: center; 
    background: #fff; 
} 

Ben orijinal arka plan rengini aldı ve :before psödomonasa onu ekledi fark edersiniz öğe, #fff öğeyi arka plana taşıdı ve diğer kenarlık renginizi (bu örnekte, #000) özgün öğenin kenarlık rengini yaptı. Doğru katmanlama için z-index es gereklidir.