border-image：一个比 boder 更加吸引人的CSS属性

画一个圆_

已于 2024-07-30 14:55:17 修改

阅读量959

点赞数 25

分类专栏：前端 CSS 文章标签： css 前端

于 2024-07-22 16:02:35 首次发布

本文链接：https://blog.youkuaiyun.com/fans_x/article/details/140609295

版权

前端同时被 2 个专栏收录

30 篇文章

订阅专栏

CSS

7 篇文章

订阅专栏

文章目录

前言

在开始正文之前我们先看看炉石传说的一个页面中的两个地方：加载更多按钮和tab切换。打开控制台，我们可以发现这两个地方都有一个相同的地方：都使用了boder-image这个属性。那这个属性有什么用那，接下来由我来向大伙详细介绍一下这个属性。在这里插入图片描述

介绍

看完前言的小伙伴是不想着这两个例子我使用backgrond就可以解决了，为啥还要这个属性？我刚开始接触的时候也是这样想的，但我在对一个项目进行换肤的时候就出现了一个问题：很多地方都是文字不用修改，但是边框要进行修改，导致我每个地方都需要重新进行切图，换皮😅😅😅另外，我们在使用border-image的同时还可以使用background。如下图
在这里插入图片描述
我们来看看MDN对这个属性的介绍：在给定元素的周围绘制图像，取代元素的常规边框。这句话的意思就是使用图片来作为border的纯色样式，当然还可以使用linear-gradient实现一个渐变边框。

border-image属性具有以下几个子属性：

border-image-source: 边框图片地址
border-image-slice: 边框图片的切片区域。
border-image-width: 边框的宽度。
border-image-outset: 边框图片区域超出边框的量（一般为 0 即可）。
border-image-repeat: 定义图像在边框中的重复方式

这里有两个问题在使用的时候需要注意一下，我在刚开始用的时候也遇到了这两个问题，然后发现有很多伙伴在使用的时候都会出现这个问题。另外在下面的Can I use这个网站指出了这两个问题：
1、border-image-width在使用的时候必须定义为不为0，只要当它不为 0 的时候，图片边框才能显示。
2、border-style：在使用给的时候必须定位为不为 null，否则boder-image使用的图片将作为背景图片且会有显示不全的问题，具体看下图。
在这里插入图片描述

.example{
    border-image: url(https://button_secondary-3766809….svg) 10 fill / 1 / 0 stretch;
    /* 对应 */
    border-image-source: url(https://button_secondary-3766809….svg);
    border-image-slice: 10 fill;
    border-image-width: 1;
    border-image-outset: 0;
    border-image-repeat: stretch
}

下面是该属性的兼容性图览：
在这里插入图片描述

实践

光说不练肯定是不行的，接下来我们就来使用border-image实现一个渐变边框。

 <body>
   <div class="border-demo"></div>
   <style>
     body {
       height: 100vh;
     }
     .border-demo {
       height: 50px;
       width: 200px;
       margin: 200px auto;
       border-style: solid;
       background: rgb(199, 175, 175);
       border-image-source: linear-gradient(45deg, gold, deeppink);
       border-image-slice: 1;
     }
   </style>
 </body>