为什么线性渐变上的透明边框会导致颜色交换和扁平化？

渐变背景上的透明度：研究奇怪的边框效果

向具有线性渐变背景的元素添加透明边框时，出现异常现象。左右边缘的颜色看起来不正确，就像它们已被交换一样。此外，这些部分呈现出扁平的外观。

HTML 片段：

CSS 配置：

原因效果：

出现此问题是因为渐变的起点和终点位于填充框的边缘。然而，边框是在填充框之外绘制的。由于背景在每一侧的 border-box 上重复出现，因此边框显得很奇怪。

使用 box-shadow 的解决方案：

复制边框的视觉效果如果没有这个问题，请考虑使用 box-shadow：

由于 box-shadow 不占空间，因此必须调整

Padding-Box 和 Border-Box 示意图：

[padding-box 和 border-box 的图像]

现场演示：

探索此 JSFiddle 中更正的行为： http://jsfiddle.net/ilpo/fzndodgx/5/

以上是为什么线性渐变上的透明边框会导致颜色交换和扁平化？的详细内容。更多信息请关注PHP中文网其他相关文章！