CSS3中的边框图片

使用CSS3 border-image 属性，你可以在元素的周围设置图片边框。

一、什么是边框图片

为了实现丰富多彩的边框效果，在css3中，新增了 border-image 属性，这个新增属性允许指定一副图像作为元素的边框。

边框图片的使用场景

盒子大小不一，但是边框样式相同，此时就需要边框图片来完成，不是背景图片，而是用边框图片来实现。

二、浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。

三、CSS3 `border-image` 属性

CSS3 border-image 属性允许您指定要用来代替元素周围的正常边界的图像。属性有三个部分:

作为边框的图片。
在哪里分割图像。
确定中间部分应重复或延伸。

以下面的图像(叫做 "border.png")为例：

原理分析：

border-image 性将图像分割成九个部分，就像一个井字游戏板。然后将角放在拐角处，中间部分按指定的顺序重复或拉伸。

注意:

让border-image 正常工作, 元素也需要设置边框属性!

边框图片的切图原理

最主要是把四个角切出去，利用井字型来把四个角切出去，一定要保留四个角的完整性，顺序是：上右下左；

边框图片语法规范

border-image-source:用在边框的图片的路径（哪一个图片？）；

border-image-slice:图片边框内向偏移（裁剪的尺寸，一定不加单位，上右下左的顺序）；

border-image-width:图片边框的宽度（需要加单位这里不是边框的宽度而是边框图片的宽度），这个默认属性是border的宽度，但是有区别，这个是边框图片的宽度不会挤压文字；

border-image-repeat:图片边框是否应该平铺（repeat）、铺满（round）或者拉伸（stretch）默认是拉伸。

注意: border-image 属性是border-image-source, border-image-slice, border-image-width, border-image-outset 和 border-image-repeat 的缩写.

组合写法：

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代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边框图片</title><style>ul{margin: 0;padding: 0;list-style: none;}li{width: 350px;height: 160px;border: 20px solid #ccc;margin-top: 20px;}li:nth-child(1){/*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; }li:nth-child(2){/*平铺 从边框的中心向两侧开始平铺 会出现不完整的图片*/                                         border-image: url("images/border.jpg") 167/20px repeat;}li:nth-child(3){/*默认的平铺方式*/border-image: url("images/border.jpg") 167/20px stretch;}</style>
</head>
<body>
<ul><li></li><li></li><li></li>
</ul>
</body>
</html>