在日常前端开发中，渐变应该是小伙伴常用的属性之一了。但是，你真的把渐变用透了吗？
渐变除了可以用于颜色过渡之外，还有哪些用法呢？小伙伴们可以尽情想象下 >_<
在介绍渐变的神奇用法之前，我们先来看看它的类型及日常用法：
渐变的类型及日常应用
- 线性渐变
.linear {
background: linear-gradient(to top, red, #fff);
}
线性渐变.png
- 径向渐变
.radial {
background: radial-gradient(45deg, red, #fff);
}
径向渐变.png
上面两个粗糙的例子，是渐变的日常用法，多用于颜色间的过渡变化。那么，我们还可以利用渐变来做出什么样有趣的事呢？
渐变属性挖掘
假设我们需要做一个45度角颜色过渡的背景，代码如下：
background: linear-gradient(45deg, red 20%, #eee 80%);
background: linear-gradient(45deg, red 20%, #eee 40%);
background: linear-gradient(45deg, red 20%, #eee 20%);
小伙伴仔细看下这三个写法，前面固定red 20%，随着后面#eee的百分比逐渐接近red的20%，会发生什么有趣的事呢？
好了，直接上图。
渐变.png
可以看到，当两者的百分比不断接近的时候，渐变的边界区域也越来越小，直到两者相等，渐变的效果直接消失了。
由此可以得出一个结论：
"如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域， 过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那 个位置突然变化，而不是一个平滑的渐变过程。"
—— CSS图像（第三版）
根据这个结论，我们可以利用渐变来做出很多有趣的效果。
构造多边形
八边形.png
<div id="cut-2"></div>
<style>
#cut-2 {
width: 150px;
height: 150px;
background: #58a;
background: linear-gradient(135deg, transparent 30px, #58a 0) top left,
linear-gradient(-45deg, transparent 30px, #58a 0) bottom right,
linear-gradient(225deg, transparent 30px, #58a 0) top right,
linear-gradient(45deg, transparent 30px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
</style>
圆形切角.png
<div id="cut-3"></div>
<style>
#cut-3 {
width: 150px;
height: 150px;
background: #58a;
background: radial-gradient(circle at top left, transparent 30px, #58a 0) top left,
radial-gradient(circle at bottom right, transparent 30px, #58a 0) bottom right,
radial-gradient(circle at top right, transparent 30px, #58a 0) top right,
radial-gradient(circle at bottom left, transparent 30px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
</style>
构造条纹图案
垂直条纹.png
<div id="vertical-stripe-border"></div>
<style>
#vertical-stripe-border {
width: 100px;
height: 100px;
background: linear-gradient(90deg, #fb3 50%, #58a 0);
background-size: 30px 100%;
}
</style>
斜向条纹.png
<div id="slant-stripe-progress"></div>
<style>
#slant-stripe-progress {
width: 200px;
height: 10px;
background: repeating-linear-gradient(45deg,
#58a 0,
#58a 25%,
#fb3 0,
#fb3 50%) 0 / 20px 20px;
border-radius: 10px;
}
</style>
构造格子图案
格子.png
<div id="grid-background"></div>
<style>
#grid-background {
width: 100px;
height: 100px;
background-color: #fff;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;
}
</style>
构造棋盘图案
棋盘.png
<div id=""></div>
<style>
#chessboard-background {
width: 100px;
height: 100px;
background-color: #eee;
background-image: linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0,transparent 75%,rgba(0,0,0,.25) 0),
linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0,transparent 75%,rgba(0,0,0,.25) 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
</style>
画出Vue logo
vue logo.png
#vue-logo {
width: 100px;
height: 116px;
background: #39b981;
background: linear-gradient(30deg, transparent 26px, #39b981 0) bottom left,
linear-gradient(-30deg, transparent 26px, #39b981 0) bottom right,
linear-gradient(150deg, transparent 26px, #39b981 0) top left,
linear-gradient(-150deg, transparent 26px, #39b981 0) top right;
background-repeat: no-repeat;
background-size: 50% 50%;
position: relative;
}
#vue-logo::after {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
content: '';
display: block;
width: 70px;
height: 60px;
background: linear-gradient(60deg, transparent 50%,#fff 0,#fff 70%, #34485e 0,#34485e 90%, transparent 0) bottom left,
linear-gradient(-60deg, transparent 50%,#fff 0,#fff 70%, #34485e 0,#34485e 90%, transparent 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 100%;
}
参考资料
- 《CSS揭秘》
