CSS-不规则投影filter:drop-shadow

先上MDN drop-shadow()

语法

drop-shadow(offset-x offset-y blur-radius spread-radius color)

参数

• offset-x offset-y (required)
  offset-x指定水平距离，其中负值将阴影放置到元素的左侧。offset-y指定垂直距离，其中负值将阴影置于元素之上。如果两个值都为 0，则阴影直接放置在元素后面。
• blur-radius (optional)
  阴影的模糊半径，指定为 <length>。值越大，阴影就越大，也越模糊。如果未指定，则默认为 0，从而产生清晰、不模糊的边缘。不允许有负值。
• spread-radius (optional)
  阴影的扩展半径，指定为 <length>。 正的值会导致阴影扩大和变大，而负的值会导致阴影缩小。如果未指定，则默认为0，阴影的大小将与输入图像相同。

  大多数浏览器不支持这个参数;如果使用，效果将不会呈现。截止2020年10,14日,Chrome v.85.0.4183.121（正式版本）,Microsoft Edge Beta v85.0.564.63(64位), Firefox v.85.0.564.63 暂未支持

• color (optional)
  阴影的颜色，指定为 <color>。如果未指定，则使用 color 属性的值。

示例

• 示例一

  filter: drop-shadow(30px 10px 4px #4444dd);

  
• 示例二

  filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));

  
• 示例三

  filter: drop-shadow(0 0 0.75rem crimson);

  

其他

该属性与box-shadow类似：

box-shadow: 30px 10px 4px #4444dd;

box-shadow: 0 -6mm 4mm rgb(160, 0, 210);

+ 示例三

box-shadow: 0 0 0.75rem crimson;