CSS 中两种实现阴影的方式

  1. text-shadow 和 box-shadow
  2. filter: drop-shadow

前者的 blur-radius 指的是阴影的最外延半径，后者的 blur-radius 指的是高斯模糊中的标准差($σ)

W3C 的 CSS 标准此处 说到将 stdDeviation 设为 blur-radius 的一半可以得到近似的效果

A non-zero blur radius indicates that the resulting shadow should be blurred, such as by a Gaussian filter. The exact algorithm is not defined; however the resulting shadow must approximate (with each pixel being within 5% of its expected value) the image that would be generated by applying to the shadow a Gaussian blur with a standard deviation equal to half the blur radius

一个实验

相同的数值，在不同浏览器中效果不同。总体来说 drop-shadow 的结果会比 text-shadow/box-shadow 的效果更加发散和柔和。

参考