我制作了一个 JS Fiddle,在其中嵌入了带有圆 Angular 的图像。
这是 img 标签的 CSS。
img {
-webkit-border-radius: 20px;
border: 20px solid #000;
border-radius: 20px;
}
如何使图像的边框遵循圆 Angular 的曲线?现在,图像本身仍然有尖 Angular 。
最佳答案
在这里,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;
}
关于html - 如何沿着曲线制作图像的边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11490000/