渐变背景上的透明度：研究奇怪的边框效果
向具有线性渐变背景的元素添加透明边框时，出现异常现象。左右边缘的颜色看起来不正确，就像它们已被交换一样。此外，这些部分呈现出扁平的外观。
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中文网其他相关文章！
