Question

我有以下代码。我试图将三个轮廓绘制成一个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>

Answer 1

只使用多个阴影。

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

远不及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>

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

3 个答案: