月度归档:2017年04月

CSS3 mask 实现心形头像

CSS3 的mask 和和PS中的蒙版很像,即为了得到特殊的显示效果,可以在遮罩层上创建一个任意形状的“视窗”,遮罩层下方的对象可以通过该“视窗”显示出来,而“视窗”之外的对象将不会显示。mask便是创建这样一个遮罩层。

关键属性: mask-image 通过读取透明度对html元素进行遮罩,黑色代表透明,白色代表不透明,灰色为半透明。适用于所有元素。

兼容性:查看 caniuse

查看 DEMO

mask