如何在圆的现有边界周围创建多个边界 [英] How to create multiple borders around existing border of circle

问题描述

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

I am creating a semi-transparent circle in css using border-radius: 50%; and border: 400px solid rgba(255, 255, 255, .5);.

在这个圆圈周围，我希望有一个完全透明的边界(假设10个像素)，而又要有另一个半透明的边界(10个像素).

Around this circle I would like to have another border which is fully transparent (of let's say 10 pixels) only to have another border (of 10 pixels) which is again semi-transparent.

这是我创建圈子的方式:

This is how I am creating my circle:

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

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

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

What do I need to do to create another border around the existing border and then another border?

推荐答案

您可以使用简单的边框和

You can use a simple border and clip the background to the content-box to create the transparent part in the padding area:

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

You can also consider 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>

您可以轻松缩放到任意数量的边框:

That you can easily scale to any number of borders:

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>

这篇关于如何在圆的现有边界周围创建多个边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！