clip-path剪裁的元素如何投射阴影
<style>.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox mark { padding: 2px 6px; background: #ccc; }
.artBox p { margin: 10px 0; }
</style>
<div class="artBox">
<p>使用 <mark>clip-path</mark> CSS属性剪裁的元素，<mark>box-shadow</mark> 或 <mark>filter: drop-shadow()</mark> 创建的元素<b>外阴影</b>均被裁剪掉。原因是 clip-path 属性只显示裁剪路径、形状等内部的区域，其外区域被彻底舍弃，以此方式将矩形元素改造为所需的任意形状。</p>
<p>实际应用场景可能希望被 clip-path 裁剪的元素也能具备阴影功能，这需要另辟蹊径。最常见的方法是：保留元素的自然状态，裁剪其伪元素或子元素；主元素使用 filter 属性的 drop-shadow() 滤镜函数投射阴影而不是使用 box-shadow 属性实现，因为后者投射的阴影将会是主元素的矩形轮廓而非伪或子元素的裁剪形状。</p>
<p>以下例子简单展示上述命题，主元素投射两个阴影：近阴影用于立体化伪元素的形状，远阴影则模拟光照所产生的物体投射在地上的影子——</p>
<div class="hEdiv" data-prev="1"><pre class="hEpre">
<style>
.pa {
width: 200px;
height: 100px;
/* 双阴影 ：立体化 + 影子 */
filter: drop-shadow(2px 2px 4px black) drop-shadow(5vw 30vh 10px gray);
margin: 50px auto 0;
position: relative;
}
.pa::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: linear-gradient(lightseagreen, green, lightseagreen);
/* 多边形裁剪 */
clip-path: polygon(0 50%,100% 0, 80% 50%, 100% 100%, 0 50%);
transform-origin: 0 50%; /* 变换原点设在尖角处 */
animation: swing 1.5s infinite alternate;
}
@keyframes swing {
from { transform: rotate(-5deg); }
to { transform: rotate(5deg); }
}
</style>
<div class="pa"></div>
</pre></div>
</div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
const divs = document.querySelectorAll('.hEdiv');
const pres = document.querySelectorAll('.hEpre');
divs.forEach((div,idx) => hl.hl(div, pres));
</script> 巧妙的构思，奇妙的效果，谢谢马老师创新探索精彩示范{:4_190:} 很难想象用代码就能实现这种投影的效果。黑黑老师厉害！{:4_187:} 用 box-shadow去试了一下，果然是修饰矩形的。
黑黑的帖子讲述很清晰{:4_187:} 红影 发表于 2026-8-2 17:25
用 box-shadow去试了一下，果然是修饰矩形的。
黑黑的帖子讲述很清晰
这个阴影，过去一直用，就是可能没有专门讲解过 梦江南 发表于 2026-8-2 14:28
很难想象用代码就能实现这种投影的效果。黑黑老师厉害！
这个是简单的 杨帆 发表于 2026-8-2 14:07
巧妙的构思，奇妙的效果，谢谢马老师创新探索精彩示范
这个在过去的帖子中用到过 马黑黑 发表于 2026-8-2 21:22
这个在过去的帖子中用到过
是，有您的专门讲解，理解就更透彻了{:4_190:} 杨帆 发表于 2026-8-2 22:01
是，有您的专门讲解，理解就更透彻了
理论上这个是容易理解的
页:
[1]