这是一个创建于 1239 天前的主题，其中的信息可能已经有所发展或是发生改变。
如题，想实现的效果是，假设目前有两张分辨率相同的图片堆叠在一起(只显示出上面的那一张)，我想要创建一个第三方 div，比如它是圆形或者椭圆形的，让这个形状作为遮罩，显示下方图片，其余无遮罩的部分显示上当图片，这是可以实现的吗？
 |
1
virgo 2021-07-02 16:12:40 +08:00
css clip-path
|
 |
2
LeeReamond OP @virgo 感谢，有效。但是试了试这个属性是不是和阴影属性相冲突，我想表示一个方块悬浮在平面上面的感觉，需要有一定的阴影效果来体现距离感，但是加上了没反应
|
 |
3
dfkjgklfdjg 2021-07-02 17:27:44 +08:00  1
|
|
4
dfkjgklfdjg 2021-07-02 17:31:16 +08:00
@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
dfkjgklfdjg 2021-07-03 14:00:48 +08:00
@LeeReamond #2 哦，对了，忘了说，`box-shadow` 在对于一些不规则图形应用会有问题，
如果需要在 clip-path 裁剪的内容上应用阴影需要使用 `filter: drop-shadow()` https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/drop-shadow() |
|
6
dfkjgklfdjg 2021-07-12 18:50:10 +08:00
这段时间才有空把把 mask 的 demo [https://codepen.io/yogwang/pen/PombGQq?editors=1100] 做了，
同时也把笔记纪录好了，欢迎吐槽 [https://yogwang.site/2021/CSS-mask/] |
Select Language