如何为导航栏实现底部发光的box-shadow效果？

我对box-shadow的各项属性不太熟悉，希望了解如何为导航栏实现如图所示的底部发光效果。

当前我的导航栏效果及使用的SCSS代码如下：

.navbar {
  border: 1px solid black;
  border-bottom: 1px solid #b7bdbd;
  grid-column: 1 / -1;
  grid-row: 1;
  background: #262727;
  background: -moz-linear-gradient(left, #262727 0%, #505050 50%, #262727 100%);
  background: -webkit-linear-gradient(
    left,
    #262727 0%,
    #505050 50%,
    #262727 100%
  );
  background: linear-gradient(to right, #262727 0%, #505050 50%, #262727 100%);
  box-shadow: 0 4px 2px -2px rgb(169, 169, 169);
}

先明确box-shadow的完整语法：

box-shadow: 水平偏移量 垂直偏移量 模糊半径 扩散半径 颜色 内阴影/外阴影;

各属性作用：

• 水平偏移量：阴影在X轴的位置，正数值向右，负向左
• 垂直偏移量：阴影在Y轴的位置，正数值向下，负向上
• 模糊半径：控制阴影的模糊程度，值越大越模糊，0为硬边
• 扩散半径：控制阴影的大小，正数值阴影扩大，负缩小
• 颜色：阴影的颜色，支持rgba带透明度的颜色
• 内阴影/外阴影：inset关键字表示内阴影，默认外阴影

你当前的box-shadow用了负的扩散半径，会让阴影收缩，达不到发光效果。要实现底部发光，调整参数如下：

调整后的SCSS代码 #

.navbar {
  border: 1px solid black;
  border-bottom: 1px solid #b7bdbd;
  grid-column: 1 / -1;
  grid-row: 1;
  background: #262727;
  background: -moz-linear-gradient(left, #262727 0%, #505050 50%, #262727 100%);
  background: -webkit-linear-gradient(
    left,
    #262727 0%,
    #505050 50%,
    #262727 100%
  );
  background: linear-gradient(to right, #262727 0%, #505050 50%, #262727 100%);
  // 底部发光效果：垂直偏移向下，模糊半径增大，扩散半径适当正值，用半透明浅色
  box-shadow: 0 2px 12px 2px rgba(183, 189, 189, 0.6);
}

参数说明 #

• 0：水平无偏移，阴影居中在底部
• 2px：垂直向下偏移2px，贴合导航栏底部
• 12px：较大的模糊半径，营造发光的扩散感
• 2px：轻微的扩散半径，让阴影范围稍大
• rgba(183, 189, 189, 0.6)：用和底部边框接近的颜色，加透明度让发光更自然

如果想要更强烈的发光效果，可以增大模糊半径和扩散半径，或者调整颜色透明度：

// 更强的发光效果
box-shadow: 0 3px 20px 4px rgba(183, 189, 189, 0.8);

另外，若不需要原有底部边框，可去掉border-bottom: 1px solid #b7bdbd;，让阴影完全替代边框视觉效果，发光会更连贯。

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