边框背景设置

最新推荐文章于 2023-12-10 20:59:20 发布

cuiZero0

最新推荐文章于 2023-12-10 20:59:20 发布

阅读量320

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_43991433/article/details/111387596

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

总共四步：
1.设置盒子border

 border: 30px solid palegoldenrod；

2.将背景框的图片引入

border-image-source:url('image/1.png')

3.设置图片分割的位置

border-image-slice：上 右 下 左；

4.设置图片边框的宽度

border-image-width：上 右 下 左；

5.设置照片平铺状态

border-image-repeat：
stretch
拉伸图片以填充边框。
repeat
平铺图片以填充边框。
round
平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。
space
平铺图像 。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）
inherit
继承父级元素的计算值。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/flexible.js"></script>
    <style>
        div {
            border: 30px solid palegoldenrod;
            border-image-source: url('../charts-project/images/border.png');
            /* 上右下左 */
            border-image-slice: 51 39 22 132;
            border-image-width: 51px 39px 22px 132px;
            border-image-repeat:inherit;
        }

       
    </style>
</head>

<body>
    <div>hhh</div>
    
</body>

</html>

在这里插入图片描述

cuiZero0

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
边框背景设置

总共四步：1.设置盒子border border: 30px solid palegoldenrod；2.将背景框的图片引入border-image-source:url('image/1.png')3.设置图片分割的位置border-image-slice：上右下左；4.设置图片边框的宽度border-image-width：上右下左；5.设置照片平铺状态border-image-repeat：stretch拉伸图片以填充边框。repeat平铺图片以填充边框
复制链接

扫一扫