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

 

转载于:https://www.cnblogs.com/z-turn/p/3623601.html