渐变之美

在日常前端开发中，渐变应该是小伙伴常用的属性之一了。但是，你真的把渐变用透了吗？
渐变除了可以用于颜色过渡之外，还有哪些用法呢？小伙伴们可以尽情想象下 >_<
在介绍渐变的神奇用法之前，我们先来看看它的类型及日常用法：

渐变的类型及日常应用

• 线性渐变

.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揭秘》