2

我正在为我的图像使用边框半径，图像的角没有变圆。

但是同样的代码在 Mozilla Firefox 中运行正常。

CSS：

 body img { 
     border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
    border: 3px solid #ed1d24;
    }

在此处输入图像描述

4

3 回答 3

1

首先设置边框，然后覆盖其半径：

 body img { 
    border: 1px solid #ed1d24;
     border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
    }

[编辑]

实际上，我只能得出结论，它以一种或另一种方式起作用。我自己使用的是 Chrome，这个小提琴中的两个图像都有圆角。

http://jsfiddle.net/aqBA7/

于 2012-12-11T11:08:52.360 回答
1

您的代码中的其他地方一定有错误，border-radius正如 GolezTrol 已经显示的那样，在 Google Chrome 中运行良好，您的 CSS 也是正确的。

尝试打开开发人员工具并检查样式是否正确应用于您的img元素。

于 2012-12-11T11:15:54.900 回答
0

使用包装器div并将 and 应用于border并且仅border-radius应用于内部图像。我将图像上的 减少了与 相同的数量，以便用图像正确填充容器。如果你在两个元素上做同样的事情，你会在角落看到一个微小的间隙，因为.#wrapperborder-radiusborder-radiusborder widthwrapperborder-radiusborder width

HTML： 

<div id="wrapper">
   <img src="http://i.telegraph.co.uk/multimedia/archive/01452/fer1_1452403i.jpg" width="620" height="388" alt="" /> 
</div>

CSS：

#wrapper {
    width: 620px; height: 388px;
    border: 2px solid #ed1d24;
    border-radius: 20px;
}    

#wrapper img { 
    border-radius: 18px; /* wrapper radius minus wrapper border width */
}​

在 Safari 中测试的演示：

http://jsfiddle.net/D7MHh/2/

Safari 中 jsFiddle 的截图：

jsFiddle Safari 中的截图

于 2012-12-12T05:34:59.243 回答