遮罩，倒影，渐变

一、遮罩（蒙版）

.demo1 {
    background : url("images/logo.png") no-repeat;
    -webkit-mask : url("images/mask.png");
}

图片 背景图片 蒙版

**蒙版的透明出会遮盖元素，图片区不会遮盖元素

二、倒影

box-reflect：none | <direction> <offset> <mask-box-image>
<direction（倒影的方向）> = above | below | left | right
<offset（倒影距离元素的距离）> = <length> | <percentage>
<mask-box-image（设置倒影的遮罩方式）> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
默认值：none

div{
            background-image: url('meinv.jpg');
            background-size: 100%;
            width: 702px;
            height: 380px;
            margin: 100px auto 0;
            /* 生成倒影 */
            -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,1)30px);
        }

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

三、渐变

.item{
            width: 200px;
            height:200px;
            /* border: 1px solid pink; */
            float: left;
            margin: 10px;
            color: white;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
        }
        /* ---------------------------------线性渐变------------------------------------ */
        .item1{
            /* 默认写法，不加前缀，要在方向前面加to顺序从右到左 */
            background: linear-gradient(to left,blue,red);
            /* 兼容写法，不能在方向前面加to，顺序从左向右 */
            background: -webkit-linear-gradient(left,blue,red);
        }
        .item2{
            background: -webkit-linear-gradient(45deg,blue,red);
        }
        .item3{
            /* 50px 60px 代表蓝红的过渡区域是50px到60px之间 */
            background: -webkit-linear-gradient(0deg,blue 50px,red 60px);
        }
        .item4{
            /*20% 80%代表的过渡区域是20%到80%之间  */
            background: -webkit-linear-gradient(0deg,blue 20%,red 80%);
        }
        .item5{
            background: -webkit-repeating-linear-gradient(0deg,blue 20%,red 40%);
        }
        /* ---------------------------------径向渐变------------------------------------ */
        .item6{
            /* 不能指定角度，圆的旋转无意义 100px 代表的是半径*/
            background: -webkit-radial-gradient(blue 100px,red 100px);
        }
        .item7{
            /* 可以指定方向*/
            background: -webkit-radial-gradient(top,blue 50px,red 100px);
        }
        .item8{
            background: -webkit-repeating-radial-gradient(blue 50px,red 100px);
        }
        .item9{
            /* 在长方形内，径向渐变是椭圆，可以添加circle属性变成圆形 */
            background: -webkit-repeating-radial-gradient(circle,blue 50px,red 100px);
            width: 420px;
        }
        .item10{
            width: 800px;
            height: 10px;
            background: -webkit-linear-gradient(-45deg,transparent 4px,green 4px);
            background-size: 10px 10px;
        }
        .item11{
            /* 标准情况下角度的默认值是180deg*/
            /* 兼容情况下角度的默认值是-90deg */
            background:linear-gradient(blue,green);
        }

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