css3属性及用法

css3属性

1.蒙版(mask)

为元素添加一层蒙版,分为图片蒙版和渐变蒙版

属性

  mask-attachment:设置图片是否随页面滚动;
  mask-position:设置蒙版的起始位置;
  mask-image:设置用于遮罩的图片;
  mask-repeat:设置遮罩的方式;

实例

css实例

  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)

为元素设置颜色渐变,分为线性渐变和径向渐变
线性渐变:沿着线性的方向改变颜色
径向渐变:见着半径的方向改变颜色

线性渐变

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

线性渐变

径向渐变

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

径向渐变

3.倒影(reflect)

设置图片的倒影效果

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

原图

右边倒影