边框自定义，border-image助你一臂之力。

最新推荐文章于 2025-04-02 21:20:28 发布

原创最新推荐文章于 2025-04-02 21:20:28 发布 · 362 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何使用CSS的border-image属性创建精美边框效果。通过自定义图像，配合border-image-source、border-image-slice及border-image-repeat参数，实现个性化网页设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家好，这里是笑颜の行方。
本篇描述的是 border-image ，即边框图像。

border-image是个很神奇的属性，
如果自己会设计图片的话，可以做出很精美的效果。

嗯…我用photoshop画了一张简陋的图，由于没有什么艺术细菌，
做出来的效果还请大家别太在意，因为自己画得不太好看。
嗯…效果有点low
这张图的宽高是60x60像素，每个点和彩色块是20x20像素，
以九宫格的形式简单设计了一下。

接下来有请 border-image 上场！
嗯，先这么写看看吧。

div{
  width: 150px;
  height: 75px;
  border: 20px solid #000;
  /* 如果这一行没有定义，设置 border-image 也不会显示效果 */
  border-image-source: url("./borderPic.png");
  border-image-slice: 20;
  border-image-repeat: repeat;
}

我们来解读这一段样式表。
定义块元素宽150像素，高75像素。
添加宽度20像素的直线黑色边框，
如果没有定义，则块元素没有边框，则无法显示由图像组成的边框。
当然，和初始定义的颜色没有关系，border-image会后期改变边框背景色。

关于border-image，由三个参数构成。这三个参数分别是：
border-image-source
指图片源，这里的参数是：url("./borderPic.png");
指本目录中名为borderPic.png的图片（鄙人设计的图）。

border-image-slice
默认是数字（注意，不带px），因为会默认数字为像素单位。
指图片裁剪尺寸，有四个参数，对应左上，右上，右下，左下，四个方向，
整体呈顺时针方向。
也可使用百分比作为单位。
依然是顺时针，只是由边换作角而已
border-image-repeat
指图片的四边重复方式，默认是stretch，即不重复，而是拉伸。
还有两个值是repeat和round。
即重复和填充。

接下来放出上面样式表所生成的效果。
有点辣眼睛。。。
额，这个效果有点……不用在意这些细节。
我们改一下样式，一定会很好看的。

div{
	border-image-repeat: stretch;
}

这回好看多了
怎么样？美不美？看来鄙人还是有点艺术细菌的（笑）。

其实这三个参数也可以简写成：

div{
	border-image: url("./borderPic.png") 20 stretch;
}

一个好看的边框就这么渲染出来了，大家学会了吗？