為什麼透明邊框會扭曲漸層背景，如何修復它？

漸變背景上的透明邊框變形

將透明邊框應用於具有線性漸變背景的元素會產生奇特的視覺效果元素的邊緣出現扭曲或“平坦”。出現這種情況是因為漸變超出了 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中文網其他相關文章！