為什麼邊框半徑不適用於 Chrome 中的圖像？

CSS 邊框半徑未應用於Webkit 中的圖像

使用Chrome 但不使用其他瀏覽器將border-radius 應用於#screen元素時遇到問題？此問題可能是由於 Chrome 處理影像修剪的缺陷造成的。

#screen 元素使用 CSS 設定帶有邊框半徑的圓角背景圖片：

#screen {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

但是，在Chrome，圖片似乎不受 border-radius 屬性的影響。

解決方法

要解決此錯誤，可以使用解決方法：

.element-that-holds-pictures {
    perspective: 1px;
}

將透視應用於包含圖像的父元素會強制Chrome 正確套用邊框半徑，而不會扭曲影像品質。與其他替代方案（例如 opacity:0.99）不同，此解決方法不會影響顯示。

以上是為什麼邊框半徑不適用於 Chrome 中的圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！