html - 如何创建双轮廓边框？

Question

我正在使用 radium 在 JS 中编写我的 CSS，因此，我不能使用伪类 :after 和 :before(这本来可以使解决方案非常简单)。我应该如何创建边框，如下图所示。

这里，灰色边框与主背景颜色相同，由白色边框分隔。

到目前为止我的 CSS 看起来像这样

upload: {
    position: "absolute",
    left: "0",
    top: "0",
    overflow: "hidden",
    width: "100%",
    height: "100%",
    borderRadius: "50%",
    backgroundColor: "#ccdde5",
    cursor: "pointer"
}

这将产生这样的输出

Answer 1

尝试使用嵌套的框阴影:

.circle-border-2 {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  margin: 10px;
  background-color: #ccdde5;
  box-shadow: 0 0 0 5px  white, 
              0 0 0 10px #ccdde5;
}

<div class="circle-border-2"></div>

这种方法甚至允许您添加多个边框:

.circle-unicorn {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  margin: 50px;
  background-color: white;
  box-shadow: 0 0 0 5px #9932FF, 
              0 0 0 10px #B231FD, 
              0 0 0 15px #FF31EB,
              0 0 0 20px #FF3291,
              0 0 0 25px #FE3030,
              0 0 0 30px #FE6031,
              0 0 0 35px #FFC132,
              0 0 0 40px #30FE5B,
              0 0 0 45px #5230FF,
              0 0 0 50px #3E25BF;
}

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