如题，想实现的效果是，假设目前有两张分辨率相同的图片堆叠在一起(只显示出上面的那一张)，我想要创建一个第三方 div，比如它是圆形或者椭圆形的，让这个形状作为遮罩，显示下方图片，其余无遮罩的部分显示上当图片，这是可以实现的吗？
This topic created in 1785 days ago, the information mentioned may be changed or developed.
 |
1
virgo Jul 2, 2021
css clip-path
|
 |
2
LeeReamond OP @virgo 感谢，有效。但是试了试这个属性是不是和阴影属性相冲突，我想表示一个方块悬浮在平面上面的感觉，需要有一定的阴影效果来体现距离感，但是加上了没反应
|
 |
3
94 Jul 2, 2021  1
|
|
4
94 Jul 2, 2021
@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 |
|
5
94 Jul 3, 2021
@LeeReamond #2 哦，对了，忘了说，`box-shadow` 在对于一些不规则图形应用会有问题，
如果需要在 clip-path 裁剪的内容上应用阴影需要使用 `filter: drop-shadow()` https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/drop-shadow() |
|
6
94 Jul 12, 2021
这段时间才有空把把 mask 的 demo [https://codepen.io/yogwang/pen/PombGQq?editors=1100] 做了，
同时也把笔记纪录好了，欢迎吐槽 [https://yogwang.site/2021/CSS-mask/] |
Select Language