CSS边框半径没有在Webkit上修剪图像答案

【问题标题】：CSS Border radius not trimming image on WebkitCSS边框半径没有在Webkit上修剪图像
【发布时间】：2012-02-01 01:52:58
【问题描述】：

当我使用 chrome 而不是 firefox 或 ie9 时，我无法弄清楚为什么我的 #screen 元素中没有边框半径？

我有每个浏览器的所有不同前缀加上标准边框半径：

www.cenquizqui.com

包含图片的上部内容框，称为#screen

屏幕css的复制粘贴：

#screen {background: none repeat scroll 0 0 #EEEEEE;
    display: block;
    height: 300px;
    position: relative;
    width: 960px;
    overflow:hidden;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;}

是不是因为 chrome 没有正确处理图像的“修剪”？我认为只有在圆角容器中有实际标签时才会出现问题，而不是通过 css 将 img 称为背景图像。

问候 G.坎波斯

【问题讨论】：

它在 Opera 中也不起作用。

标签： google-chrome webkit css

【解决方案1】：

看来您需要将边框半径应用于 li 元素：

#slides li {
display: block;
float: left;
height: 300px;
width: 960px;
position: relative;
border-radius: 10px;
}

【讨论】：

这会产生非常不吸引人的效果。
对我和你来说是的，只是试图协助追踪 Sotkra 可能希望做出改变的地方。
嗯，是的，我可以将它应用于 li 元素，但是随着幻灯片的传递，幻灯片之间的“角落”不会是无缝的。最终，这里的问题是，为什么这会发生在 chrome 而不是 ff 或 ie9 上？
根据我的阅读，这似乎是 chrome 的错误。 Chris Coyier 使用 JQuery 发布了一个可能修复的链接：css-tricks.com/forums/discussion/comment/45242#Comment_45242
问题是，我里面没有 div 和 img，我有一个带有 css 背景图像的 div。通常为试图在 div 中获取 img 元素的人们提供的解决方案是通过 css 应用背景 img，这就是我正在做的事情，但它仍然无法正常工作。这似乎是 chrome 的一个整体缺陷

【解决方案2】：

它确实有一个边界半径：

（我刚刚在 Chrome 的开发工具栏上添加了一个边框。）

边框半径不会将其内容限制在结果区域内——角外的空间仍然可以被元素的内容占用。

我的建议是覆盖一个像这样切掉角落的图像（然后使用地图或任何你觉得舒服的东西来启用左/右箭头）。

【讨论】：

是的，我知道，但是...这是仅限 chrome 的“东西”，因为 Firefox 似乎可以很好地处理它。地狱，即使是最糟糕的浏览器，ie9，也能很好地处理它。我想知道这是否可以通过某种背景剪辑属性来解决...
我还想知道绝对定位和 z-index 是否破坏了边界半径的剪裁。我都删除了，错误仍然存在。
@Sotkra，不，这也发生在 Safari 和 Opera 中。似乎 Firefox 和 IE 是正确的。你真的应该再看看 IE9/10，因为他们的 Javascript 引擎是迄今为止所有浏览器中最快和响应最快的。 IE 确实清理了很多东西，我现在遇到的许多大错误都是 webkit 问题。
我会的，但我对微软构建的任何东西都表示怀疑 =/

【解决方案3】：

Webkit 无法处理子孙+的边框半径裁剪。就是这么糟糕。如果你想要边框裁剪，它必须直接在放置图像的 div 上，而不是深入到层次结构中。

【讨论】：

找不到有关此错误或缺陷的任何文档 - 如果有人找到，请告诉
stackoverflow.com/questions/5736503/…

【解决方案4】：

对设置了border-radius的元素的子元素尝试以下css： opacity:0.99; 它解决了这个问题，并且不会太大地改变不透明度。这对我来说非常有效。

【讨论】：

【解决方案5】：

这是一个解决当前 chrome 错误的解决方法：

.element-that-holds-pictures {
   perspective: 1px; /* any non-zero value will work */
}

这根本不会影响显示（与 opacity:0.99 解决方法不同 - 顺便说一下，这也是一个很好的解决方法）。

【讨论】：

你先生拯救了我的一天！
这需要成为 Chrome 浏览器的公认答案
太棒了！我使用了opacity:0.99; 解决方法，因为perspective:1px; 虽然会为 Chrome/Opera 修复它，但动画会使 Firefox 的容器元素消失，

【解决方案6】：

有一个更简单的解决方案。

只需将overflow:hidden 添加到具有边框半径并包含子元素的容器中。这可以防止孩子“流”过容器。从而解决问题并显示边界半径

【讨论】：