CSS并不简单--带你认识不一样的渐变

作为CSS3新增的属性，渐变也有着无穷的潜力。

一、简介

渐变是CSS3新增的图片类型，用来代替图片，它的好处有：

加快页面的加载速度，减少带宽的占用；
更加灵活。

二、线性渐变

其实渐变的使用也挺常见的，例如导航栏：

    background-image: linear-gradient(90deg,#0af,#0085ff)

很显然，这比纯色的背景好看太多了。

当然，有时间我们并不需要过渡效果：

    background-image: linear-gradient(90deg,blue 100px,#FFF 100px,#FFF 200px,red 200px);

对于线性渐变，除了linear-gradient，还有repeating-linear-gradient：

    $c1: #fff;
    $c2: #DF5646;
    $c3: #1C78A4;
    background-image: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 40px, $c1 40px, $c1 50px, $c3 50px, $c3 80px);

由此可见，渐变并没有那么简单。

这里肯定有人要问，还能玩出什么花样？首先我们要明白渐变是一种图片，那么再想想还有什么与图片一起使用的CSS属性？

    $color: #122556;
    background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%),
                      linear-gradient(-45deg, $color 25%, transparent 25%, transparent 75%, $color 75%);
    background-size: 30px 30px;

通过这个例子，是不是使用渐变的思路更加开阔了。不过这里还需要注意一点：

当你声明多个渐变时，最先声明的，离用户越近。（这里就需要我们考虑遮盖的问题，一般采用transparent）；

同样，渐变也可以做动画

    @mixin menuaction($color) {
        background: linear-gradient($color 100%, transparent 100%) no-repeat center bottom / 100% 10%;
        &:hover {
            background-size: 100% 100%;
            color: #fff;
        }
    }

三、径向渐变

对于径向渐变的radial-gradient和repeating-radial-gradient的使用技巧基本上和线性渐变差不多，这里大家自己去探索吧。

四、总结

最后以什么结束呢，哈哈最近各种优惠券，那我们用渐变的知识来搞张优惠券吧：

	width: 300px;
    height: 120px;
    background: radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(#fff 0, #fff 10px, rgb(247,245,201) 10px) no-repeat,
                radial-gradient(#fff 0, #fff 10px, rgb(247,245,201) 10px) no-repeat,
                linear-gradient(90deg,transparent 10px, rgb(247,245,201) 10px);
    background-size: 20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,60px 60px,60px 60px,100% 100%;
    background-position: -10px 0,-10px 20px,-10px 40px,-10px 60px,-10px 80px,-10px 100px,60px -30px,60px 90px,left center;

现在是不是思绪万千，那还不赶紧码起来。

喜欢本文的小伙伴们,欢迎关注我的订阅号超爱敲代码,查看更多内容.