CSS3-边框图片

CSS3提供了一个很好的方案，为边框添加图片。不同的图片可以应用于不同的边框，并且可以设置不同的大小和位置。

border-image属性

border-image属性用于设置边框图片。它包含以下几个值：

• source：指定要使用的图片。
• slice：指定如何切割图片以产生边框。它以像素或百分比表示。
• width：指定每个边的边框宽度。
• outset：指定边框超出的距离。
• repeat：指定如何重复图片，包括水平重复、垂直重复和拉伸重复。

以下是一个样例代码：

border-image: url(border.png) 30 repeat;

border-image-source

border-image-source属性用于指定边框图片的URL。以下是一个样例代码：

border-image-source: url(border.png);

border-image-slice

border-image-slice属性用于切割边框图片。以下是一个样例代码：

border-image-slice: 30;

border-image-width

border-image-width属性用于指定边框图片的宽度。以下是一个样例代码：

border-image-width: 30px 10px;

border-image-outset

border-image-outset属性用于指定边框图片的外扩距离。以下是一个样例代码：

border-image-outset: 10px;

border-image-repeat

border-image-repeat属性用于指定边框图片的重复方式。以下是一个样例代码：

border-image-repeat: stretch;

以上就是关于CSS3边框图片的介绍。