【CSS3学习笔记】16:边框图片效果

版权声明:本文为博主原创学习笔记,如需转载请注明来源。 https://blog.csdn.net/SHU15121856/article/details/77744720

通过边框背景这个新特性可以让我们的边框更加丰富。
相关属性
①border-image-source 引入图片背景地址
②border-image-slice 切割背景图片
(通过设置四个值来知道四个角要显示的尺寸,在这里加入fill可以将内部填充)
③border-image-width 边框图片的宽度
(通过设置四个值来知道边框四条边的宽度。)
④border-image-repeat 边框中边的方案
(stretch拉伸(默认),repeat平铺(超过则截断),round平铺(动态调整图片大小),space平铺(动态调整图片间距)。)
⑤border-image-outset 边框背景向外扩张的范围
(为了刚好包含住background的范围,它个值往往就是边框每条边的宽度。)
⑥border-image 前面五个属性的简写

边框应使用特制的图片,能够分成九宫格(不一定每格大小都一样),如用ps制作了一张这样的图:
这里写图片描述
它的总大小是210px,每个格子为70px:
这里写图片描述

*测试代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>CSS3边框图片效果</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="id1">
        <span>加入图片边框</span>
    </div>
    <br>
    <div id="id2">
        <span>用百分比切割</span>
    </div>
    <br>
    <div id="id3">
        <span>向外扩张以包含住背景</span>
    </div>
    <br><br><br><br><br><br><br>
    <div id="id4">
        <span>设定四个边的方案</span>
    </div>
    <br>
    <div id="id5">
        <span>尝试fill填充</span>
    </div>
</html>
@charset "utf-8";

div span{
    vertical-align: -200px;
}

#id1{
    text-align: center;
    width: 400px;
    height :400px;
    /*边框的地址*/
    border-image-source: url(lzh.png);
    /*边框图像宽度,四个边都是70px*/
    border-image-width: 70px;
    /*边框的切割,四边都向内切割70(px),即每个角显示70x70的小格,其它部分自动拉伸*/
    border-image-slice: 70;
}

#id2{
    text-align: center;
    width: 400px;
    height :400px;
    border-image-source: url(lzh.png);
    border-image-width: 70px;
    border-image-slice: 33.4%;
}

#id3{
    text-align: center;
    margin: 0 auto;
    width: 400px;
    height :400px;
    background-color: gray;
    border-image-source: url(lzh.png);
    border-image-width: 70px;
    border-image-slice: 33.4%;
    /*为了遮住背景颜色,向外扩张*/
    border-image-outset: 70px;
}

#id4{
    text-align: center;
    width: 400px;
    height :400px;
    border-image-source: url(lzh.png);
    border-image-width: 70px;
    border-image-slice: 33.4%;
    /*动态调整边图的大小以平铺*/
    border-image-repeat: round;
}

#id5{
    text-align: center;
    width: 400px;
    height :400px;
    border-image-source: url(lzh.png);
    border-image-width: 70px;
    /*既平铺,又填充*/
    border-image-slice: 33.4% fill;
    border-image-repeat: round;
}

运行结果:
这里写图片描述
这里写图片描述
这里写图片描述
另外,利用边框图片(border-image),还可以做出按钮的效果来。

展开阅读全文

没有更多推荐了,返回首页