css - 如何将盒子阴影转换为线性渐变？

Question

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

https://jsfiddle.net/bufpark1/

.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;
}

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

标签： csslinear-gradients

Answer 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);
}

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

也像下面：

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);
}

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