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 的时候,蒙版出来的效果是完全看不见的

css3 渐变、蒙版,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。