标签:begin 之间 -- direct 角度 let col class mil
css渐变
渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡(过渡是指颜色的过度)
兼容性
IE chrome FireFox Safari Opera
10+ 26+ 16+ 6.1+ 12.1+
10.0-webkit- 3.6 -moz- 5.1 -webkit- 11.6 -0-
线性渐变(Linear Gradients)属性
是沿一根轴线改变颜色,从起点到终点颜色进行顺序渐变(从一边拉向另一边)
语法:background:linear-gradient(direction,color-stop1,color-stop2,...);
线性渐变-从上到下(默认)--不需要指定方向
语法:background:linear-gradient(color-stop1,color-stop2,...);
线性渐变-从做到右
background: -webkit-linear-gradient( begin-direction,red,blue,greenyellow);
background: -moz-linear-gradient( end-direction,red,blue,greenyellow);
background: -o-linear-gradient( end-direction,red,blue,greenyellow);
background: linear-gradient(to end-direction,red,blue,greenyellow);(标准写法)
注:随着浏览器版本不断更新,兼容性也会有所变化,并会越来越好,
如:-moz-linear-gradient在火狐3.6-15版本中,方向指目标防线,新版指开始方向,
并兼容了渐变的标准写法,所以建议用标准写法
线性渐变-对角
background: -webkit-linear-gradient(begin-level begin-vertical,red,blue,greenyellow);
background: -moz-linear-gradient( end-level end-vertical,red,blue,greenyellow);
background: -o-linear-gradient( end-level end-vertical,red,blue,greenyellow);
background: linear-gradient( to end-level end-vertical,red,blue,greenyellow);(标准写法)
线性渐变-使用角度
语法:background:linear-gradient(angle,color-stop1,color-stop2,...);
角度说明 0deg 从下到上的渐变 90deg从做到右
线性渐变-颜色结点
background:linear-gradient(color1 length|percentage,
color2 length|percentage,
......
);
/*10%是纯红色,从10%到15%从红色渐变成橘色,最后一个如果是90%,那么从90%到100%之间就是纯粹的violet色,
因为indigo 80%violet需要大于80%才会有渐变效果*/
/*注:最后一个颜色如果不写默认是100%,第一个颜色如果不写默认是0%*/
background: -webkit-linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
background: -moz-linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
background: -o-linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
background: linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
透明渐变
/*rgba第四个值是阿尔法值,如果是0,代表透明度为0,如果是1,透明度100%*/
/*第二个rgba代表位置到50%,透明度达到90%*/
background: -webkit-linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,.9),rgba(255,0,0,1));
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>线性渐变-从上到下(默认情况)</title> <style type="text/css"> div{ width: 500px; height: 300px; /*从上到下*/ /*background: -webkit-linear-gradient(red,blue,greenyellow);*/ /*background: -moz-linear-gradient(red,blue,greenyellow);*/ /*background: -o-linear-gradient(red,blue,greenyellow);*/ /*background: linear-gradient(red,blue,greenyellow);*/ /*从左到右*/ /*background: -webkit-linear-gradient( left,red,blue,greenyellow);*/ /*background: -moz-linear-gradient( right,red,blue,greenyellow);*/ /*background: -o-linear-gradient( right,red,blue,greenyellow);*/ /*background: linear-gradient(to right,red,blue,greenyellow);*/ /*对角线*/ background: -webkit-linear-gradient( left top,red,blue,greenyellow); background: -moz-linear-gradient( right bottom,red,blue,greenyellow); background: -o-linear-gradient( right bottom,red,blue,greenyellow); background: linear-gradient(to right bottom,red,blue,greenyellow); } </style> </head> <body> <div></div> </body> </html>
标签:begin 之间 -- direct 角度 let col class mil
原文地址:https://www.cnblogs.com/alasijia/p/9223492.html