css3中自适应边框图片运用

css3中自适应边框图片运用：

组合写法：

border-image: url("images/border.jpg") 167/20px round;

拆分写法：

border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
border-image-repeat: round;

解释：

• 边框图片资源地址
• 裁剪尺寸（上 右 下 左）单位默认px，可使用百分百。
• 边框图片的宽度，默认边框的宽度。
• 平铺方式：
  • stretch 拉伸（默认）
  • repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片。
  • round 环绕，是完整的使用切割后的图片进行平铺。

DEMO代码：

切割示例图：
border-image-clice：按照 上右下左顺序切割
以两端最大的部位进行切割