多出一个阴影
本帖最后由 马黑黑 于 2023-3-22 08:11 编辑 <br /><br /><style>#papa {
width: 100px;
height: 100px;
background: red;
box-shadow: 120px 0 0 pink;
filter: drop-shadow(240px 0 0 purple);
}
</style>
<p>阴影可以脱离本体。若此，当重复使用阴影，滤镜阴影会出现比预期多出一个阴影的现象。试参考以下代码：</p><p><br></p><p><style></p><p>#papa {</p><p><span style="white-space:pre"> </span>width: 100px;</p><p><span style="white-space:pre"> </span>height: 100px;</p><p><span style="white-space:pre"> </span>background: red;</p><p><span style="white-space:pre"> </span>/* 阴影一 : box-shadow */</p><p><span style="white-space:pre"> </span>box-shadow: 120px 0 0 pink;</p><p><span style="white-space:pre"> </span>/* 阴影二 : drop-shadow */</p><p><span style="white-space:pre"> </span>filter: drop-shadow(240px 0 0 purple);</p><p>}</p><p></style></p><p><br></p><p><div id="papa"></div></p><p><br></p><p>在这组代码中，我们设计的预期是：宽高 100*100 的矩形拥有两个阴影，其一用CSS box-shadow 属性做成，它排在主体元素右边20px处，其二是滤镜阴影，它紧跟在阴影一右边20px处。但效果却是酱紫：</p><p><br></p><p><br></p>
<div id="papa"></div>
<p><br></p><p>多出了一个紫色阴影。第三个矩形是我们用 filter 设计的滤镜阴影，是我们希望它出现的，但我们的这个设计给了我们一个惊喜：生了一对双胞胎。啥情况？</p><p><br></p><p>drop-shadow 滤镜的投影方式将前面的 box-shadow CSS属性的阴影也投射了一份。drop-shadow 自身如果重叠使用，也会将前一份阴影进行再投射，只要尺寸拉开。</p><p><br></p><p>扩展：如何让阴影具备点击交互能力 → <a href="http://mahei.freeee.ml/art/show.php?st=1&sd=1&art=mahei_1679442372">让阴影具备接收点击交互 (freeee.ml)</a></p> 扩展一文，其滤镜阴影只有一个。不过，它其实也有两个，只不过这两个滤镜阴影重叠在了一起（请研究代码对阴影位置的设计）。
如果有兴趣进一步探究，请参考如下代码并运行它查看效果：
<style>
#papa {
width: 100px;
height: 100px;
background: red;
/* 阴影一 : box-shadow */
box-shadow: 120px 0 0 pink;
/* 阴影二 : drop-shadow */
filter: drop-shadow(140px 0 0 purple);
cursor: pointer;
position: relative;
}
#papa::before, #papa::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
left: 120px;
cursor: inherit;
}
#papa::after {
left: 240px;
}
</style>
<div id="papa"></div>
马黑黑 发表于 2023-3-22 08:17
扩展一文，其滤镜阴影只有一个。不过，它其实也有两个，只不过这两个滤镜阴影重叠在了一起（请研究代码对阴 ...
是因为取值的问题吧，也同样取120，这样当中的那个就重叠了。无法明白的是，为什么当中那个的颜色没被覆盖掉？感觉得到的结果应该是红紫紫，而不是红粉紫？ “如何让阴影具备点击交互能力：可以令伪元素以透明方式将往外投射的阴影包裹起来，将伪元素接收点击交互的能力“借给”阴影。”
学习了{:4_199:} 为什么要用box和滤镜阴影两种阴影，用一种可以么？ 有兴趣，可是弄不懂。 很喜欢，但是懂不起{:4_189:} 樵歌 发表于 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
没有代码基础是看不懂的
嗯嗯嗯{:4_198:} 樵歌 发表于 2023-3-22 19:40
嗯嗯嗯
看不懂没关系 这个我一下子看不懂。。。。{:4_203:} 小辣椒 发表于 2023-3-22 20:42
这个我一下子看不懂。。。。
我以为你一下子能看懂{:4_170:} 马黑黑 发表于 2023-3-22 12:13
滤镜阴影都会将元素及其先前的阴影投射出去，且，滤镜阴影的层级低于CSS阴影，所以，滤镜阴影不能覆盖CSS ...
原来还有这样的说道啊，阴影还有级别的呢。嗯嗯，学习了{:4_187:} 马黑黑 发表于 2023-3-22 12:13
这就是前面帖子使用的雕虫小技
嗯，然怪不能点击的阴影能够被捕捉到。 马黑黑 发表于 2023-3-22 12:15
可以的。但你要弄清楚：不论使用何种阴影，滤镜的drop-shadow阴影都会将先前已有的阴影也做一份投射。
...
如果要得到三分结果，看样子只能用两种不同级别的阴影呢{:4_204:}