如何让我的沿曲线图像的边界？

我做了一个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

如何让我的沿曲线图像的边界？

回答

相关问题