溢出隐藏对Opera不起作用。图像位于圆圈的顶部。知道如何解决这个问题吗？
<div class='circular'> <img src="http://1.bp.blogspot.com/-Yt8Baaeww9k/Uas6HjPMMrI/AAAAAAAACuY/k4Wz0pErtCA/s1600/1opera9.jpg" /> </div>
和CSS：
.circular {
overflow:hidden;
width: 48px;
height: 48px;
border-radius: 550px;
box-shadow: 0 0 10px rgba(0, 0, 10, 2.8);
-webkit-box-shadow: 0 0 10px rgba(0, 10, 0, 2.8);
-moz-box-shadow: 0 0 10px rgba(0, 10, 0, 2.8);
background-color:lightgrey;
}
这是我的jsfiddle：http://jsfiddle.net/LfhH9/
答案 0 :(得分：0)
基于Presto的Opera在其父级已应用border-radius时剪切图像存在长期问题。
有两种可能的解决方案，根据您的具体情况，这些解决方案都不适合您。
您可以使用background-image代替img元素来应用图片。这在Opera中可以正常工作。
另一种解决方案是将border-radius应用于img元素而不是div。这也将解决剪切问题，但如果由于其他原因需要包装元素，则无法解决问题。我在这个快速demo update中切换了选择器以应用img，只是为了显示裁剪工作。
顺便说一下，你还应该在前缀版本之后移动未加前缀的box-shadow，这样前缀版本就是适用于支持前缀和未加前缀的浏览器的版本。最好尽可能使用最新的实施方案。