Question

<!DOCTYPE HTML>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>opera border radius</title>

    <style type="text/css">
        img{
            border-radius:10px; 
            -o-border-radius:10px;
        }
    </style>

</head>

<body>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Bonsai_IMG_6426.jpg/450px-Bonsai_IMG_6426.jpg" width="337" height="450" alt="my think">
</body>

Answer 1

Opera不喜欢直接为图像添加border-radius - Opera就像这样顽固。

对于适用于Opera的解决方案，请查看http://www.komodomedia.com/blog/2010/10/border-radius-rounded-images-and-avatars/

另外，在以供应商为前缀的规则border-radius之后放置真正的CSS规则-o-border-radius 。

Answer 2

查看http://dev.opera.com/articles/view/css3-border-background-boxshadow/#border-radius

边境半径在歌剧中有问题，因为很长一段时间。在最新版本中，如果支持可以直接使用border-radius属性。

正式地说，所有Opera版本都支持边界半径属性＆gt; 10.5，但不是Opera Mini和Opera Mobile＆lt; 11，但似乎给出了问题。

（另外，在css3下标记此问题）

[修改] 我刚刚检查了你的代码。您想要将border-radius应用于图像。这在Opera中是不可能的，除非你把它作为背景图像使用css而不是前景图像。

为了完成这项工作，请创建一个div并将圆角应用于div而不是img。然后将背景图像设置为图像，你应该得到圆角。如果图像没有居中，只需更改位置属性。这应该可以解决问题。

在这里，试试这个：http://jsfiddle.net/c8nmZ/5/

border-radius on only image不支持opera

2 个答案: