CSS3边界图片
随着CSS3 border-image属性，你可以设置图像用作元素周围的边框。
浏览器支持
在表中的数字规定，完全支持该属性的第一个浏览器版本。
其次通过数字-webkit-, -moz- ，或-o-指定用一个前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
CSS3 border-image属性
CSS3的border-image属性允许您指定要用来代替元素周围正常边框的图像。
该物业有三个部分：
- 该图像的边框
- 凡切片图像
- 限定的中间部分是否应该重复或拉伸
我们将使用下面的图像（称为“/css/border.png”）：
在border-image属性采用图像并将其薄片，放入九个部分，就像一个井字棋板。 然后，它会将角落的角落，中间部分被重复或您指定的捉襟见肘。
注意：对于border-image工作，元素也需要border属性集！
这里，反复进行图像的中间部分，以创建边界：
一个图片作为边框！
下面是代码：
例
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
试一试» 这里，图像的中间段被拉伸以创建边界：
一个图片作为边框！
下面是代码：
例
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 stretch; /* Opera 11-12.1 */
border-image: url(border.png)
30 stretch;
}
试一试»  | 提示： border-image属性实际上是A速记属性border-image-source ， border-image-slice ， border-image-width ， border-image-outset和border-image-repeat属性。 |
|---|
CSS3边框图像 - 不同的价值观片
不同切片值完全改变了边框的外观：
实施例1：
border-image: url(border.png) 50圆;
实施例2：
border-image: url(border.png) 20％的轮;
实施例3：
border-image: url(border.png) 30％的轮;
下面是代码：
例
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
border-image: url(border.png)
30% round;
} 试一试» 自测练习用！
CSS3边框属性
| 属性 | 描述 |
|---|---|
| border-image | 简写属性设置所有border-image-*性质 |
| border-image-source | 指定要用作边界的路径图像 |
| border-image-slice | 指定如何切片图像边界 |
| border-image-width | 指定边界图像的宽度 |
| border-image-outset | 指定由该边界图像区域延伸超出边界框的量 |
| border-image-repeat | 指定边界图像是否应当被重复，圆形或拉伸 |