CSS3蒙版/遮罩、倒影

蒙版/遮罩mask

很简单的一个属性，并不是PS里面的那个蒙版

蒙版目前只有-webkit-内核的浏览器支持（谷歌、Safari、新欧朋opera），其他不支持

需要png的透明度遮罩

-webkit-mask-image:url("png的图片，需背景透明")，和背景设置一样，可以设置多个png图为蒙版

我这里用的png图是一个小星星：

效果图：

哈哈哈，是不是很神奇呀，啦啦啦~

倒影-webkit-box-reflect

倒影目前只有-webkit-内核的浏览器支持（谷歌、Safari、新欧朋opera），其他不支持

例如： -webkit-box-reflect：right/left/blow/above 10px url("图片路径")）；

第一个值：倒影方向
第二个值：倒影与本体之间的距离，为具体的数值
第三个值：可以是透明度的渐变， 也可以是一个png透明的图片

这里给一个透明色渐变的例子：

-webkit-box-reflect:below 10px -webkit-repeating-linear-gradient(90deg,rgba(255,255,10,1),rgba(10,255,255,0.5));

效果图：