您是否曾發(fā)現(xiàn)，當在網(wǎng)頁上添加背景圖片時，其外邊緣并不像我們期望的那樣清晰？這可能是因為默認情況下，CSS 會將圖片視為無限延伸的，因此當圖片做為背景時，外邊緣會出現(xiàn)模糊。

幸運的是，可以通過 CSS 屬性

background-clip

來解決這個問題。通過將其值設(shè)置為

padding-box

，CSS 會將背景圖片僅限于內(nèi)邊距框之內(nèi)，去除外邊緣的模糊效果。

.box {
background-image: url("example.jpg");
background-clip: padding-box;
}

除了背景圖片，當在 HTML 文檔中使用標簽插入圖片時，同樣會出現(xiàn)外邊緣模糊的現(xiàn)象。解決方法也很簡單，只需使用 CSS 的屬性

image-rendering

并將其值設(shè)置為

-webkit-optimize-contrast

或

pixelated

即可。

img {
image-rendering: -webkit-optimize-contrast; /* Safari 瀏覽器 */
image-rendering: pixelated; /* 其他瀏覽器 */
}

在設(shè)置圖片外邊緣時，需要注意的是，這些屬性可能并不兼容所有瀏覽器。最好在使用前先測試并確認其兼容性。