CSS3图片边框常用的属性+用法

最新推荐文章于 2021-06-09 12:20:05 发布

佳碟碟

最新推荐文章于 2021-06-09 12:20:05 发布

阅读量2.2k

点赞数

分类专栏： C语言

本文链接：https://blog.csdn.net/qq_45659547/article/details/110975332

版权

C语言专栏收录该内容

8 篇文章 0 订阅

订阅专栏

注意点：
目前只有部分浏览器支持border-image属性；如果代码无误，内容却无法显示，可以尝试换个浏览器查看

图片边框的语法：
border-image:border-image-source border-image-slice border-image-repeat
三个参数 [图片地址；裁剪值；平铺方式]
border-image: url(img_fx/background.png) 100 stretch;

图片边框显示的重点：
边框属性不写边框大小，设了border-image会无法显示
三个参数[边框大小样式颜色]
border: 5px solid pink;

border-image参数讲解：

参数一、
图片地址，设置边框图片的url
参数二、
裁剪 [有1-4个参数，上右下左顺时针裁剪] 最常用的是1个参数对边框图片裁四刀，使它变成一个九宫格图片

例如“30% 35% 40% 30%”裁剪，示意图如下：在这里插入图片描述

参数三、
重复方式，有三种值；
round平铺、repeat重复、stretch拉伸[默认值]

帮助理解的边框图片
在这里插入图片描述
1、3、7、9是盲区；不会拉伸，不会重复，不会平铺

平铺和重复的区别：
平铺：为了完整的铺满，会改变单个元素大小
重复：不会改变大小，但为了铺满会切割部分来填补
不推荐使用repeat重复，可能会被切割，导致不美观

设置平铺边框图片：
在这里插入图片描述
实现以上效果的代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>平铺图片边框</title>
    <style type="text/css">
        .box {
            height:170px;
            width:170px;
            float:left;
            border:40px solid;
            background-image:url(img_fx/h2.jpg);
            margin:5px;
        }
        .b1 {
            border-image:url(img_fx/border.png) 27 round;
        }
        .b2 {
            border-image:url(img_fx/background.png) 100 round;
        }
    </style>
</head>
<body>
    <div>
        <div class="box b1"></div>
        <div class="box b2"></div>
    </div>
</body>

设置重复边框图片： 在这里插入图片描述
实现以上效果的代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>重复图片边框</title>
    <style type="text/css">
        .box {
            height:170px;
            width:170px;
            float:left;
            border:40px solid;
            background-image:url(img_fx/h2.jpg);
            margin:5px;
        }
        .b1 {
            border-image:url(img_fx/border.png) 27 repeat;
        }
        .b2 {
            border-image:url(img_fx/background.png) 100 repeat;
        }
    </style>
</head>
<body>
    <div>
        <div class="box b1"></div>
        <div class="box b2"></div>
    </div>
</body>

[默认参数]设置拉伸边框图片： 在这里插入图片描述

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>拉伸图片边框</title>
    <style type="text/css">
        .box {
            height:170px;
            width:170px;
            float:left;
            border:40px solid;
            background-image:url(img_fx/h2.jpg);
            margin:5px;
        }
        .b1 {
            border-image:url(img_fx/border.png) 27 stretch;
        }
        .b2 {
            border-image:url(img_fx/background.png) 100 stretch;
        }
    </style>
</head>
<body>
    <div>
        <div class="box b1"></div>
        <div class="box b2"></div>
    </div>
</body>

总结 [如何设置图片边框]：

设置边框属性→ border
设置图片边框属性→border-image，根据边框图片大小设置对应的裁剪值
选择合适的重复方式

温馨提示：
喜欢灰碟分享的小伙伴不要忘记关注噢~这样子，想找我时就不会迷路啦*

联系方式：
Vx+：LHD7575

佳碟碟

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
CSS3图片边框常用的属性+用法

注意点：目前只有部分浏览器支持border-image属性；如果代码无误，内容却无法显示，可以尝试换个浏览器查看图片边框的语法：border-image:border-image-source border-image-slice border-image-repeat三个参数 [图片地址；裁剪值；平铺方式]例如→border-image: url(img_fx/background.png) 100 stretch;图片边框显示的重点：边框属性不写边框大小，设了border-image会无法
复制链接

扫一扫