CSS3 边框图片

最新推荐文章于 2022-06-17 18:04:58 发布

DevCsdner

最新推荐文章于 2022-06-17 18:04:58 发布

阅读量73

点赞数

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

本文链接：https://blog.csdn.net/smartboy_01/article/details/119789816

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

边框图片

边框图片

边框图片

将图片规定为包围 div元素的边框，背景图一一对应放置到所要指定的区域。
在这里插入图片描述

定义和用法： border-image 属性是一个简写属性，用于设置以下属性

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

属性说明：

值	描述
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移—裁切。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            margin:100px auto;
            box-sizing: border-box;
            border: 27px solid red;
            /*padding: 27px;*/
            /*添加边框图片*/
            /*border-image-source:可以指定边框图片的路径,默认只是填充到容器的四个角点*/
            /*border-image-source: url("../images/border1.png");*/
            /*让它成为九宫格：border-image-slice:设置四个方向上的裁切距离.fill:做内容的内部填充  问题：如果分别设置1，2，3，4个值代表什么意思*/
            /*border-image-slice: 27 fill;*/
            /*border-image-width:边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度。
            细节：1.边框图片的本质是背景，并不会影响元素内容的放置  2.内容只会被容器的border和padding影响
            建议：一般将值设置为原始的边框的宽度*/
            /*border-image-width: 27px;*/
            /*border-image-outset:扩展边框,当设置为box-sizing: border-box;模型时会扩大盒子的大小，一般不使用*/
            /*border-image-outset: 0px;*/
            /*border-image-repeat:
            repeat:直接重复平铺
            round:将内容缩放进行完整的重复平铺*/
            /*border-image-repeat: round;*/

            /*缩写：*/
            /*border-image: source slice / width/outset repeat;*/
            border-image: url("../images/border1.png") 27 / 27px /0px round;
        }
    </style>
</head>
<body>
<div>边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度</div>
</body>
</html>

原始图片
在这里插入图片描述
边框背景图效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 500px;
            height: auto;
            border: 10px solid red;
            margin:100px auto;
            /*添加边框图片*/
            border-image-source: url("../images/btn_bg.png");
            /*设置受保护的区域大小*/
            border-image-slice: 10 fill;
            /*设置边框图片的宽度
            1.明确圆角的大小
            2.明确受保护的区域的大小*/
            border-image-width: 10px;
            /*设置背景平铺效果  默认是stretch：拉伸*/
            border-image-repeat: stretch;
        }
    </style>
</head>
<body>
<div>边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置</div>
</body>
</html>

背景图
在这里插入图片描述

在这里插入图片描述

DevCsdner

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 边框图片

边框图片边框图片边框图片将图片规定为包围 div元素的边框，背景图一一对应放置到所要指定的区域。定义和用法： border-image 属性是一个简写属性，用于设置以下属性border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat属性说明：值描述border-image-source用在边框的图片的路径。border-im
复制链接

扫一扫