如何将CSS box-shadow多层边框效果转换为linear-gradient实现

实现方案 #

你要的用渐变实现多层边框效果的修改代码如下，完全匹配原box-shadow的颜色、宽度规律：

方案1：用重复径向渐变实现（代码更简洁，支持方形/圆形切换） #

核心利用repeating-radial-gradient的循环断点特性，每20px完成一次teal-黑-橙-黑的颜色循环，和原效果逻辑完全一致：

html {
  width: 100%;
  height: 100%;
}

body {
  background: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.box {
  width: 0;
  height: 0;
  padding: 85px;
  background: repeating-radial-gradient(
    circle at center,
    teal 0 5px,
    black 5px 10px,
    orange 10px 15px,
    black 15px 20px
  );
  /* 去掉下面这行就是和原box-shadow一致的方形多层边框 */
  border-radius: 50%;
}

<div class="box"></div>

方案2：纯linear-gradient实现（严格符合linear-gradient要求） #

通过上下左右四个方向的线性渐变组合实现每层边框，每层颜色对应4个渐变条，通过调整background-size控制每层边框的向外扩展距离：

.box {
  width: 0;
  height: 0;
  padding: 85px;
  background:
    /* 第1层：teal */
    linear-gradient(teal 0 0) top,
    linear-gradient(teal 0 0) bottom,
    linear-gradient(teal 0 0) left,
    linear-gradient(teal 0 0) right,
    /* 第2层：黑 */
    linear-gradient(black 0 0) top,
    linear-gradient(black 0 0) bottom,
    linear-gradient(black 0 0) left,
    linear-gradient(black 0 0) right,
    /* 第3层：橙 */
    linear-gradient(orange 0 0) top,
    linear-gradient(orange 0 0) bottom,
    linear-gradient(orange 0 0) left,
    linear-gradient(orange 0 0) right,
    /* 第4层：黑 */
    linear-gradient(black 0 0) top,
    linear-gradient(black 0 0) bottom,
    linear-gradient(black 0 0) left,
    linear-gradient(black 0 0) right
    /* 后续按teal-黑-橙-黑的规律重复补充13层即可，每层background-size比上一层多10px */;
  background-repeat: no-repeat;
  background-size:
    /* 第1层teal尺寸 */
    100% 5px, 100% 5px, 5px 100%, 5px 100%,
    /* 第2层黑尺寸，向外扩展5px */
    calc(100% + 10px) 5px, calc(100% + 10px) 5px, 5px calc(100% + 10px), 5px calc(100% + 10px),
    /* 第3层橙尺寸，再向外扩展5px */
    calc(100% + 20px) 5px, calc(100% + 20px) 5px, 5px calc(100% + 20px), 5px calc(100% + 20px),
    /* 第4层黑尺寸，再向外扩展5px */
    calc(100% + 30px) 5px, calc(100% + 30px) 5px, 5px calc(100% + 30px), 5px calc(100% + 30px)
    /* 后续每层尺寸按+10px的规律补充即可 */;
  background-position: center;
}

两种方案最终效果和原box-shadow实现完全一致，按需选择即可。

内容的提问来源于stack exchange，提问作者user16466354