css3 border-image属性初探

公司项目需求给不同的板块加边框预想有两种解决方案一种是给一个背景图中间透明，边框为想要添加的边框样式，另一种就是css3的新属性border-image，虽然最后因为兼容性的原因选用了第一种解决方案，还是决定好好学习一下border-image的用法。

border-image简介

简而言之border-image就是给边框添加背景图片的css属性，这一点上来说与background-image的作用是相同的，但是由于border的特殊性其又拥有其他属性来配合以达到我们期望的效果。

主要使用的属性

• border-image-source:url()指定背景图片
• border-image-width:number指定边框宽度
• border-image-slice:number指定图片的切割大小
• border-image-repeat:string[repeat|round|stretch]指定边框背景的重复方式

具体用法介绍

• border-image-source就不用介绍了和backgroung-image用法一样
• border-image-width这个属性其实就是border-width可以相互替换
• border-image-slice属性相对来说复杂一点其实也很简单，主要是用来对引入的背景图片进行分割，最少设定一个，最多设定四个分别代表依次对图片进行上、右、下、左的指定数值或比例的切割。
• border-image-repeat主要用来指定排列方式，其中stretch是拉伸，repeat是重复，round是平铺