会用PS的童鞋一定知道“蒙版”的概念，它可以在图片上实现一定的遮罩效果，当然这里我们不介绍ps里的蒙版，而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果。 大家对-webkit-mask这一属性可能不太熟悉，或许有很多人都是第一次见到，没错，这一属性也是还未被众多 ...

-webkit-mask： 蒙版，用于将固定形状设置透明度，形状可以是一个div，也可以是一张图片； 用法：-webkit-mask: radial-gradient(transparent 50px, rgb(0,0,0) 51px); ...

前不久做了一个项目，需要一个小效果，就是获取用户头像以心形的形状展现在页面上，开始小五想的实现方式是canvas画图或CSS3的clip（剪切），发现都不理想，和设计稿里的图形美观度相差太大，而且实现起来太麻烦，后来，小五采用了一个CSS3的新增属性完美的解决了这个问题，今天就来和大家分享 ...

有一个页面的调用不了jquery，我选择用纯粹的javascript来实现一个交互效果。 要求是这样的，点击一个图标后，弹出一个二维码图片，弹出的位置是在鼠标的周围。 原理是这样的：先弹出一个mask 也就是一个div 设置他的z-index属性 再弹出输入框，他的z-index属性要大于 ...

mask demo效果演示：http://dtdxrk.github.io/game/css3-demo/mask.html mask 的属性： -webkit-mask-image:url | gradient /*可以使用图片或渐变作为遮罩层 ...

经常看一些 LOL 比赛直播的小伙伴，肯定都知道，在一些弹幕网站（Bilibili、虎牙）中，当人物与弹幕出现在一起的时候，弹幕会“巧妙”的躲到人物的下面，看着非常的智能。 简单的一个截图例子： 其实，这里是运用了 CSS 中的 MASK 属性实现的。 mask 简单用法介绍 之前 ...

最近在b站上看到一种弹幕效果叫做智能防挡弹幕，也就是传说中的蒙版弹幕， 打开之后效果大概是这样的 再也不用担心男神女神的绝世容颜被花里胡哨的弹幕挡住啦，是不是感觉很神奇。 实现原理其实就是类似于ps的蒙版，也就是说将图像的一部分 “隐藏”。这里我们需要用到的是css3的mask遮罩属性 ...

需要js 思路：假设目标元素是target。在外层定义元素宽高等于target，通过border设置元素铺满整个文档，设置border的透明图，实现蒙版，在元素的内部设置子元素，宽高100%;设置圆角边框50%； 设置box-shadow inset显示 代码： css ...