CSS如何实现按钮box-shadow对半拆分双色且无位置偏移效果？

这个需求完全可以实现，原生box-shadow本身不支持直接拆分颜色，更推荐用伪元素模拟的方案，最终效果和普通阴影质感完全一致，不会出现风格突兀的问题。如果你一定要用双层阴影实现，需要叠加带区域裁剪的属性，复杂度更高且容易出现边缘衔接不自然的问题，伪元素方案是更简单稳定的选择。

实现代码 #

* {
  margin: 0;
  padding: 0;
}
/* 按钮基础样式，和其他普通按钮保持统一 */
.btn {
  margin: 20px;
  padding: 20px;
  display: inline-block;
  width: 200px;
  text-align: center;
  position: relative;
  background: #fff; /* 按钮必须加不透明背景，避免透出下层阴影 */
}
/* 普通按钮阴影，作为对照参考 */
.normal-btn {
  box-shadow: 0 0 30px rgba(0,0,0,0.3);
}
/* 双色阴影实现逻辑 */
.dual-shadow-btn::before {
  content: '';
  position: absolute;
  inset: 0; /* 尺寸、位置和按钮完全对齐 */
  background: linear-gradient(90deg, blue 50%, red 50%); /* 精确对半拆分两种颜色 */
  filter: blur(30px); /* 模糊数值对应普通阴影的扩散半径 */
  z-index: -1; /* 放在按钮底层不遮挡内容 */
}

<!-- 普通按钮，用于对照风格统一性 -->
<div class="btn normal-btn">普通按钮</div>
<!-- 双色阴影自定义按钮 -->
<div class="btn dual-shadow-btn">双色阴影按钮</div>

效果调整说明 #

• 如果需要上下对半拆分阴影，把linear-gradient的角度改为180deg即可
• 如果需要调整阴影模糊程度，同步修改filter: blur()的数值和普通按钮的box-shadow扩散半径，就能保证视觉风格完全统一

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