CSS实现图片边框酷炫效果
一、前言
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。
遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
二、代码实现
用css代码实现该效果很简单，只需几行css代码即可。
<div class="border-img"><h2>梦游天姥吟留别</h2><p>唐 · 李白</p><p>海客谈瀛洲，烟涛微茫信难求，越人语天姥，云霞明灭或可睹。天姥连天向天横，势拔五岳掩赤城。天台四万八千丈，对此欲倒东南倾。我欲因之梦吴越，一夜飞度镜湖月。湖月照我影，送我至剡溪。谢公宿处今尚在，渌水荡漾清猿啼。脚著谢公屐，身登青云梯。半壁见海日，空中闻天鸡。千岩万转路不定，迷花倚石忽已暝。熊咆龙吟殷岩泉，栗深林兮惊层巅。云青青兮欲雨，水澹澹兮生烟。列缺霹雳，丘峦崩摧。洞天石扉，訇然中开。青冥浩荡不见底，日月照耀金银台。霓为衣兮风为马，云之君兮纷纷而来下。虎鼓瑟兮鸾回车，仙之人兮列如麻。忽魂悸以魄动，恍惊起而长嗟。惟觉时之枕席，失向来之烟霞。世间行乐亦如此，古来万事东流水。别君去兮何时还？且放白鹿青崖间。须行即骑访名山。安能摧眉折腰事权贵，使我不得开心颜！</p>
</div>
重点代码来了！！！
.border-img {text-align: center;padding: 3rem;margin: 2rem auto;width: 60%;border: 70px solid #fff;border-image: url('./img/border.png') 70 round;
}
上面的代码可以看出，只需要给元素添加border-image样式即可。那么，下面就重点来介绍一个border-image属性的用法！
三、border-image属性
border-image 属性是一个简写属性，它由 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 五个属性组成。下面详细介绍一下这个几个属性的作用。
3.1、border-image-source
border-image-source属性指定要使用的图像地址，而不是由border-style属性设置的边框样式。
div {border-image-source: url('border.png');
}
默认值为none。如果值是none，或者如果无法显示图像，边框样式会被使用。
3.2、border-image-slice
border-image-slice 属性将使用 border-image-source 引用的图像划分为多个区域。这些区域组成了一个元素的边框图像。
border-image-slice: number | % | fill;
number：表示到图像边缘的偏移量，在位图中的单位为像素点，在矢量图中则是坐标。对于矢量图，number 值与元素大小相关，而非矢量图的原始大小。因此，使用矢量图时，使用百分比值（%）更可取。
%：以原始图像大小的百分比表示的边缘偏移量：水平偏移使用图像的宽度，垂直偏移则使用图像的高度。
fill：保留图像的中心区域并将其作为背景图像显示出来，但其会堆叠在 background 之上。它的宽度和高度分别对应顶部和左侧图像切片的宽度和高度。
切分过程会将图像分割为 9 个区域：四个角、四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。
- 区域 1-4 为角区域（corner region）。每一个都被用于组成最终边框图像的四个角。
- 区域 5-8 边区域（edge region）。在最终的边框图像中重复、缩放或修改它们以匹配元素的大小。
- 区域 9 为中心区域（middle region）。它在默认情况下会被丢弃，但如果设置了关键字 fill，则会将其用作元素的背景图像。
以如下原始图为例，图像中钻石是长宽分别为 30px：
3.3、border-image-width
border-image-width 指定了边界图像的宽度。如果本属性值大于元素的 border-width，边界图像将会向 padding 边缘延展。
border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}
border-image-width 参数的四种类型:
length：带 px, em, in … 单位的尺寸值。
percentage：百分比。
number：不带单位的数字；它表示 border-width 的倍数。
auto：使用 auto， border-image-width 将会使用 border-image-slice 的值。
border-image-width 的参数不能为负值。
border-image-width 属性的值可用以下方式进行设定：
当指定 一个 值时，它将作用到 四个方向 ；
当指定 两个 值时，它将分别作用到 垂直方向 和 水平方向 ；
当指定 三个 值时，它将分别作用到 上方、水平方向、和下方；
当指定 四个 值时，它将分别作用到 上方、右方、下方和左方。
3.4、border-image-outset
border-image-outset 属性定义边框图像可超出边框盒的大小，使图像边框延伸到盒子模型以外的距离。
border-image-outset：[ <length> | <number> ]{1,4}
length：用具体的数值加单位的形式指定图像边框向外偏移的距离，不允许为负值；
number：用浮点数指定图像边框向外偏移的距离，该值表示 border-width 的倍数，例如值为 2，则表示偏移量为 2 * border-width，不允许为负值。
border-image-outset 属性的值可用以下方式进行设定：
当指定 一个 值时，它将作用到 四个方向 ；
当指定 两个 值时，它将分别作用到 垂直方向 和 水平方向 ；
当指定 三个 值时，它将分别作用到 上方、水平方向、和下方；
当指定 四个 值时，它将分别作用到 上方、右方、下方和左方。
3.5、border-image-repeat
border-image-repeat 属性用来设置如何填充使用 border-image-slice 属性分割的图像边框，例如平铺、拉伸等等。
border-image-repeat: [ stretch | repeat | round | space ]{1,2}
stretch：拉伸图片以填充边框。
repeat：平铺图片以填充边框。
round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。
space：平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）。
border-image-repeat 属性接受 1~2 个参数值：
如果提供两个参数，那么第一个参数将用于水平方向，第二个将用于垂直方向；
如果只提供一个参数，那么将在水平和垂直方向都应用该值。
演示图如下：
round 与 repeat 的区别：round会凑整填充，进行了适度的缩放。repeat不凑整，不进行缩放。
round 与 space 的区别：虽然都是凑整填充显示，但是space不能凑整时，不进行缩放，而是用空白间隙填充在图像周围。
四、总结
大多数现代浏览器都支持 border-image 属性，但旧版浏览器可能不支持或支持有限。border-image属性兼容性如下：
注意事项：
如果没有设置 border-image-source，则其他 border-image 属性将无效。
如果图像无法加载或图像源为空，则边框将不会显示。
为了看到 border-image 的效果，通常需要先设置一个透明的边框宽度。
border-image 不会继承，但可以通过 CSS 继承规则从父元素继承其他边框属性（如 border-width、border-style 和 border-color）。
border-image 不会影响 border-radius，但 border-radius 可能会影响 border-image 的外观。
border-image 是 CSS 中的一个高级属性，它允许你使用图像来创建边框，而不仅仅是使用颜色和样式。这个属性提供了比传统边框更多的灵活性和视觉吸引力。