使用盒阴影效果改进 CSS 轮廓

我想我们都能同意，浏览器默认的轮廓样式设计并不美观。我也认为我们都能认同，它虽然不够漂亮，但功能却很实用。

有些人会直接移除轮廓线，而不使用任何其他视觉提示来代替。这种做法很不好，会影响键盘用户的体验。

为了满足设计师的要求，同时保持网站的可访问性，让我们移除默认的轮廓样式，并将其替换为如下所示的盒阴影效果。

input:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, .5);
}

我们可以看到，当输入框获得焦点时，我们将轮廓线设置为 0，并添加了 box-shadow 声明来替代其功能。此外，使用 box-shadow 还会遵循 border-radius 声明。因此，如果我们的输入框的圆角半径为 4px，那么我们的模拟轮廓线在边角处就不会出现缝隙。

查看CodePen示例，即可了解其实际效果。