CSS边框图片是网页设计中常用的一种效果，它可以让网页看起来更加精致和美观。下面我们来详细介绍CSS边框图片的制作过程。

首先，在CSS中定义边框图片需要用到border-image属性，如下所示：

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

其中，url指定图片的路径，30px是图片的缩放值，round是图片的平铺方式。这样定义的边框将会使用border.png图片作为边框。

接下来，我们来分析一下上面代码的每个参数的含义：

• border-image-source：指定边框图片的url路径。
• border-image-repeat：定义边框图片的平铺方式。有stretch, repeat和round三个值可取。
• border-image-slice：定义边框图片的缩放值。可取百分数或具体数值。
• border-image-width：定义边框图片的宽度。可取百分数或具体数值。
• border-image-outset：定义边框图片的偏移值。可取具体数值。

例如，下面的代码指定了一个左侧边框图片：

left-border {
	border-image-source: url(left.png);
	border-image-repeat: repeat;
	border-image-slice: 30%;
	border-image-width: 30px;
	border-image-outset: 10px;
}

如果想为文本框使用边框图片效果，可以使用下面的代码：

input[type='text'] {
	border: none;
	border-image: url(text-border.png) 30 repeat;
}

使用这种方法，可以让文本框的边框看起来更加漂亮。

总之，CSS边框图片是非常实用的一种效果，可以为网页增色添彩。只要掌握了制作方法，就可以轻松实现边框图片效果。