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 中的一个高级属性，它允许你使用图像来创建边框，而不仅仅是使用颜色和样式。这个属性提供了比传统边框更多的灵活性和视觉吸引力。