如何在單個圓形div上獲得三個輪廓？

我有以下代碼。我試圖畫出三個輪廓到一個單獨的div。對於第一級我使用邊界，第二級我使用陰影。如何在單個圓形div上獲得三個輪廓？

我可以有第三級只使用CSS？我可以實現這個使用另一個div，但我正在尋找一種方法來做一個單獨的div。

#sample { 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 50%; 
 
    background: #f1f1f1; 
 
    border: 4px solid #ccc; 
 
    -webkit-box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1); 
 
    -moz-box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1); 
 
    box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1); 
 
}

<div id="sample"> 
 
</div>

來源

2016-02-16 Sooraj Chandran

嘗試：'大綱：4PX固體purple' –

不工作的圓形刻度。將創建一個方形輪廓。已經嘗試過。 –

只需使用多重陰影。

.me { 
 
    box-shadow: 0 0 0 1px red, 
 
       0 0 0 2px yellow, 
 
       0 0 0 3px green; 
 
}

<div class="me">me</div> 
 

 
<br><br> 
 

 
<div class="me" style="border-radius: 20px;">me rounded</div>

來源

2016-02-16 13:08:37

下面是相同的圓[JSFIDDLE]（https://jsfiddle.net/pwhphop0/） –

我已經在答案中添加了邊界半徑的示例。 –

@SoorajChandran你可以混合內部和外部的陰影，甚至使用透明邊框。這絕對是你在這裏需要的 –

遠不及優雅的Fez Vrasta的解決方案，但如何使用:after僞元素：

#sample { 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 50%; 
 
    background: #f1f1f1; 
 
    border: 4px solid #ccc; 
 
    -webkit-box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1); 
 
    -moz-box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1); 
 
    box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1); 
 
    position: relative; 
 

 
} 
 
#sample:after { 
 
    border: 4px solid red; 
 
    border-radius: 50%; 
 
    content: " "; 
 
    width: 114px; 
 
    height: 114px; 
 
    display: block; 
 
    position: absolute; 
 
    left: -11px; 
 
    top: -11px; 
 
}

<div id="sample"> 
 
</div>

來源

2016-02-16 13:12:32

又一個的情況下，選擇你想要一個透明的inne [R環

body { 
 
    background: red; 
 
    background-image: url(http://lorempixel.com/image_output/abstract-q-c-640-480-10.jpg); 
 
} 
 
#sample { 
 
    box-sizing: border-box; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 1em auto; 
 
    border-radius: 50%; 
 
    background: #f1f1f1; 
 
    box-shadow: 0px 0px 0px 10px rgba(68, 68, 68, 1); 
 
    /* outer ring */ 
 
    border: 10px solid #ccc; 
 
    /* inner 'ring */ 
 
    padding: 10px; 
 
    /* really inner ring */ 
 
    background-clip: content-box; 
 
}

<div id="sample"> 
 
</div>

來源

2016-02-16 13:18:19

如何在單個圓形div上獲得三個輪廓？

回答

相關問題