邊框溢位漸層背景
當具有線性漸層背景的元素加上透明邊框時，可能會出現意想不到的效果。左側和右側可能會呈現不正確的顏色和平坦的外觀。
原因
漸變延伸到 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中文網其他相關文章！
