如何使用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;
}

Fiddle