如何在现有圆形边框周围创建多个边框

Question

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

我想在这个圆形周围有另一个完全透明（比如说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>

我需要怎么做才能在现有边框的外围再创建一个边框，然后再创建一个边框呢？

- Sharim81

---

完全透明的边框？没有边框？ - Slava Knyazev

是的，但在这个完全透明（没有边框）的x像素之后，应该再来一个边框 :-) - Sharim81

Answer 1

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

您可以使用简单的边框和将背景剪切到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>

- Temani Afif

Answer 2

你可以使用伪元素::before 和 :after，就像我的片段中显示的那样。我添加了两个，但是对于你的要求，一个应该足够：（编辑：我更改了位置参数，将伪元素居中，这样如果您想要不同的尺寸，只需要更改height和width即可）

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #7a4;
}

div.circle {
  background: rgba(255, 255, 255, 0.5);
  height: 400px;
  width: 400px;
  border-radius: 50%;
  margin: auto;
  margin-top: 100px;
  position: relative;
}

.circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 440px;
  width: 440px;
  border-radius: 50%;
  border: 20px solid;
  border-color: rgba(255, 255, 255, 0.5);
}

.circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 520px;
  width: 520px;
  border-radius: 50%;
  border: 20px solid;
  border-color: rgba(255, 255, 255, 0.5);
}

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

- Johannes

---

你可以在伪元素的宽度/高度中使用类似于“calc（100% + 40px）”的内容，这样我们只需要调整主元素的宽度/高度。 - Temani Afif