28.CSS渐变效果
第二十一章 CSS渐变效果
一、线性渐变
linear-gradient（方位，起始色，末尾色）
(1) 方位 ：可选参考数，渐变的方位。可以使用的值：to top、to top right、to right、to bottom、to bottom left、to left、to top left。
(2) 起始色：必选参数，颜色值。
(3) 末尾色：必选参数，颜色值。
例、//两个必须参数
div{
background-image:linear-gradient(orange,green);
}
//增加一个访问 (top,bottom,left,right实现的渐变方向比较单一，我们也可以用角度来设置方向值，比如0度：（0deg）相当于to top，角度会沿逆时针方向随着角度值的增大而增加)
background-image:linear-gradient(to top，orange,green); // to bottom 为默认值；
//通过角度设置方向，0～360度之间，可以说负值
background-image:linear-gradient(45deg，orange,green);
//多线性渐变
background-image:linear-gradient(-45deg,orange，blue,green,red);
//通过百分比设置多线性位置
background-image:linear-gradient(-45deg,orange 0%,green 20%,blue 40%,red 100%); //百分数是改颜色起始和结束的渐变位置。
background-image:linear-gradient(-45deg,orange 10px,green 40px,blue,red 500px); //px计算有点麻烦，所以不推荐。
//结合背景，并使用透明渐变实现强大层次感 (网上挺多)
background-color:red;
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0));
//重复渐变属性值（百度一下，会有很多漂亮的）
background-image:repeating-linear-gradient(-45deg,orange 0%,green 20%,blue 40%,red 100%);
Opera Firefox Chrome IE Safari
部分支持需带前缀 11.5 无 4～9 4～5 无
支持需带前缀 无 3.6～15 10～25 5.1～6 无
支持不带前缀 12.1+ 16+ 26+ 6.1+ 10.0+
//加上兼容前缀 (可以上网查 浏览器引擎前缀 是否剔除)
background-image:-webket-linear-gradient(to top，orange,green);
background-image:-moz-linear-gradient(to top，orange,green);
background-image:-o-linear-gradient(to top，orange,green);
background-image:linear-gradient(to top，orange,green);
二、径向渐变（图形上是椭圆向四周发散）
background-image:radial-gradient(orange,green)
linear-gradient（方位，起始色，末尾色）
(1)方位 ：可选参考数，渐变的方位。可以使用的值：to top、to top right、to right、to bottom、to bottom left、to left、to top left。
(2)起始色：必选参数，颜色值。
(3)末尾色：必选参数，颜色值。
//两个必选参数
//可已设置形状（默认是椭圆形）
形状 说明
（1）circle 圆形
（2）elipse 椭圆形，默认值
background-image:radial-gradient(circle,orange,green)
//不但可以设置形状，还可以设置颜色的发散方向
方向 说明
top 从顶部发散
left 从左侧发散
right 右
bottom 底
center 中
//也可以复合方向，比如右下方
background-image:radial-gradient(circle at right bottom，orange,green)
//可以设置发散的距离，即圆的半径长度
background-image:radial-gradient(circle closest-side，orange,green)
半径关键字 说明
closest-side 指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner 指定径向渐变的半径长度为从圆心到离圆心最远的角
//关键字有点拗口，可以用像素表示半径，但不接受百分比
background-image:radial-gradient(circle 50px，orange,green)；
//同样，也有重复背景（里边圆的半径过小）
background-image:repeating-radial-gradient(circle 50px，orange,green)；
//兼容模式
background-image:-webket-radial-gradient(circle，orange,green)；
background-image:-moz-radial-gradient(circle，orange,green)；
background-image:-o-radial-gradient(circle，orange,green)；
background-image:radial-gradient(circle，orange,green)；
//两个重复背景只要加上前缀就是兼容模式了
background-image:-webket-repeating-radial-gradient
background-image:-moz-repeating-radial-gradient
background-image:-o-repeating-radial-gradient
background-image:repeating-radial-gradient
