Vòng tròn CSS có hai đường viền có các màu khác nhau hoặc ít nhất trông giống như

Question

Tôi có một đường tròn có một đường viền, nhưng tôi muốn biết liệu có cách nào để đạt được vòng tròn có hai viền màu khác nhau hay không. Tôi đã sau CSS sản xuất vòng tròn như sau:

.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

Bạn có thể thấy hiện nay nó có một số đường viền màu trắng. Tôi muốn thêm một đường viền khác ở phía trên đường viền màu trắng.

Vui lòng cho tôi biết nếu bạn có bất kỳ ý tưởng/đề xuất nào.

Answer 1

Hi u có thể làm điều này cũng:

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

lợi thế là bạn cũng có thể đặt một hiệu ứng mờ ảo, thay đổi như thế này:

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

Answer 2

Nếu tôi hiểu bạn một cách chính xác, tôi nghĩ rằng bạn đang tìm cách để làm một cái gì đó dọc theo những dòng: 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; 
} 

Bạn sẽ nhận thấy rằng tôi đã lấy màu nền ban đầu của bạn và thêm nó vào :before pseudo- phần tử, đã di chuyển #fff xuống nền và tạo màu đường viền khác của bạn (trong ví dụ này là #000) màu đường viền của phần tử gốc. Cả hai z-index es được yêu cầu để có được lớp đúng.