서로 다른 색상의 경계가 두 개 이상인 CSS 원형

Question

하나의 경계가있는 원이 있지만 어쨌든 서로 다른 색상의 경계가있는 원을 만들 수 있는지 알고 싶습니다. 나는 다음과 같은 CSS는 원을 생산하는 다음과 같은 한 : 당신은 볼 수

.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

현재는 약간의 흰색 테두리가 있습니다. 흰 테두리 위에 다른 테두리를 추가하고 싶습니다.

아이디어 나 제안 사항이 있으면 알려주십시오. 내가 제대로 이해하면

Answer 1

안녕 u는이 만들 수 있습니다

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

장점은이 같은 변화, 흐림 효과를 넣을 수 있다는 것입니다 : 적절한

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

Answer 2

, 나는 당신이이 라인을 따라 뭔가를 찾고 생각 : 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; 
} 

당신은 내가 원래 배경 색상을 가져다가 :before 사이비에 추가 것을 알 수 있습니다 요소로 이동하고 #fff을 배경으로 이동하고 다른 테두리 색 (이 예제에서는 #000)을 원래 요소의 테두리 색으로 만듭니다. 올바른 레이어링을 위해서는 z-index이 필요합니다.