CSS渐变

在背景设置中需要使用到背景渐变，亦或者我们也可以通过渐变制作出自己想要的按钮或其他效果，尤其在html5的开发中更为重要，下面重点解析一下CSS3渐变。

css3渐变中分为两种情况：线性渐变和径向渐变（鉴于我个人不爱讲很理论的东西，个人感觉说的人很累，看到人很困，所有我的总结都是很粗鲁的，如有不适请见谅，我只是不希望大家快速滚过页面就走了》》）

1、线性渐变

使用规则是酱婶儿的：-webkit-linear-gradient: direction, from color, ...,end color,

                                        linear-gradient:direction, from color, ...,end color;

                             eg: background-image: -webkit-linear-gradient: 0deg, orange, green,

                                    background-image: linear-gradient: 0deg, orange, green;

当然css还是很人性的在direction这个字段上放上了一些关键字，免得大家还要烧脑计算角度定方向，具体关键字有：to top, to bottom, to left, to right, to top left, ...(自由组合)，这些关键字很容易理解，当然还有一些很奇葩的角度只能靠自己计算了。

从from color到end color你也可以添加更多的颜色字段，做更细腻的处理，或者需求规定，让过渡更为自然。

2、径向渐变

使用规则是酱婶儿的：-webkit-radial-gradient: position, from color,.., end color;

                                        radial-gradient: position, from color, ..., end color;

                                 eg: -webkit-radial-gradient: center, color1 , color2;

                                       radial-gradient: center, color1, color2;

direction关键字 center, ellipse, 半径1 半径2 at positionX positionY:  radial-gradient(50px 150px at 200px 150px)

                             circle at top/bottom/....

是不是太粗鲁了 。。。

说一下制作纹理背景，很复杂的纹理建议还是使用图片吧，因为不太容易书写，而且效果未必就好，既然纹理的话制作图片重复部分较多，使用图片也无关紧要。这里说一下纹理是为了更好的理解一些关于渐变的东西，就算以后用不到，但知道一下还是很有必要的，总要有一些装逼的本钱吧，哈哈哈哈、、（不得不说看了一些复杂的纹理实现，看的我真是头昏眼花，何必呢？这是要逼死UI吗，逼死FE吗，他们还是要工作哒~）

粗鲁的来了 栗子栗子

body{

       background-color:#282828;

       background-image:-webkit-radial-gradient:(black 15%, transparent 16%),

                                          -webkit-radial-gradient:(black 15%, transparent 16%),

                                          -webkit-radial-gradient:(rgba(255,255,255,.1) 15%, transparent 20%),

                                          -webkit-radial-gradient:(rgba(255,255,255,.1) 15%, transparent 20%);

      

      background-image:radial-gradient:(black 15%, transparent 16%),

                                          radial-gradient:(black 15%, transparent 16%),

                                          radial-gradient:(rgba(255,255,255,.1) 15%, transparent 20%),

                                          radial-gradient:(rgba(255,255,255,.1) 15%, transparent 20%);

      background-position:0 0px, 8px 8px,0 1px,8px 9px;

      background-size: 16px 16px;

}

那么纹理出来了，定义了四个渐变，两两相同，也刚好四个渐变对应了四个position, 后两个渐变分别优化前两个渐变。其他diy

想要实现立体按钮效果，渐变+box shadow 。

最后还有一个重复渐变

        -webkit-repeating-linear(radial)-gradient(color, color pos, color pos ... );

too lazy to write...