醉美水芙蓉 发表于 2026-8-2 14:44:16

马黑黑《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">
&lt;style&gt;
    .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); }
    }
&lt;/style&gt;

&lt;div class="pa"&gt;&lt;/div&gt;
    </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>

klxf 发表于 2026-8-3 22:51:46

实用的教程，谢谢分享
页: [1]
查看完整版本: 马黑黑《clip-path剪裁的元素如何投射阴影》