一、遮罩（蒙版）

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

圖片

背景圖片

蒙版

**蒙版的透明出會(huì)遮蓋元素，圖片區(qū)不會(huì)遮蓋元素

二、倒影

box-reflect：none | <direction> <offset> <mask-box-image>
<direction（倒影的方向）> = above | below | left | right
<offset（倒影距離元素的距離）> = <length> | <percentage>
<mask-box-image（設(shè)置倒影的遮罩方式）> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
默認(rèn)值：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{
            /* 默認(rèn)寫法，不加前綴，要在方向前面加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 代表藍(lán)紅的過渡區(qū)域是50px到60px之間 */
            background: -webkit-linear-gradient(0deg,blue 50px,red 60px);
        }
        .item4{
            /*20% 80%代表的過渡區(qū)域是20%到80%之間  */
            background: -webkit-linear-gradient(0deg,blue 20%,red 80%);
        }
        .item5{
            background: -webkit-repeating-linear-gradient(0deg,blue 20%,red 40%);
        }
        /* ---------------------------------徑向漸變------------------------------------ */
        .item6{
            /* 不能指定角度，圓的旋轉(zhuǎn)無意義 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{
            /* 在長(zhǎng)方形內(nèi)，徑向漸變是橢圓，可以添加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{
            /* 標(biāo)準(zhǔn)情況下角度的默認(rèn)值是180deg*/
            /* 兼容情況下角度的默認(rèn)值是-90deg */
            background:linear-gradient(blue,green);
        }

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