如何在圆的现有边界周围创建多个边界

小编典典

如何在圆的现有边界周围创建多个边界

css

我正在使用border-radius: 50%;和在CSS中创建一个半透明的圆圈border: 400px solid rgba(255, 255, 255, .5);。

在这个圆的周围，我希望有另一个完全透明的边界（例如10个像素），而又想有另一个半透明的边界（10个像素）。

这是我创建圈子的方式：

div.circle {

  background: rgba(255, 255, 255, .5);

  height: 400px;

  width: 400px;

  border-radius: 50%;

  margin: auto;

  margin-top: 10px;

}


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

我需要怎么做才能在现有边界周围创建另一个边界，然后再创建另一个边界？

阅读 297

2020-05-16

共1个答案

小编典典

您可以使用简单的边框并将背景裁剪到，content-box以在填充区域中创建透明部分：

div.circle {

  background: rgba(255, 255, 255, .5) content-box;

  padding: 10px;

  height: 180px;

  width: 180px;

  box-sizing: border-box;

  border-radius: 50%;

  margin:10px auto;

  border: 10px solid rgba(255, 255, 255, .5);

}



body {

  background: pink;

}


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

您也可以考虑 radial-gradient

div.circle {

  background:

    radial-gradient(farthest-side,

      rgba(255, 255, 255, .5) calc(100% - 20px),transparent calc(100% - 20px),

      transparent calc(100% - 10px),rgba(255, 255, 255, .5) calc(100% - 10px));

  height: 180px;

  width: 180px;

  box-sizing: border-box;

  border-radius: 50%;

  margin:10px auto;

}



body {

  background: pink;

}


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

您可以轻松缩放到任意数量的边界：

div.circle {

  background:

    radial-gradient(farthest-side,

      #fff        calc(100% - 61px),transparent calc(100% - 60px),

      transparent calc(100% - 51px),#fff        calc(100% - 50px),

      #fff        calc(100% - 41px),transparent calc(100% - 40px),

      transparent calc(100% - 31px),#fff        calc(100% - 30px),

      #fff        calc(100% - 21px),transparent calc(100% - 20px),

      transparent calc(100% - 11px),#fff        calc(100% - 10px));

  height: 180px;

  width: 180px;

  box-sizing: border-box;

  border-radius: 50%;

  margin:10px auto;

}



body {

  background: pink;

}


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

2020-05-16