Question

在chrome，firefox等中一切正常，即使在ie（使用饼图），但在歌剧中它根本不起作用。歌剧和唱片之间的联合：http://dl.dropbox.com/u/5011224/opera-chrome.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                background: #1C1C1C;
            }
            div {
                margin: 50px auto;
                width: 200px;
                height: 200px;
            }
            .test {
                background: #fff;
                -webkit-border-radius: 20px;
                -khtml-border-radiust: 20px;
                -moz-border-radius: 20px;
                -o-border-radius: 20px;
                border-radius: 20px;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
        <div><img class="test" src="lena.jpg" width="200" height="200"/></div>
    </body>
</html>

Answer 1

您正在测试哪个版本的Firefox？这是一个主要问题，因为我怀疑你使用的是FF4，因为Firefox 3遇到的问题与你在Opera上报道的一样。

问题是<img>标记中的图像正在元素边框前面呈现。这意味着虽然它正在做圆角，但你没有看到它们，因为图像在它们前面。

如果您同时指定border: solid black 1px;，您将获得更好的视觉线索，了解发生了什么，因为边框将在圆角开始的点处明显消失在图像后面。

没有直接的解决方法，但有一些解决办法：

在<div>周围使用包装<img>元素，并在<div>上放置圆角。
将图片显示为background-image而非前景图片。

希望有所帮助。

Answer 2

看起来有点矫枉过正，但你是否尝试过舍入图像的容器div并将其设置为溢出：隐藏？（我没有Opera，或者我自己测试）

Opera 10.50+中图像的圆角（border-radius）

2 个答案: