使用 CSS 对图像进行圆角处理答案

【问题标题】：Rounded corners on images with CSS使用 CSS 对图像进行圆角处理
【发布时间】：2012-08-11 05:12:01
【问题描述】：

在这个论坛和其他人中进行了一些调查，但我无法完全弄清楚我遇到的问题是什么......

我在一个滑块中的一个类上设置了一个边框半径，它以圆角开始，但是随着下一张幻灯片通过每个图像，它们恢复为非圆角。

有问题的网站在这里：http://goo.gl/8i8g2

促销图片部分是我遇到问题的部分..

修复链接

【问题讨论】：

您的链接对我无效。
它没有坏，他们不让我输入 IP 地址，所以我写了两个而不是 2
您在哪个浏览器中测试？我在 Firefox 14 的滑块中看到每个图像的圆角...
工作正常在 IE9 中（哇！），只有第一个图像在 Chrome（Win7）中具有圆角。

标签： css rounded-corners

【解决方案1】：

我认为你需要补充：

.nivo-slice
{
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    border-radius:15px;
}

到您的 CSS 文件。

编辑：

正如 Edward Ruchevits 在下面指出的，您可能还想补充：

-khtml-border-radius:15px;
-o-border-radius:15px;

支持其他浏览器。

这在 >IE9 中应该可以正常工作。您可能还想将<meta http-equiv="X-UA-Compatible" content="IE=edge"> 添加到您的标题中。

【讨论】：

成功了！猜它在IE里行不通，但我并没有太在意
它应该可以在 IE9 中运行。将此添加到您的标题中：<meta http-equiv="X-UA-Compatible" content="IE=edge"> :)
已检查 ie8 尚未检查 ie9

【解决方案2】：

顺便说一句，snuffn的回答并不完整，还有两个选择：老IE和Linux用户。

.nivo-slice
{
    behavior: url("border-radius.htc");

       -moz-border-radius: 15px; /* Firefox */
    -webkit-border-radius: 15px; /* Safari and Chrome */
     -khtml-border-radius: 15px; /* Linux browsers */
            border-radius: 15px; /* Opera 10.50, IE and CSS3 */
}

要使用behavior，您需要从Google Code 下载相应的文件。

【讨论】：

@Kevin IE6、IE7、IE8需要，不支持border-radius选项。您在这些浏览器中显示圆角时遇到问题？
我知道它不支持边界半径 - 我认为这就是行为的目的？
@Kevin 是的。所以，我不明白你是如何意识到它不起作用的？
我认为当我添加该行为时它不起作用，然后使用其中一个旧浏览器对其进行测试...也许我很困惑 - 该行为为旧版本添加了圆角，即正确?添加了行为，检查了 ie8，没有骰子。
@Kevin Hm，这很有趣。等我弄明白了再回答。