为什么透明边框会破坏我的渐变背景，如何修复它？

边框溢出渐变背景

向具有线性渐变背景的元素添加透明边框时，可能会出现意想不到的效果。左侧和右侧可能会呈现不正确的颜色和平坦的外观。

原因

渐变延伸到 padding-box 的边缘，同时绘制边框该区域之外。这种差异会产生不良的视觉效果。

解决方案

要纠正此问题，请考虑使用 box-shadow:inset 而不是 border。 box-shadow:inset 在 padding-box 内渲染，模仿边框效果而不影响背景外观。

修订的 CSS：

box-shadow: inset 0 0 0 10px rgba(0,0,0,0.2);
padding: 10px;

注意：由于box-shadow不占空间，所以调整padding

插图：

[padding-box 和 border-box 插图的图像这里]

演示：

http://jsfiddle.net/ilpo/fzndodgx/5/

以上是为什么透明边框会破坏我的渐变背景，如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！