时间戳

首页 > 解决方案 > 如何在现有的圆形边框周围创建多个边框

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>

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

标签： cssborder

解决方案

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

推荐阅读