View in EnglishAlways switch to English

<feDropShadow>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.

SVG<feDropShadow> 原语创建输入图像的阴影。它只能在<filter> 元素内使用

备注：可以使用flood-color 和flood-opacity 表现属性来改变阴影的颜色和不透明度。

示例

html,body,svg {  height: 100%;}

html

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">  <defs>    <filter>      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" />    </filter>    <filter>      <feDropShadow dx="0" dy="0" stdDeviation="0.5" flood-color="cyan" />    </filter>    <filter>      <feDropShadow        dx="-0.8"        dy="-0.8"        stdDeviation="0"        flood-color="pink"        flood-opacity="0.5" />    </filter>  </defs>  <circle cx="5" cy="50%" r="4" />  <circle cx="15" cy="50%" r="4" />  <circle cx="25" cy="50%" r="4" /></svg>