嘿，我来帮你搞定这个box-shadow的小问题～

你之前写的代码box-shadow: 4px 4px 4px 4px 5px grey没生效，核心问题是语法参数数量不对，而且你其实误解了“模糊度”的设置——它是有专门参数的哦！

box-shadow的正确语法 #

标准的box-shadow语法（外阴影）是这样的：

box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩散半径] [颜色];

如果要做内阴影，就在最前面加inset：

box-shadow: inset [水平偏移] [垂直偏移] [模糊半径] [扩散半径] [颜色];

我给你拆解每个参数的作用，重点说你关心的模糊度：

• 水平偏移：正数阴影向右移，负数向左移
• 垂直偏移：正数阴影向下移，负数向上移
• 模糊半径：这就是你要的「模糊度」！值越大阴影越柔和模糊，默认是0（硬边阴影）
• 扩散半径：正数让阴影范围扩大，负数缩小，默认是0
• 颜色：阴影的颜色，可选，默认和元素文字颜色一致

你之前写了5个长度值，超出了语法允许的数量（最多4个长度参数），所以浏览器直接忽略了这个无效的样式。

怎么实现四边均匀的box-shadow #

如果想让元素四个边都有阴影，只需要把水平和垂直偏移设为0，然后调整模糊半径和扩散半径就行：

• 想要柔和的四边阴影：

box-shadow: 0 0 8px 2px grey;

（模糊半径8px，扩散半径2px，四个边都会有自然的模糊阴影）

• 想要清晰的“边框式”阴影：

box-shadow: 0 0 0 3px rgba(128,128,128,0.6);

（模糊半径0，扩散半径3px，阴影是清晰的灰色边框，还加了透明度）

额外小技巧 #

如果想给四边加不同的阴影效果，也可以用逗号分隔多个box-shadow规则，比如：

box-shadow: 
  0 3px 5px rgba(0,0,0,0.2),  /* 下边阴影 */
  0 -3px 5px rgba(0,0,0,0.2), /* 上边阴影 */
  3px 0 5px rgba(0,0,0,0.2),  /* 右边阴影 */
  -3px 0 5px rgba(0,0,0,0.2); /* 左边阴影 */

这样就能灵活控制每个边的阴影啦～

内容的提问来源于stack exchange，提问作者MehranJ