如何将盒子阴影转换为线性渐变？答案

【问题标题】：How to convert box-shadow, to a linear-gradient?如何将盒子阴影转换为线性渐变？
【发布时间】：2021-10-10 16:11:35
【问题描述】：

如何将此代码转换为线性渐变？

.box {
  box-shadow:
    0 0 0 5px teal,
    0 0 0 10px black,
    0 0 0 15px orange,
    0 0 0 20px black,
    0 0 0 25px teal,
    0 0 0 30px black,
    0 0 0 35px orange,
    0 0 0 40px black,
    0 0 0 45px teal,
    0 0 0 50px black,
    0 0 0 55px orange,
    0 0 0 60px black,
    0 0 0 65px teal,
    0 0 0 70px black,
    0 0 0 75px orange,
    0 0 0 80px black,
    0 0 0 85px 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 {
  box-shadow:
    0 0 0 5px teal,
    0 0 0 10px black,
    0 0 0 15px orange,
    0 0 0 20px black,
    0 0 0 25px teal,
    0 0 0 30px black,
    0 0 0 35px orange,
    0 0 0 40px black,
    0 0 0 45px teal,
    0 0 0 50px black,
    0 0 0 55px orange,
    0 0 0 60px black,
    0 0 0 65px teal,
    0 0 0 70px black,
    0 0 0 75px orange,
    0 0 0 80px black,
    0 0 0 85px teal;
}

&lt;div class="box"&gt;&lt;/div&gt;

【问题讨论】：

你也需要线性渐变的确切框大小吗？
170 x 170。是的。
我想使用渐变而不是盒子阴影。这就是我想要使用的。

标签： css linear-gradients

【解决方案1】：

linear-gradient 一个人是做不到的。你需要更多的属性。

这是我使用clip-path的想法

body {
  background: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin:0;
}

.box {
  width:225px;
  background:repeating-linear-gradient(teal 0 5px,black 0 10px,orange 0 15px,black 0 20px);
}
.box:before {
  content:"";
  display:block;
  padding-top:100%;
  background:inherit;
  clip-path:polygon(0 0,100% 0,0 100%,100% 100%);
  transform:rotate(90deg);
}

&lt;div class="box"&gt;&lt;/div&gt;

也像下面这样：

body {
  background: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin:0;
}

.box {
  width:220px; /* adjust this value */
  --coloration:teal 0 5px,black 0 10px,orange 0 15px,black 0 20px;
  background:
     repeating-linear-gradient(0deg,  var(--coloration)) top,
     repeating-linear-gradient(180deg,var(--coloration)) bottom;
  background-size:100% 50%;
  background-repeat:no-repeat;
}
.box:before {
  content:"";
  display:block;
  padding-top:100%;
  background:inherit;
  clip-path:polygon(0 0,100% 0,0 100%,100% 100%);
  transform:rotate(90deg);
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

"单靠线性梯度不能单独完成。"您对此 100% 确定吗？
@csshtmljavascript14578 是的，因为您的图像不是 linear 渐变，您需要的不仅仅是渐变，但我认为我无法说服您喜欢您之前的问题...
我在这里做的。 jsfiddle.net/5h8mLy90不是吗？
@csshtmljavascript14578 这不是线性渐变，而是多个线性渐变堆叠在彼此的顶部。我猜我使用不超过 2 个渐变的解决方案更高效且可扩展
我做的那个可以用重复渐变来减少代码量吗？