如何将 box-shadow 转换为线性渐变?
How to convert box-shadow, to a linear-gradient?
如何将此代码转换为线性渐变?
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>
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>
如何将此代码转换为线性渐变?
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>
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>