css – 带有两个边框的圆

如何以一个圆圈(一个div)作为响应式,以便对容器的尺寸做出反应？

假设这样的圈子例如：

这是一个循环的工作CSS：

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  border: 1px solid green;
  background: pink;
}

<div class="circle"></div>

如何添加两种颜色的边框？我尝试了大纲,但它作为一个矩形出来.我试图将另一个div放在圆圈div中,并使用背景颜色,但是我不能垂直对齐内部div.

解决方法

我建议,使用以下HTML：

<div></div>

CSS：

div {
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background-color: red;
    border: 4px solid #fff;
    Box-shadow: 0 0 0 5px red;
}

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  Box-shadow: 0 0 0 5px red;
}

<div></div>

JS Fiddle demo.

盒子阴影给出最外面的颜色环,边框给出白色的“内边界”.

或者,您可以使用带有inset关键字的Box-shadow,并使用Box-shadow生成“内部边框”,并将边框用作最外边框：

div {
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background-color: red;
    border: 4px solid red;
    Box-shadow: inset 0 0 0 5px white;
}

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid red;
  Box-shadow: inset 0 0 0 5px white;
}

<div></div>

JS Fiddle demo.

显然,根据自己的品味和情况调整尺寸.

但是,使用Box-shadow生成最外边框可以允许多个边框(以下示例中为红色和白色交替)：

div {
    width: 20em;
    height: 20em;
    margin: 20px;
    border-radius: 50%;
    background-color: red;
    border: 4px solid #fff;
    Box-shadow: 0 0 0 5px red,0 0 0 10px white,0 0 0 15px red;
}

div {
  width: 20em;
  height: 20em;
  margin: 20px;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  Box-shadow: 0 0 0 5px red,0 0 0 15px red;
}

<div></div>

JS Fiddle demo.