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);
原图
右边倒影
