前端 css 有没有办法实现遮罩效果？

[LeeReamond]

如题，想实现的效果是，假设目前有两张分辨率相同的图片堆叠在一起(只显示出上面的那一张)，我想要创建一个第三方 div，比如它是圆形或者椭圆形的，让这个形状作为遮罩，显示下方图片，其余无遮罩的部分显示上当图片，这是可以实现的吗？

[virgo]

css clip-path

[LeeReamond]

@virgo 感谢，有效。但是试了试这个属性是不是和阴影属性相冲突，我想表示一个方块悬浮在平面上面的感觉，需要有一定的阴影效果来体现距离感，但是加上了没反应

[dfkjgklfdjg]

试试看这样？

https://codepen.io/yogwang/pen/NWjqOWW

[dfkjgklfdjg]

@dfkjgklfdjg #3 懒得用 CSS:mask 属性了，直接找了现成的 clip-path 路径就用了，你可以根据自己需要来选择使用 mask 还是 clip-path 。

https://developer.mozilla.org/en-US/docs/Web/CSS/filter
https://developer.mozilla.org/en-US/docs/Web/CSS/mask
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

[dfkjgklfdjg]

@LeeReamond #2 哦，对了，忘了说，`box-shadow` 在对于一些不规则图形应用会有问题，
如果需要在 clip-path 裁剪的内容上应用阴影需要使用 `filter: drop-shadow()`

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/drop-shadow()

[dfkjgklfdjg]

这段时间才有空把把 mask 的 demo [https://codepen.io/yogwang/pen/PombGQq?editors=1100] 做了，
同时也把笔记纪录好了，欢迎吐槽 [https://yogwang.site/2021/CSS-mask/]