css3 渐变、蒙版
渐变
线性渐变:linear gradient
语法:background: -webkit-linear-gradient( [point || angle ] , stop ,stop +)
第一个参数可以是用于设置起始点(起始边)eg:top left 或者 top也可以是渐变的旋转角度按照逆时针方式计算,设置为0时效果等同于设置left,表示从左边开始渐变。
stop代表颜色节点,可以有多个。eg: -webkit-linear-gradient(left ,yellow,black,blue)代表颜色从左侧开始渐变颜色依次变化,从黄变黑再变蓝。
例:
background:-moz-linear-gradient(45deg,#003366
30%,#0099cc);
background:-webkit-linear-gradient(45deg,#003366 30%,#0099cc);
径向渐变:
径向渐变是指一个点为中心向四周围扩散的渐变类型。
语法:-webkit-radial-gradient([<bg-position> || <angle>+] , [<shape> || <size>+] ,[<color-stop>+]) ;
除了一些线性渐变中的特性,径向渐变还允许指定渐变的形状,大小(最近端closest-side,最远端farthest-side,最近角closest-corner,最远角farthest-corner,包
含contain或覆盖corver)
webkit-radial-grandient(center ,ellipse cover ,white,black);
也可以用像素或百分比来指定中心位置:webkit-radial-grandient(10% 30% ,ellipse (椭圆)cover ,white,black);
重复渐变的应用。-webkit-repeating-linear-gradient。
例:
background:-moz-radial-gradient(30%
30%,white,gray,black);
background:-webkit-radial-gradient(30% 30%,white,gray,black);
蒙版
语法:
-webkit-mask-image:url | gradient /*可以使用图片或渐变作为遮罩层*/
-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat /*蒙版重复*/
-webkit-mask-position:x y; /*蒙版位移*/
-webkit-mask-clip:border | padding | content /*蒙版裁剪border | padding | content 之外的部分*/
-webkit-mask-origin:border | padding | content /*蒙版起始位置*/
注:
在css3里面,渐变作为蒙版时,蒙版只和alpha的值,和图片颜色或者渐变颜色没有关系,alpha=0 的时候,蒙版出来的效果是完全看不见的
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。