Css3 渐变

CSS3提供了创建颜色渐变的方式，在两个或更多的颜色之间进行平滑色过度。

浏览器支持两种颜色渐变

　　线性渐变：

　　　　

div{
    width:200px;
    heigth:100px;
    background:linear-gradient(to bottom,red,yellow)
}

　　　to　bottom:渐变的方向或角度

　　　　　　1.使用关键字表示方向：left  right  top  bottom，left top、right top、、、、、、、、等

　　　　　　2.用数字表示角度：取值范围0-360  单位是deg（degree的简写）

　　　red：第一种颜色

　　　　　　1.颜色列表：两个或更多的颜色的组合，用逗号分开

　　　　　　2.可以使用关键字，十六进制 RGB HSL.....等。

　　　yellow：第二种颜色

 

 

　　径向渐变

　　　　

div{
    width:200px;
    heigth:100px;
    background:radial-gradient(aqua，blue)；
}

　　  径向渐变是从元素中心向四周放射性渐变，成椭圆形

　　　　1.默认情况下椭圆的大小自动匹配所在元素尺寸

　　　　2.在参数中指定渐变的形状：cirale（圆形） ellipse（椭圆形 默认）

　　　　　　Background：radial-gradient（circle，aqua，blue）；

参数列表：

radial-gradient（形状  大小  at  位置，颜色1  颜色2.......）；

 　   1.形状：使用圆形或椭圆形

　 　2.大小：使用长度表示：如10px或者使用百分比：50%

 　　3.位置： 渐变开始的位置（默认值 center）、left、left  right  top  bottom，left top、right 　　　　　　                       top、、、、、等

 　　

 

转载于:https://www.cnblogs.com/xiaowie/p/9816041.html