如何用Tailwind CSS实现带圆角的完美盒阴影按钮边框？

你尝试用自定义盒阴影实现按钮边框，但当前代码生成的按钮左右边缘（圆角处）存在轻微内弯，无法完美贴合圆角。你的自定义Tailwind代码如下：

boxShadow: {
  'outline': '3px 3px 0px #777, -3px -3px 0px #777, -3px 3px 0px #777, 3px -3px 0px #777',
}

问题原因 #

你用四个独立方向的偏移阴影模拟边框，这些阴影都是直角矩形。当按钮带有圆角时，四个角落的阴影无法自然衔接，就会出现内弯的缝隙。

解决方法 #

改用**带扩散半径（spread-radius）**的单条盒阴影规则，它会自动贴合元素的圆角轮廓：

boxShadow: {
  'outline': '0 0 0 3px #777',
}

这条规则的含义是：水平/垂直偏移为0，模糊半径为0，扩散半径为3px，颜色#777。生成的阴影会完全贴合按钮的圆角，不会出现内弯问题。

如果需要保留类似原代码的“向外延伸”视觉效果（比如阴影有轻微偏移），可以调整偏移参数，但依然用单条阴影配合扩散半径：

// 示例：轻微偏移的圆角贴合阴影
boxShadow: {
  'outline': '1px 1px 0 3px #777',
}

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