css3中的渐变属性的使用

渐变属性是一种浏览器解析生成的一种背景,是不会占位置的,相当于背景颜色

        分为:线性渐变,径向渐变,重复渐变

        线性渐变的使用方式 为一个背景颜色

 

        属性:background,或者background-image

        属性值:linear-gradient (参数)

                参数1表示方向(默认为从上到下)

                参数2,3,4,5...等等都表示的颜色

                每一个参数之间都要用逗号隔开,线性渐变的方法默认是to + 结束的方向值

                可以添加left top 来代表左上角,也就是说可以使用角度值来进行赋值,还可以进行角度赋值,角度赋值的单位为deg

        常见的写法为:background:linear-gradient(red,blue)  线性渐变方向为从上到下,颜色为红色和蓝色

        径向渐变:表现为在一个大大的盒子里面绘制出一个类似圆形的背景

        属性还是为background  属性值为:radial-gradient(参数)

        参数1为:渐变的起点位置,默认为盒子的中心点(center),可以修改为top,right,bottom,left. 还可以修改为数字加单位 100px

        参数2为:渐变的形状:ellipse表示椭圆形,circle表示圆形 (默认为椭圆形)

        参数3渐变的大小 即渐变到哪里停止 有四个值 closest-side:最近边;   farthest-side;最远边;   closest-corner:最近角;      farthest-corner:最远角   

        参数4,5,6......颜色

        重复渐变:属性都不变为background 属性值在要重复的渐变前面加repeating 参数填写百分比

        线性重复渐变:属性值为repeating-linear-gradient()

        径向重复渐变:属性值为repeating-radial-gradient()