CSS-边框1-边框背景图

最新推荐文章于 2025-05-23 10:57:58 发布

weixin_34297300

最新推荐文章于 2025-05-23 10:57:58 发布

阅读量594

点赞数

CC 4.0 BY-SA版权

文章标签：人工智能

原文链接：https://yq.aliyun.com/articles/605544

本文详细介绍了CSS中边框背景的相关属性及其用法，包括border-image-source、border-image-slice、border-image-repeat等，并通过实例展示了不同重复效果的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、边框背景概述

1.1 border-image-source

border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式。如果值是"none"，或者，如果无法显示图像，边框样式会被使用。

1.2 border-image-slice

border-image -slice属性指定图像的边界向内偏移。

值	说明
number	数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像）
%	百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度
fill	保留图像的中间部分

1.3 border-image-repeat

值	描述
stretch	默认值。拉伸图像来填充区域
repeat	平铺（repeated）图像来填充区域。
round	类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。

1.4 border-image-width

border-image-width 属性的四个之规定将边框图像分割为九个部分的偏移。它们代表了从区域的上、右、下、左侧向内的距离。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-width 值。

值	描述
length	距离多少像素
percentage	百分比
number	边框宽度多少倍数

1.5 border-image-outset

border-image-outset 属性规定边框图像超出边框盒的量。在上、右、下、左侧。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-outset 值。

值	描述
length	距离多少像素
percentage	百分比
number	边框宽度多少倍数

2、背景裁剪

border-image-slice ：上、右、下、左。

边框背景图剪裁

3、边框背景重复效果

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框背景重复效果</title>
    <style type="text/css">
    .borderImage{
        width:400px;
        height:100px; 
        border: 27px double orange; 
        border-image-source:url(border.png);
        border-image-slice: 27 27 27 27;
        border-image-width: 27px;
        border-image-repeat: stretch;
    }
    .borderImageRepeat{
        margin-top: 50px;
        width:400px;
        height:100px; 
        border: 27px double orange; 
        border-image-source:url(border.png);
        border-image-slice: 27 27 27 27;
        border-image-width: 27px;
        border-image-repeat: repeat;
    }
      .borderImageRound{
        margin-top: 50px;
        width:400px;
        height:100px; 
        border: 27px double orange; 
        border-image-source:url(border.png);
        border-image-slice: 27 27 27 27;
        border-image-width: 27px;
        border-image-repeat: round;
    }
    </style>
</head>
<body>
    <div class="borderImage">border-image-repeat: stretch;</div>
    <div class="borderImageRepeat">
        border-image-repeat: repeat;<br>
        repeat简单粗暴，会有不完整的情况。
    </div>
    <div class="borderImageRound">
        border-image-repeat: repeat;<br>
        round会拉伸压缩比repeat效果好。
    </div>
</body>
</html>

运行效果:

背景图重复