如何为CSS文本添加居中渐变阴影？尝试text-shadow/box-shadow未果

要实现文本的居中渐变阴影，text-shadow本身不支持渐变属性，但可以通过多层阴影叠加模拟出渐变效果，这是最轻量化的实现方式，无需复杂伪元素或额外DOM嵌套。

针对你提供的菜单代码，只需修改.active a的样式，添加多层text-shadow即可：

#menu .active a {
  background: #2651a8;
  border-radius: 6px;
  color: rgba(255, 255, 255, 1);
  /* 模拟中心浓、向外淡的渐变阴影 */
  text-shadow: 
    0 0 1px rgba(0, 0, 0, 0.9),
    0 0 3px rgba(0, 0, 0, 0.7),
    0 0 5px rgba(0, 0, 0, 0.5),
    0 0 7px rgba(0, 0, 0, 0.3),
    0 0 9px rgba(0, 0, 0, 0.1);
}

原理说明 #

通过设置多层模糊半径递增、透明度递减的阴影，让文字中心区域的阴影更浓重，向外逐渐变淡，视觉上形成“居中渐变”的效果。你可以根据需求调整阴影的模糊半径（第三个值）和透明度（rgba第四个值），精准匹配预期效果。

如果需要横向的居中渐变阴影（文字中间阴影深、左右两端浅），可以调整阴影的水平偏移量：

text-shadow:
  -4px 0 1px rgba(0,0,0,0.1),
  -2px 0 3px rgba(0,0,0,0.3),
  0 0 5px rgba(0,0,0,0.5),
  2px 0 3px rgba(0,0,0,0.3),
  4px 0 1px rgba(0,0,0,0.1);

完整代码 #

修改后的CSS：

#menu {
  position: absolute;
  top: 4.5em;
  right: 0;
}

#menu ul {
  display: inline-block;
}

#menu li {
  display: block;
  float: left;
  text-align: center;
}

#menu li:hover a,
#menu li.active a,
#menu li.active span {}

#menu li a,
#menu li span {
  padding: 1em 1.5em;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.8em;
  color: black;
}

#menu .active a {
  background: #2651a8;
  border-radius: 6px;
  color: rgba(255, 255, 255, 1);
  /* 新增居中渐变阴影 */
  text-shadow: 
    0 0 1px rgba(0, 0, 0, 0.9),
    0 0 3px rgba(0, 0, 0, 0.7),
    0 0 5px rgba(0, 0, 0, 0.5),
    0 0 7px rgba(0, 0, 0, 0.3),
    0 0 9px rgba(0, 0, 0, 0.1);
}

#menu .icon {}

HTML保持不变：

<div id="menu">
  <ul>
    <li class="active"><a href="#" accesskey="1" title="">Homepage</a></li>
    <li><a href="#" accesskey="2" title="">FIRST</a></li>
    <li><a href="#" accesskey="3" title="">SECOND</a></li>
    <li><a href="#" accesskey="4" title="">THIRD</a></li>
    <li><a href="#" accesskey="5" title="">FOURTH</a></li>
  </ul>
</div>

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