css 使用图片作为元素边框

先看原始图片

再看效果

边框的四个角灭有拉伸变形,但是图片的中部是拉伸的

代码

border-style: solid;/* 设置边框图像的来源 */border-image-source: url('/static/images/mmwz/index/bk_hd@3x.png');/* 设置如何切割图像 */border-image-slice: 66;/* 设置边框的宽度 */border-image-width: 26px;/* 设置图像如何在边框区域内重复 */border-image-repeat: stretch;

也可以简写为

border-image: url('/static/images/mmwz/index/bk_hd@3x.png') 66/26px stretch;
border-style: solid;

也可以使用border-width调整边框宽度,以布局内容

border-width: 11px;