CSS border-image

CSS border-image 属性允许你使用图像来替代元素周围的传统边框样式。通过这一属性，你可以为网页元素创造独特且富有吸引力的边框效果。以下是如何使用 border-image 属性的详细教程。

一、基本语法

border-image 的基本语法如下：

border-image: source slice width outset repeat;

• source：必需。指定作为边框图片的图像的路径。
• slice：可选。定义图片如何被分割成九个部分来创建边框效果。可以是数值、百分比或填充关键词 fill，默认是 100%。
• width：可选。设置边框图像的宽度，覆盖由 slice 产生的宽度。
• outset：可选。设置边框图像超出边框盒的量。
• repeat：可选。定义图片如何在边框上重复。可能的值包括 stretch、repeat、round 和 space。

二、简写形式

常见的简写形式为：

border-image: url(image-path)[number|percentage] [number|percentage] [stretch|repeat|round|space] [number|percentage];

如果只提供一个数值或百分比，它会被应用到四个方向。提供两个数值时，第一个应用于水平方向（左右），第二个应用于垂直方向（上下）。

三、详细属性

1. border-image-source

   设定图片路径，这是唯一必需的属性。

   p {
       border: 20px solid #000;
       border-image-source: url(border.png);
   }
   

2. border-image-slice

   控制图片如何被切分成边框的片段。数值与百分比允许你指定图片如何被切割成9个区域（4个角、4条边和中间部分）。

   p {
       border: 20px solid #000;
       border-image-source: url(border.png);
       border-image-slice: 27 27 27 27; /* 或 27% 27% 27% 27% */
   }
   

   使用 fill 关键字时，中间的图片区域会被拉伸以填充边框区域之外的部分。

   p {
       border: 20px solid #000;
       border-image-source: url(border.png);
       border-image-slice: 20% 30% fill;
   }
   

3. border-image-width

   调整边框图像的宽度。可以设定具体的像素值、百分比，也可以使用 auto 让浏览器自动计算宽度。

   p {
       border: 20px solid #000;
       border-image-source: url(border.png);
       border-image-slice: 27 27 27 27;
       border-image-width: 27px 1 10% 27px;
   }
   

4. border-image-outset

   控制边框图像是否扩展超出边框盒。正值会使边框图像在边框之外显示，创造出一种“浮雕”效果。

   p {
       border: 20px solid #000;
       border-image-source: url(border.png);
       border-image-slice: 27 27 27 27;
       border-image-width: 27px 1 10% 27px;
       border-image-outset: 27px 27px 27px 27px;
   }
   

5. border-image-repeat

   定义图片在边框上的平铺方式。

   • stretch：默认值，图片被拉伸以填满边框的每个部分。
   • repeat：图片在边框的每一侧重复，可能会导致不对齐。
   • round：类似于 repeat，但会根据边框长度对图片进行适量缩放，以确保完整显示图片且没有裁剪。
   • space：图片在边框上平均分布，如果不能完美对齐，则在图片之间添加均匀的间距。

   p {
       border: 20px solid #000;
       border-image-source: url(border.png);
       border-image-slice: 27 27 27 27;
       border-image-width: 27px 1 10% 27px;
       border-image-outset: 27px 27px 27px 27px;
       border-image-repeat: rounded;
   }
   

四、高级应用

1. 渐变边框

   通过将渐变图片作为 border-image-source，可以创建出动态的渐变边框效果。

2. 响应式边框

   利用媒体查询动态调整 border-image-width 或 border-image-slice，可以让边框在不同屏幕尺寸下表现更佳。

3. 多图层边框

   结合多个边框样式，如内边框和外边框，可以创造出复杂的层次感边框效果。

五、性能考量

大尺寸或高分辨率的边框图片会增加页面加载时间，建议优化图片大小。

六、兼容性

虽然现代浏览器广泛支持 border-image，但在老旧浏览器中可能需要降级策略或替代方案。

七、调试

使用开发者工具查看边框图片的切割和布局，有助于理解 slice、width 和 repeat 属性的效果。

通过掌握 border-image 属性，你可以为网页元素创建独特且富有吸引力的边框效果，提升网页的视觉表现力。

本文地址：https://www.tides.cn/p_css-border-image