Html 如何在一个圆形div上获得三个轮廓？

我有以下代码。我试着在一个div上画三个轮廓。第一层我用border，第二层我用shadows

我可以只使用CSS进行第三级吗？ 我可以使用另一个div实现这一点，但我正在寻找一种使用单个div的方法

#示例{
高度：100px；
宽度：100px；
边界半径：50%；
背景#f1f1；
边框：4px实心#ccc；
-webkit盒阴影：0px 0px 0px 2px rgba（68,68,68,1）；
-moz盒阴影：0px 0px 0px 2px rgba（68,68,68,1）；
盒影：0px 0px 0px 2px rgba（68,68,68,1）；
}

---

只需使用多个阴影即可

.me{
长方体阴影：0 1px红色，
0 0 2px黄色，
0 3px绿色；
}

me



me rounded

远不如的解决方案优雅，但是使用

：after

伪元素如何：

#示例{
高度：100px；
宽度：100px；
边界半径：50%；
背景#f1f1；
边框：4px实心#ccc；
-webkit盒阴影：0px 0px 0px 2px rgba（68,68,68,1）；
-moz盒阴影：0px 0px 0px 2px rgba（68,68,68,1）；
盒影：0px 0px 0px 2px rgba（68,68,68,1）；
位置：相对位置；
}
#样本：之后{
边框：4倍纯红；
边界半径：50%；
内容：“；
宽度：114px；
高度：114px；
显示：块；
位置：绝对位置；
左：-11px；
顶部：-11px；
}

---

如果你想要一个透明的内环，这只是另一个选择

正文{
背景：红色；
背景图片：url(http://lorempixel.com/image_output/abstract-q-c-640-480-10.jpg);
}
#样品{
框大小：边框框；
高度：100px；
宽度：100px；
保证金：1em自动；
边界半径：50%；
背景#f1f1；
盒子阴影：0px 0px 0px 10px rgba（68,68,68,1）；
/*外圈*/
边框：10px实心#ccc；
/*内环*/
填充：10px；
/*真内环*/
背景剪辑：内容框；
}

try:

outline:4px纯紫色

不处理圆形div。将创建方形轮廓。已经尝试过了。我在答案中添加了一个带有边框半径的示例。@SoorajChandran您可以混合使用内外阴影，甚至可以使用透明边框。这绝对是你在这里需要的