CSS3蒙版、渐变、背景

背景原点

• background-origin:padding-box;(默认)

  border-box | padding-box | content-box

background-origin是用来决定图片的原始起始位置。它有三个可选值content-box,padding- box,border-box，即可以选择背景图片是从内容区域或者内边距或者边框开始显示

• background-clip:

  border-box | padding-box | content-box

clip原意为裁剪，截取。
background-clip的作用为将背景图片做适当的裁剪，以适应需要。
background-clip有content- box,padding-box,border-box三个值
剪裁方法：根据设置的盒子部位，那么图片在这个部位的
外边缘以外的部分都会不可见。

• background-size:

length： 长度值---第一个值设置宽度，第二个值设置高度
percentage： 百分比---第一个值设置宽度，第二个值设置高度
cover：等比缩放到完全覆盖容器，背景图像有可能超出容器
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内

背景渐变

线性渐变：linear-gradient
劲向渐变：radial-gradient

background:-webkit-linear | radial-gradient (水平起点 垂直起点 || 角度, 颜色1 0%, 颜色2 渐变到的位置百分比%, ... ,颜色N 100%);

background:radial-gradient(at 55px 55px, #fff  1%,#000 100%);
background:-webkit-radial-gradient(50px 50px,#fff  1%,#000 100%);

background:linear-gradient(to bottom,#000 0%,#fff 36%,#000 100%);
background:-webkit-linear-gradient(top,#000 0%,#fff 36%,#000 100%) ;

蒙版

/*可以使用图片或渐变作为遮罩层*/
-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
-webkit-mask-origin:border | padding | content 

简写：-webkit-mask:url("04.png")  40px  55px  no-repeat;