圈有两个边框

Question

我如何设置一个div带有两个边框的圆圈(a ),以便它对容器的尺寸作出反应？

假设这样的圆圈例如:

这是一个圆形的工作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.

Answer 1

我建议使用以下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小提琴演示.

所述box-shadow赋予颜色的最外环,所述border给出了白色"内边界".

或者,您可以使用box-shadow带有inset关键字的a,并使用它box-shadow来生成"内边框"并将其border用作最外边框:

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小提琴演示.

显然,根据自己的口味和环境调整尺寸.

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 10px white, 0 0 0 15px red;
}

<div></div>

JS小提琴演示.

Answer 2

另一种方法是使用background-clip属性.它不会让你选择内在边框的颜色,但它会显示该间隙的背景:

div {
  width: 150px;
  height: 150px;
  padding:2px;
  border-radius: 50%;
  background: #DD4814;
  border: 2px solid #DD4814;
  background-clip: content-box;
  margin:0 auto;
}

/** FOR THE DEMO **/
body {background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size: cover;}

<div></div>

请注意,您可以使用填充值控制间隙大小.

Answer 3

在这个线程上已经有两个非常好的答案,但是这里有一些方法可以使这个线程更加完整,并采用所有可能的方法.这些产生的输出也是响应性的.

使用伪元素:

您可以使用尺寸小于父元素的伪元素,并将其绝对放置在父元素中.当背景添加到伪元素并且边框添加到父元素时,看起来边框和背景之间存在间隙.如果差距需要透明,那么我们不需要background在父级上添加任何内容.如果间隙需要是纯色(也就是说,它需要看起来像第二个边框),那么应该将该颜色和所需宽度的边框添加到伪元素中.

使用此方法时,内部区域也可以具有图像或渐变作为填充(背景).

.circle {
  position: relative;
  height: 200px;
  width: 200px;
  text-align: center;
  line-height: 200px;
  color: white;
  border-radius: 50%;
  border: 2px solid brown;
}
.circle:after {
  position: absolute;
  content: '';
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: calc(100% - 8px);
  border-radius: inherit;
  background: brown;
  z-index: -1;
}
.circle.white:after {
  top: 0px;
  left: 0px;
  border: 4px solid white;
}
.circle.image:after {
  background: url(http://lorempixel.com/200/200/abstract/4);
}

/* Just for demo */

div {
  float: left;
  margin-right: 10px;
  transition: all 1s;
}
div:hover{
  height: 250px;
  width: 250px;
}
body {
  background: url(http://lorempixel.com/500/500/nature/3);
  background-size: cover;
}

<div class='circle'>Hello!</div>
<div class='circle white'>Hello!</div>
<div class='circle image'>Hello!</div>

使用径向渐变:

这也是一种可能的方法,但浏览器支持非常低,因此不建议这样做,但这个想法可以在其他地方使用.基本上所做的是将radial-gradient(圆形)添加到元件上,使得它在实心背景颜色和实际边界之间留下透明或纯色的间隙(额外边界).

.circle{
  height: 200px;
  width: 200px;
  text-align: center;
  line-height: 200px;
  color: white;
  border-radius: 50%;
  border: 2px solid brown;
  background: radial-gradient(circle at center, brown 66.5%, transparent 68%);
}
.circle.white{
  background: radial-gradient(circle at center, brown 66.5%, white 68%);
}

/* Just for demo */

div{
  float: left;
  margin-right: 10px;
  transition: all 1s;
}
div:hover{
  height: 250px;
  width: 250px;
}
body{
  background: url(http://lorempixel.com/500/500/nature/3);
  background-size: cover;
}

<div class='circle'>Hello!</div>
<div class='circle white'>Hello!</div>