如何为贝塞尔曲线自定义ViewGroup底部添加平行阴影？

嘿，这个需求我刚好折腾过类似的，给你分享几个靠谱的实现方法，都能做出和贝塞尔曲线完美平行的自然阴影：

这是最直接的思路——把你已经做好的底部贝塞尔曲线完整复制一份，沿着阴影需要偏移的方向（一般是垂直向下）移动一段距离，把这条偏移后的路径填充成半透明灰色，再给它加个模糊滤镜，最后把原矩形放在阴影上方就行。

• 如果你用CSS实现：可以用clip-path定义原矩形的底部曲线形状，然后用::after伪元素复制同样的clip-path，通过transform设置偏移量，再加上模糊滤镜。注意要给原元素设position: relative，伪元素设为绝对定位并放在底层。
  示例代码：

  .curved-box {
    position: relative;
    width: 300px;
    height: 200px;
    background: #fff;
    /* 这里的clip-path对应你的贝塞尔曲线形状，可根据需求调整 */
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  }
  .curved-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    clip-path: inherit; /* 直接继承原元素的clip-path */
    transform: translateY(8px); /* 阴影向下偏移8px */
    filter: blur(6px); /* 模糊程度按需调整 */
    z-index: -1; /* 把阴影放在原元素下面 */
  }
  

• 如果你用Canvas绘制：先绘制原矩形+贝塞尔曲线的路径并填充，然后保存画布状态，平移路径（比如context.translate(0, 8)），填充灰色后添加模糊滤镜，最后恢复状态绘制原图形覆盖阴影即可。

SVG的<filter>可以创建完全贴合路径的自定义阴影，不会出现边缘变形的问题，而且缩放后依然清晰，特别适合响应式的矢量场景。

步骤很简单：

1. 先定义一个<filter>，用<feOffset>设置阴影偏移，<feGaussianBlur>添加模糊，<feFlood>定义阴影颜色，最后用<feMerge>把阴影和原图形合并。
2. 在你的带贝塞尔曲线的SVG路径上应用这个滤镜。

示例代码：

<svg width="300" height="220">
  <defs>
    <filter id="curvedShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feOffset dx="0" dy="8" /> <!-- 阴影向下偏移8px -->
      <feGaussianBlur stdDeviation="6" result="blur" /> <!-- 模糊半径6px -->
      <feFlood flood-color="rgba(0, 0, 0, 0.2)" /> <!-- 阴影颜色 -->
      <feComposite in2="blur" operator="in" />
      <feMerge>
        <feMergeNode /> <!-- 阴影层 -->
        <feMergeNode in="SourceGraphic" /> <!-- 原图形层 -->
      </feMerge>
    </filter>
  </defs>
  <!-- 这里的d属性是你的贝塞尔曲线路径，可自行调整 -->
  <path d="M0,0 L300,0 L300,170 Q150,200 0,170 Z" fill="#fff" filter="url(#curvedShadow)" />
</svg>

如果你的贝塞尔曲线形状特别复杂，或者需要更精细的阴影分段控制，可以把阴影拆成两部分：矩形底部的直线阴影+曲线部分的阴影，分别绘制后叠加，最后用原图形覆盖。不过这个方法不如前两种简洁，只推荐在特殊场景下使用。

内容的提问来源于stack exchange，提问作者M.T.Joe