為什麼線性漸層上的透明邊框會導致顏色交換和扁平化？

漸變背景上的透明度：研究奇怪的邊框效果

向具有線性漸變背景的元素添加透明邊框時，出現異常現象。左右邊緣的顏色看起來不正確，就像它們已被交換一樣。此外，這些部分呈現出扁平的外觀。

HTML 片段：

<div class="colors"></div>

CSS 設定：

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

原因效果：

出現此問題是因為漸變的起點和終點位於填充框的邊緣。然而，邊框是在填充框之外繪製的。由於背景在每一側的 border-box 上重複出現，因此邊框顯得很奇怪。

使用box-shadow 的解決方案：

複製邊框的視覺效果如果沒有這個問題，請考慮使用box-shadow：

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

由於box-shadow不佔空間，因此必須調整

Padding-Box 和Border-Box 示意圖：

[padding-box 和border-box 的圖片]

[padding-box 和border-box 的圖片][padding-box 和border-box 的圖片]

[padding-box 和border-box 的圖片]

現場示範：探索此JSFiddle中更正的行為： http://jsfiddle.net/ilpo/fzndodgx/5/

以上是為什麼線性漸層上的透明邊框會導致顏色交換和扁平化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！