css - 隐藏在歌剧中的溢出

Question

溢出隐藏不适用于 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/

Answer 1

基于 Presto 的 Opera 在其父级应用了 border-radius 时存在裁剪图像的长期问题。

根据您的具体情况，有两种可能的解决方案，但都不适合您。

您可以使用 background-image 而不是 img 元素来应用图像。这在 Opera 中按预期工作。

另一种解决方案是将 border-radius 应用于 img 元素而不是 div。这也将解决裁剪问题，但如果您出于其他原因需要包装元素，则不会起作用。我在这个快速 demo update 中切换了选择器以应用于 img只是为了显示剪辑工作。

顺便说一句，你还应该把无前缀的 box-shadow 移到有前缀的版本之后，这样无前缀的版本就是适用于同时支持有前缀和无前缀的浏览器的版本。最好尽可能使用最新的实现。