如何使用border-radius属性和border-image来实现边角曲线

Question

我试图在框架内弯曲图像的角落，但我无法做到。我使用基本的border-image属性和border-radius属性来弯曲角落。我不知道我做错了什么。请检查语法:

<img src="http://blog.queensland.com/files/2013/08/Damien-Leze_WIDE_ANGLE_1.jpg"   class="frame">

和CSS代码是:

img.frame{
border-image: url('http://thumbs.dreamstime.com/x/het-ionen-frame-van-het-water- 55454.jpg') 80 80 82 84 repeat repeat;
border-width: 60px;
height: 300px; width: 500px; 
}

Answer 1

您需要将overflow:hidden设置为您的框架。并将border-radius添加到图像中。这就是

Answer 2

定位在div内的img。例如

<div class="container">
     <img src="imageurl.jpg" />
</div>

你可以用

使图片的角圆角

.container img{
border-radius:5px;
}

小提琴