CSS 使用图片作为4个角边框

 父及元素定位方式position: relative;四个角的图片定位为position: absolute;

 

 方法2

div {
  background-image: 
    url(top-left.png) top left no-repeat, 
    url(to-right.png) top right no-repeat, 
    url(bottom-left.png) bottom left no-repeat, 
    url(bottom-right.png) bottom right no-repeat;
} 





例如：border-image:url(border.png) 30% 40%;

就等同于border-image:url(border.png) 30% 40% stretch stretch;

2个参数的话则第一个参数表水平方向，第二个参数表示垂直方向。

就等同于border-image:url(border.png) 30% 40% round repeat;

表示水平方向round（平铺），垂直方向repeat（重复），至于何为平铺何为重复下面会深入讲解

    



在这里，图片铺满整个边框。


在这里，图片被拉伸以填充该区域。

这是我们使用的图片：


注释： Internet Explorer 不支持 border-image 属性。
border-image 属性规定了用作边框的图片。