如何讓我的沿曲線圖像的邊界？

我做了一個JS小提琴，其中我嵌入了一個圓角的圖像。如何讓我的沿曲線圖像的邊界？

這裏是img標籤的CSS。

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

如何使圖像的邊界跟隨圓角的曲線？現在，圖像本身仍然有尖銳的角落。

來源

2012-07-15 dangerChihuahua007

這裏，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>

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-15 07:40:35 abhshkdz

要管理邊界半徑在內部和外部生效，您應該給邊界半徑的值大於邊界大小。

這將解決這個問題。

嘗試：

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

它會奏效。

來源

2012-07-15 07:13:24

謝謝，但怎麼來的，這是不工作？ http://jsfiddle.net/JDRSc/1/ – dangerChihuahua007 2012-07-15 07:30:10

好了，我找不到有關還沒有任何文件或引用..但它是一個數學問題。當半徑爲20時，半徑的中心將爲20px。這意味着該中心不會被四捨五入。這裏有些東西可能會解釋一些：http://www.w3.org/TR/css3-background/#the-border-radius – 2012-07-15 07:36:06

這不行！ – abhshkdz 2012-07-15 07:39:42

如何讓我的沿曲線圖像的邊界？

回答

相關問題