为什么透明边框会扭曲渐变背景，如何修复它？

渐变背景上的透明边框变形

将透明边框应用于具有线性渐变背景的元素会产生奇特的视觉效果元素的边缘出现扭曲或“平坦”。出现这种情况是因为渐变超出了 padding-box 进入了 border-box，导致边框干扰了颜色。

效果的原因

问题源于渐变和边框的渲染顺序不同。渐变在填充框内绘制，而边框在填充框外部渲染。结果，边框重叠到渐变上，产生不需要的效果。

解决方案：使用 Box Shadow 代替

要纠正此问题，请考虑使用 box-shadow：插图而不是边框​​。 Box-shadow 在 padding-box 内渲染，类似于渐变，消除了重叠问题。

代码示例

.colors {
    width: 100px;
    height: 50px;
    background: linear-gradient(
        to right,
        #78C5D6,
        #459BA8,
        #79C267,
        #C5D647,
        #F5D63D,
        #F08B33,
        #E868A2,
        #BE61A5
    );
    box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 10px;
}

使用的好处Box Shadow

使用 box-shadow 提供了几个优点：

• 产生与边框相同的视觉效果，且不影响背景渲染。
• Box-shadow不占用物理空间，因此可以相应调整padding .

小提琴示范

参考按照小提琴查看实际效果：http://jsfiddle.net/ilpo/fzndodgx/5/

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