边框图片

最新推荐文章于 2022-04-14 19:13:57 发布

weixin_34290390

最新推荐文章于 2022-04-14 19:13:57 发布

阅读量63

点赞数

原文链接：http://www.cnblogs.com/lujieting/p/10182584.html

版权

<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/img/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:扩展边框*/
            border-image-outset: 0px;

            /*border-image-repeat:
            repeat:直接重复平铺
            round:将内容缩放进行完整的重复平铺
            设置背景平铺效果  默认是stretch：拉伸*/
            border-image-repeat: round;

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

转载于:https://www.cnblogs.com/lujieting/p/10182584.html

weixin_34290390

关注

0
点赞
踩
0

收藏

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

<style> *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; margin:100px auto; box-sizing: border...
复制链接

扫一扫