CSS边框半径不会裁剪Webkit上的图像

我无法找出为什么使用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;} 

是因为铬不能正确处理图像的“修整”吗? 我认为这只是一个问题,当你有圆angular容器内的实际标签,而不是当通过CSS调用img作为背景图像。

问候G.Campos

这是一个解决方法,将解决当前的铬错误:

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

这完全不会影响显示效果( opacity:0.99解决方法 – 顺便说一句,这也是很好的解决方法)。

Webkit无法处理儿童和孙辈的边界半径裁剪。 只是那么糟糕。 如果你想边界裁剪,它必须直接放在图像所在的div上,而不必深入层次结构。

有一个更简单的解决scheme。

只需将overflow:hidden添加到具有border-radius的容器中并保存子元素即可。 这样可以防止儿童stream过容器。从而解决问题并显示边界半径

它非常有一个边界半径:

在这里输入图像描述

(我刚刚添加了Chrome的开发工具栏的边框。)

边界半径不会将其内容限制在结果区域内 – angular落外部的空间仍可由元素的内容占用。

我的build议是覆盖一个像这样的angular落切出的图像(然后使用地图或任何你感到舒服的东西仍然启用左/右箭头)。

尝试使用border-radius设置元素的子元素的以下CSS: opacity:0.99; 它解决了这个问题,并没有太多的改变不透明度。 这对我来说是完美的。

看起来你需要将边界半径应用于li元素:

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