css3屬性

1.蒙版(mask)

為元素添加一層蒙版,分為圖片蒙版和漸變蒙版

屬性

  mask-attachment:設(shè)置圖片是否隨頁(yè)面滾動(dòng);
  mask-position:設(shè)置蒙版的起始位置;
  mask-image:設(shè)置用于遮罩的圖片;
  mask-repeat:設(shè)置遮罩的方式;

實(shí)例

css實(shí)例

  div{
        width: 100px;
        height: 100px;
        background-repeat: no-repeat;
        -webkit-mask-image:url("img/1.png");
        /*蒙版 有顏色顯示*/
        -webkit-mask-repeat:no-repeat;
    }

原圖

圖片蒙版

div{
        width: 400px;
        height: 400px;
        background-repeat: no-repeat;
        -webkit-mask-image:-webkit-radial- gradient(50% 50%,rgba(0,0,0,0),rgba(0,0,0,1));
        /*蒙版 有顏色顯示*/
        -webkit-mask-repeat:no-repeat;
    }

原圖

漸變蒙版

2.漸變(gradient)

為元素設(shè)置顏色漸變,分為線性漸變和徑向漸變
線性漸變:沿著線性的方向改變顏色
徑向漸變:見著半徑的方向改變顏色

線性漸變

  background:linear-gradient(to top,red, yellow, blue);

線性漸變

徑向漸變

  background:linear-gradient(to top,red, yellow, blue);

徑向漸變

3.倒影(reflect)

設(shè)置圖片的倒影效果

  -webkit-box-reflect:right 10px -webkit-radial-gradient(yellow,red);

原圖

右邊倒影