渐变以及倒影和遮罩

渐变

渐变分为线性渐变以及径向渐变，下面来一一介绍

线性渐变

注意事项

• 默认写法，不加前缀，要在方向前面加to，顺序从右向左
• 兼容写法，不能在方向前加to，顺序是从左向右
• background: -webkit-linear-gradient(0deg ,blue 50px,green 60px,red 110px);代表蓝绿过渡效果在50到80之间
• repeating代表是重复的

• 当设置度数时background: linear-gradient(0deg,blue,green,red); 默认从下上，background: -webkit-linear-gradient(0deg,blue,green,red);默认从左往右，当什么都不设置的话，加不加前缀都是从上往下
  下面通过具体例子介绍线性渐变
  代码
  
  
  
  
  
  
  
  
  

  1
  
  
  2
  
  
  3
  
  
  4
  
  
  
  运行结果：
  
  
  

  B989251E-2815-4595-93D7-3436563FC97E.png

径向渐变

注意事项

• 不能确定角度，圆的旋转无意义100px代表半径
• 可以指定方向，如top
• 在长方形内，径向渐变是椭圆，可以添加circle属性变成圆形
  下面通过例子来介绍一下径向渐变
  代码如下：
  
  
  
  
  
  
  
  
  
  5
  
  
  6
  
  
  7
  
  
  8
  
  
  9
  
  
  10
  
  
  
  运行结果

E23F62B2-839A-4EAE-BEA6-F84367C92F68.png

倒影

倒影主要也就一行代码，很简单的，例如一张图片，让其设置左边的倒影，通过下面的代码可以设置出来
-webkit-box-reflect:left 10px -webkit-linear-gradient(right,rgba(0,0,0,0),rgba(255,255,255,1));
结果如图所涉：

1A9A68CE-4D8D-43EF-B3AA-7E7D49410E44.png

遮罩

遮罩和倒影差不多都很简单的

• 设置遮罩图片：-webkit-mask-image:url("1.png") ;
• 设置遮罩图片的大小：-webkit-mask-size:100%;
  遮罩定位：-webkit-mask-position:10px 10px;
  例图：

40683029-0E80-498C-87DB-5D67A326BBDF.png

除去图片其他地方都是同名的，所有文字只显示在图片内，其他地方没有。
今天的知识希望有所收获。