倒影

-webkit-box-reflect: left 10px -webkit-linear-gradient( right , rgba(255,0,0,0.3) , rgba( 255,255,255 ,0.5) );

谷歌浏览器的写法 （这个不同的浏览器的写法好像不一样）
-webkit-box-reflect: left 表示倒影在左边 10px 是指倒影和原图之间的距离 下来是渐变的代码

渐变 （背景颜色渐变）

background: -webkit-linear-gradient( left , blue, red,green);
background: linear-gradient( to left , blue, red,green);

两种写法 第一种加上浏览器的兼容 这时候渐变的方向就不能加 “to”
两种写法的区别： 第一种的方向表示从哪个方向开始 第二种写法是 向着“to”的方向开始渐变

线性渐变

支持方向用角度表示
background:-webkit-linear-gradient(45deg,blue ,red,pink) ;
渐变可以设置多个颜色
background: -webkit-linear-gradient( left , blue, red,green);
/* 50px 60px 代表连个颜色之间的过渡区域的50px到60px 之间 */
background:-webkit-linear-gradient( 0deg ,blue 50px ,red 60px) ;
可以设置百分比
background:-webkit-linear-gradient( 0deg,blue 20% ,red 80%) ;
渐变的部分是可以重复的
background:-webkit-repeating-linear-gradient(0deg,blue 50% ,red 100%) ;

镜像渐变

background: -webkit-radial-gradient( blue 100px ,red 100px)

屏幕快照 2017-09-13 下午7.11.57.png

background: -webkit-radial-gradient( bottom, blue 50px ,red 100px)

屏幕快照 2017-09-13 下午7.12.02.png

background: -webkit-repeating-radial-gradient( blue 50px ,red 100px)

屏幕快照 2017-09-13 下午7.12.08.png

/* 在矩形内，镜像渐变是椭圆 可以添加 circle样式 使其变成圆形 */
background: -webkit-repeating-radial-gradient( #F2AA84 50px ,#676767 100px)

屏幕快照 2017-09-13 下午7.12.13.png

遮罩

                -webkit-mask-image: url('img/zzz.png') ;

        -webkit-mask-size: 400px 400px;
        -webkit-mask-position: 0 0;

遮罩要用 png 图片 不透明的部分会显示 原来层面上的东西
透明部分则为空白 可以设置遮罩层的尺寸和位置 默认遮罩层是重复铺满整个div的 没 有 “repret” 这个属性