為什麼透明邊框會破壞我的漸層背景，如何修復它？

邊框溢位漸層背景

當具有線性漸層背景的元素加上透明邊框時，可能會出現意想不到的效果。左側和右側可能會呈現不正確的顏色和平坦的外觀。

原因

漸變延伸到 padding-box 的邊緣，同時繪製邊框該區域之外。這種差異會產生不良的視覺效果。

解決方案

要修正此問題，請考慮使用 box-shadow:inset 而不是 border。 box-shadow:inset 在 padding-box 內渲染，模仿邊框效果而不影響背景外觀。

修訂的CSS：

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

注意：由於box-shadow不佔空間，所以調整padding

插圖：[padding-box和 border-box 插圖的圖片這裡]示範：http://jsfiddle.net/ilpo/fzndodgx/5/

以上是為什麼透明邊框會破壞我的漸層背景，如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！