border-image详解

V。on

于 2024-08-20 16:34:09 发布

阅读量455

点赞数 9

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

本文链接：https://blog.csdn.net/qq_40864647/article/details/141362190

版权

css 专栏收录该内容

32 篇文章 6 订阅

订阅专栏

border-image详解

属性定义及使用说明

border-image 属性允许开发者使用图片来定义元素的边框，替代了传统的纯色边框。这个属性实际上是一个简写属性，聚合了多个子属性，包括用于定义图片源、切片方式、边框宽度、外扩以及平铺模式的设置。下

语法

border-image: source slice width outset repeat|initial|inherit;

需要注意的是，使用-webkit-text-stroke会导致文本的渲染性能下降，特别是当文本内容非常多或者在移动设备上时，可能会影响到性能和体验。

属性	描述
border-image-source	定义用作边框的图片的路径。如果没有提供图像，边框将不会显示。
border-image-slice	控制图片如何被切分成九个部分（四个角、四条边和中间部分）。
border-image-width	定义图片边框的宽度。
border-image-outset	决定边框图像区域超出边框边缘的距离。
border-image-repeat	指定边框图片如何在边框的四个边上重复。

注意事项

当使用fill关键词时，中间部分会被拉伸以填充剩余空间。
如果只提供图片源和切片值，其他值（宽度、外扩、平铺方式）会使用默认值或基于边框宽度计算得出。
border-image不影响盒子模型的尺寸，边框图像的大小调整不会改变元素的实际宽度和高度。

属性详解

border-image-source

定义用作边框的图片的路径。如果没有提供图像，边框将不会显示。值可以是URL引用或none。
border-image-slice

控制图片如何被切分成九个部分（四个角、四条边和中间部分）。数值可以是百分比或长度值，用来指定沿边框图像的切割线位置。默认值是100%，意味着整个图像将被分割成九个相等的部分。
border-image-slice

控制图片如何被切分成九个部分（四个角、四条边和中间部分）。数值可以是百分比或长度值，用来指定沿边框图像的切割线位置。默认值是100%，意味着整个图像将被分割成九个相等的部分。
border-image-width

决定边框图像区域超出边框边缘的距离，使得边框图像可以在元素的背景之上延伸。接受长度值，正值会使边框图像覆盖到元素的背景上。
border-image-repeat

指定边框图片如何在边框的四个边上重复。可能的值包括stretch（拉伸以填满边框）、repeat（平铺重复）、round（平铺重复并可能缩放图像以适应边框宽度）和space（平铺重复并在必要时在图像之间插入均匀间隔）。

举例：
在这里插入图片描述

核心代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 400px;
        height: 200px;
        background-color: rgba(79, 166, 255, 0.5);
        margin: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .btn {
        width: 180px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-family: SourceHanSansCN-Regular;
        border-radius: 6px;
        display: inline-block;
        position: relative;
        /* background-color: rgba(79, 166, 255, 0.5); */
        cursor: pointer;
      }

      /* 伪元素 ::before 被用来创造一个覆盖整个容器的层，它具有圆角和渐变背景。 */
      .btn::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        /* 内边距1px来显示边框 */
        padding: 1px;
        /* 圆角 */
        border-radius: 6px;
        /* 渐变背景，需要渐变的边框的颜色 */
        background: linear-gradient(to right, yellow 0%, green 100%);
        /* 随便定义一个颜色，只是为了覆盖当前这个伪元素 */
        -webkit-mask-image: linear-gradient(red, red), linear-gradient(red, red);
        -webkit-mask-clip: content-box, padding-box;
        /* exclude排除，只显示不重合的地方 */
        mask-composite: exclude;
        /* 只显示下方遮罩，重合的地方不显示 */
        -webkit-mask-composite: destination-out;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="btn">带圆角的渐变色边框</div>
    </div>
  </body>
</html>