我们知道，border-image这个属性使用的初衷就是将复杂的工作简单化，当你熟练掌握这个属性后你会发现你极大的节省了编码的时间和效率。接下来教大家如何使用border-image。
元素边框不规则的情况。这时候，就需要用设计图作为边框背景，border-image与background-image相比，好处是更具灵活性，可以用代码控制边框背景的拉伸和重复，因而能够创造出更多样的效果
按钮宽高不确定的情况。用border-image来制作按钮，可以用同一张背景图，制造出各种宽高的按钮。
border-image属性分析
边框背景图片。格式为：url(“…”)。
立即学习“前端免费学习笔记（深入）”；
border-image-slice
图片边框向内偏移的距离。格式：border-image-slice：top right bottom left。分别指切割背景图片的四条线距离上右下左的距离。
该距离接受数值，百分数。默认数值的单位是px,但是不能在数值后面加px，否则这句css将不被浏览器解析。 用法和margin，padding类似。这里以数值举例，百分数同理。
border-image-slice: 10; /*距离上下左右均为10px;*/
border-image-slice: 10 30; /*距离上下10px,左右30px;*/
border-image-slice: 10 30 20; /*距离上10px,下20px,左右30px;*/
border-image-slice: 10 30 20 40; /*距离上10px,右30px,下20px,左40px;*/
《PHP设计模式》首先介绍了设计模式，讲述了设计模式的使用及重要性，并且详细说明了应用设计模式的场合。接下来，本书通过代码示例介绍了许多设计模式。最后，本书通过全面深入的案例分析说明了如何使用设计模式来计划新的应用程序，如何采用PHP语言编写这些模式，以及如何使用书中介绍的设计模式修正和重构已有的代码块。作者采用专业的、便于使用的格式来介绍相关的概念，自学成才的编程人员与经过更多正规培训的编程人员
四条线将背景图分割成了9个部分，其中1,2,3,4,6,7,8,9这八个区域将会被切割，作为图片边框，如果除了设置数值或者百分数，还加了一个“fill”，那么区域5就会作为背景填充进元素content，如：
border-image-slice: 25 11 fill;
注意：slice不接受负值；如果slice切割的左右距离之和大于背景图的宽，则上下边框不显示。如果slice切割的上下距离之和大于背景图的高，则左右边框不显示。
border-image-width
图片边框的宽度。只接受数值，且不能加单位。
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
