2

我制作了一个 JS Fiddle,在其中嵌入了一个圆角的图像。

http://jsfiddle.net/JDRSc/

这是 img 标签的 CSS。

img {
  -webkit-border-radius: 20px;
  border: 20px solid #000;
  border-radius: 20px;
}​

如何使图像的边框跟随圆角的曲线?现在,图像本身仍然有尖角。

4

2 回答 2

2

在这里,http://jsfiddle.net/JDRSc/7/

HTML

<div id="wrapper">
    <img src="http://kittens-for-sale.net/wp-content/uploads/2011/11/kittens-for-sale-5.jpg" alt="" />
</div>

​<strong>CSS

#wrapper {
    display:inline-block;
    border: 10px solid black;
    -moz-border-radius: 30px; /*Sum of #wrapper border + img border-radius*/
    -webkit-border-radius: 30px; /*Sum of #wrapper border + img border-radius*/
    border-radius: 30px; /*Sum of #wrapper border + img border-radius*/
}    

img {
    display: block;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}​
于 2012-07-15T07:40:35.880 回答
0

要管理边界半径以使其在内部和外部生效,您应该将边界半径的值设置为大于边界大小。

这将解决它。

尝试:

border-size:10px;
border-radius:15px;

它会起作用的。

于 2012-07-15T07:13:24.493 回答