css边框图片

最新推荐文章于 2024-03-31 11:24:14 发布

欢莱

最新推荐文章于 2024-03-31 11:24:14 发布

阅读量726

点赞数

分类专栏： CSS3 文章标签： css css3 html

本文链接：https://blog.csdn.net/RR_chen/article/details/122413043

版权

1 篇文章 0 订阅

订阅专栏

边框图片的原理：一一对应。

请添加图片描述

将背景图片分为了9块。

请添加图片描述

边框图片总大小为81px * 81px正方形，每块是27px * 27px正方形。如上图：

        .i {
            width: 280px;
            height: 160px;
            border: 27px solid red;
        }

背景图片覆盖背景颜色

border-image-slice: 27 fill; 设置四个方向上的裁切距离。fill：做内容的内部填充。除非使用了关键词 fill，否则中间的图像部分会被丢弃。
border-image-width: 27px; 边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度。一般值设置为原始边框的宽度。

边框图片的本质是个背景，内容位置不受边框图片的影响。

border-image-outset: 0px; 扩展边框。不常用（因为即使有box-sizing: border-box，也会将容器变大，影响布局。）
border-image-repeat: repeat; repeat：设置2、4、5、7区域直接重复平铺。round：将内容缩放进行完整的重复平铺。若不设置此属性，则2、4、5、7区域被拉伸。

repeat：

round：

缩写：

border-image: source slice / width / outset repeat;

border-image: url("...") 27 / 27px / 0px round;

学习黑马程序员的笔记

关注