多出一个阴影

马黑黑

阴影可以脱离本体。若此，当重复使用阴影，滤镜阴影会出现比预期多出一个阴影的现象。试参考以下代码：

<style>

#papa {

width: 100px;

height: 100px;

background: red;

/* 阴影一 : box-shadow */

box-shadow: 120px 0 0 pink;

/* 阴影二 : drop-shadow */

filter: drop-shadow(240px 0 0 purple);

}

</style>

<div id="papa"></div>

在这组代码中，我们设计的预期是：宽高 100*100 的矩形拥有两个阴影，其一用CSS box-shadow 属性做成，它排在主体元素右边20px处，其二是滤镜阴影，它紧跟在阴影一右边20px处。但效果却是酱紫：

多出了一个紫色阴影。第三个矩形是我们用 filter 设计的滤镜阴影，是我们希望它出现的，但我们的这个设计给了我们一个惊喜：生了一对双胞胎。啥情况？

drop-shadow 滤镜的投影方式将前面的 box-shadow CSS属性的阴影也投射了一份。drop-shadow 自身如果重叠使用，也会将前一份阴影进行再投射，只要尺寸拉开。

扩展：如何让阴影具备点击交互能力 → 让阴影具备接收点击交互 (freeee.ml)

马黑黑

扩展一文，其滤镜阴影只有一个。不过，它其实也有两个，只不过这两个滤镜阴影重叠在了一起（请研究代码对阴影位置的设计）。
如果有兴趣进一步探究，请参考如下代码并运行它查看效果：

1. <style>
   
2. #papa {
   
3.         width: 100px;
   
4.         height: 100px;
   
5.         background: red;
   
6.         /* 阴影一 : box-shadow */
   
7.         box-shadow: 120px 0 0 pink;
   
8.         /* 阴影二 : drop-shadow */
   
9.         filter: drop-shadow(140px 0 0 purple);
   
10.         cursor: pointer;
    
11.         position: relative;
    
12. }
    
13. #papa::before, #papa::after {
    
14.         position: absolute;
    
15.         content: '';
    
16.         width: 100%;
    
17.         height: 100%;
    
18.         left: 120px;
    
19.         cursor: inherit;
    
20. }
    
21. #papa::after {
    
22.         left: 240px;
    
23. }
    
24. </style>
    
25. 
    
26. <div id="papa"></div>

复制代码

红影

马黑黑 发表于 2023-3-22 08:17
扩展一文，其滤镜阴影只有一个。不过，它其实也有两个，只不过这两个滤镜阴影重叠在了一起（请研究代码对阴 ...

是因为取值的问题吧，也同样取120，这样当中的那个就重叠了。无法明白的是，为什么当中那个的颜色没被覆盖掉？感觉得到的结果应该是红紫紫，而不是红粉紫？

红影

“如何让阴影具备点击交互能力：可以令伪元素以透明方式将往外投射的阴影包裹起来，将伪元素接收点击交互的能力“借给”阴影。”

学习了

红影

为什么要用box和滤镜阴影两种阴影，用一种可以么？

庶民

有兴趣，可是弄不懂。

樵歌

很喜欢，但是懂不起

马黑黑

樵歌 发表于 2023-3-22 11:06
很喜欢，但是懂不起

没有代码基础是看不懂的

马黑黑

庶民 发表于 2023-3-22 10:53
有兴趣，可是弄不懂。

要有点前端基础

马黑黑

红影 发表于 2023-3-22 08:57
是因为取值的问题吧，也同样取120，这样当中的那个就重叠了。无法明白的是，为什么当中那个的颜色没被覆 ...

滤镜阴影都会将元素及其先前的阴影投射出去，且，滤镜阴影的层级低于CSS阴影，所以，滤镜阴影不能覆盖CSS阴影。

马黑黑

红影 发表于 2023-3-22 08:58
“如何让阴影具备点击交互能力：可以令伪元素以透明方式将往外投射的阴影包裹起来，将伪元素接收点击交互的 ...

这就是前面帖子使用的雕虫小技

马黑黑

红影 发表于 2023-3-22 09:09
为什么要用box和滤镜阴影两种阴影，用一种可以么？

可以的。但你要弄清楚：不论使用何种阴影，滤镜的drop-shadow阴影都会将先前已有的阴影也做一份投射。

马黑黑

红影 发表于 2023-3-22 08:57
是因为取值的问题吧，也同样取120，这样当中的那个就重叠了。无法明白的是，为什么当中那个的颜色没被覆 ...

不一定是取值的问题，drop-shadow投射出去的阴影的阴影是事实存在着的，取值巧妙只是将其覆盖起来而已。其他的看前面的回复。

樵歌

马黑黑 发表于 2023-3-22 12:10
没有代码基础是看不懂的

嗯嗯嗯

马黑黑

樵歌 发表于 2023-3-22 19:40
嗯嗯嗯

看不懂没关系

小辣椒

这个我一下子看不懂。。。。

马黑黑

小辣椒 发表于 2023-3-22 20:42
这个我一下子看不懂。。。。

我以为你一下子能看懂

红影

马黑黑 发表于 2023-3-22 12:13
滤镜阴影都会将元素及其先前的阴影投射出去，且，滤镜阴影的层级低于CSS阴影，所以，滤镜阴影不能覆盖CSS ...

原来还有这样的说道啊，阴影还有级别的呢。嗯嗯，学习了

红影

马黑黑 发表于 2023-3-22 12:13
这就是前面帖子使用的雕虫小技

嗯，然怪不能点击的阴影能够被捕捉到。

红影

马黑黑 发表于 2023-3-22 12:15
可以的。但你要弄清楚：不论使用何种阴影，滤镜的drop-shadow阴影都会将先前已有的阴影也做一份投射。

...

如果要得到三分结果，看样子只能用两种不同级别的阴影呢