巧用css3渐变

[chenxiaochun]

大家都知道，css支持两种渐变形式：线性渐变和放射性渐变。我今天想聊的是如何利用它们实现一些特殊的效果，所以基础语法就不讲了，你可以自己去搜索到各种教程。

线性渐变

先来实现一个最基础的，由上至下，从红色到黄色的渐变。

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

.box{
    width: 400px;
    height: 200px;
    background-image: linear-gradient(red, yellow);
}

可以看到红色是逐渐过渡到黄色的，我现在修改一下两个颜色的渐变终点位置。红色的终点位置改成 50%，黄色的终点位置改成 0。

  width: 400px;
  height: 200px;
  background-image: linear-gradient(red 50%, yellow 0);

可以看到两个颜色从中间直接切分开，没有任何过渡。这就是linear-gradient的一个使用技巧：

只要一个颜色的color-stop小于上一个颜色的color-stop，这两种颜色之间就不会产生任何过渡。

沿着思路继续，再添加一个background-size控制一下垂直方向的背景大小，就可以实现一个如下的条纹效果：

.box{
  width: 400px;
  height: 200px;
  background-image: linear-gradient(red 50%, yellow 0);
  background-size: 100% 10%;
}

看到这里，你觉得利用上面的思路还能实现什么效果呢？是的，比如信纸的书写条纹。实现此效果，只是将第一个渐变色的color-stop改成了1px，将第二个渐变色改成了transparent。

.box{
  width: 400px;
  height: 200px;
  background-image: linear-gradient(red 1px, transparent 0);
  background-size: 100% 10%; 
}

接下来实现一个如下的格子纸效果，需要用到两组渐变。第一组渐变用来实现水平方向的直线，第二组渐变用来实现垂直方向的直线，并且给第二组的渐变添加了一个90deg用来改变渐变角度。

.box{
  width: 400px;
  height: 200px;
  background-image:
    linear-gradient(red 1px, transparent 0),
    linear-gradient(90deg, red 1px, transparent 0);
  
  background-size: 10% 10%;
  
  border-right: 1px solid red;
  border-bottom: 1px solid red;
}

继续深入

上面的所有效果实现起来还比较简单对吧，那现在看如何实现下面的效果呢？

可能有的同学会说，这还不简单，将上面的条纹效果旋转 45 度不就可以了。真的可以吗，我们来试试。直接给linear-gradient添加一个旋转角度。

.box{
  width: 400px;
  height: 200px;
  background-image:
    linear-gradient(45deg, red 50%, yellow 0);
  
  background-size: 100% 10%;
  
}

可以看到渲染的效果和我们预想的大相径庭：

分析原因：

由于background-size的限制，所以linear-gradient在垂直方向上其实只渲染了10%的区域。你之所以能看到一个完整的条纹效果，是因为background-repeat的默认值是repeat，如果你把它的值改成no-repeat，只会看到一条条纹了：

当你改变linear-gradient的角度时，它也只是在这10%的区域内进行旋转，并不是整体进行了旋转。

如何实现：

我们试着把.box元素想象成一个地面，我们要给这个地面铺上40*40的正方形地砖。那首先，我们得把第一块地砖画出来，然后再重复平铺到整个地面就可以了。

.box{
  width: 400px;
  height: 200px;
  background-image:
    linear-gradient(45deg, red 25%, yellow 0, yellow 50%, red 0, red 75%, yellow 0);
  
  background-size: 40px 40px;
  
  background-repeat: no-repeat;
}

重点就在于linear-gradient，所以我们详细解释一下它各个参数含义：

• 45deg，将渐变色旋转 45 度
• red 25%，铺 25% 的红色
• yellow 0，因为它的color-stop小于上一个颜色值，所以没有任何过渡
• yellow 50%，从上一个颜色过渡到 50% 的位置为止，因为和上一个颜色相同，所以其实是没有任何过渡的。这就是为什么上一个参数是yellow 0的原因
• red 0，作用和yellow 0同理
• red 75%，从上一个颜色过渡到 75% 的位置为止，因为和上一个颜色相同，所以其实也没有任何过渡
• yellow 0，剩下的 25% 直接填充黄色

相信你也看明白了，其中最关键的地方就是对于color-stop等于 0 的运用。其实 css 中提供了一个现成的repeating-linear-gradient去实现条纹效果，可查看完整示例。

.box{
  width: 400px;
  height: 200px;
  background-image:
    repeating-linear-gradient(45deg, red, red 10px, yellow 0, yellow 20px);
}

使用此方法实现会略微简单，相信你只要看懂了上面的原理，这个还是能很容易明白的。

放射性渐变

还是看一个最简单的放射性渐变，从红色渐变到黄色：

.box{
  width: 400px;
  height: 200px;
  background-image:
    radial-gradient(red, yellow)
}

可以控制颜色的过渡范围，比如将红色限制在元素的区域之内：

.box{
  width: 400px;
  height: 200px;
  background-image:
    radial-gradient(circle closest-side, red, yellow)
}

还是利用上面线性渐变的原理，来实现一个圆环的效果：

.box{
  width: 400px;
  height: 200px;
  background-image:
    repeating-radial-gradient(
      circle closest-side,
      red, yellow 0, yellow 10px, red 0, red 20px
    )
}

更多效果

这是一个国外某大神利用 css 实现的各种吊炸天的效果，可以参考一下：http://lea.verou.me/css3patterns/