如何在单个圆形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上获得三个轮廓？

回答

相关问题