首先,浏览器兼容性已经设置过了
.border-image-round{/*round图型边框*/
border-image: url("./images/border.png")27 round;
-moz-border-image: url("./images/border.png")27 round;
-webkit-border-image: url("./images/border.png")27 round;
-o-border-image: url("./images/border.png")27 round;
}
尝试在浏览器里运行下,结果如下:
chrome:![这里写图片描述](https://img-blog.csdn.net/20160418162528537)
firefox:![这里写图片描述](https://img-blog.csdn.net/20160418162638758)
加上边框属性:
.border-width{
border: 3px solid;
}
好了,再来看看:
firefox:![这里写图片描述](https://img-blog.csdn.net/20160418162850277)
表现良好!
ok,其实主要是solid这个属性,对于火狐浏览器来说一定要加上。不然border-image是不显示的。
虽然border-image属性用的少,但是碰到了,记录下。