为什么边框半径不适用于 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中文网其他相关文章！