css 图片裁剪-CSS 边框图像 border-image 属性

为了实现丰富多彩的边框效果css 图片裁剪，在CSS3中，新增了border-image属性。 这个新属性允许将图像指定为元素的边框。

上图中的包包尺寸不同，但框架款式是一样的。 这时候就需要帧图来完成制作了。

边框图像切割原理

剪掉四个角（九个方格的原因）css 图片裁剪，中间部分可以铺开、拉伸或包裹。

如何切割：切割时，保证四个角和每个角的完整性

例如：

边框图片句型

属性

描述

边框图像源

用于边框的图像路径。 （该图片？）

边框图像切片

图像边框向内倾斜。 （切割规格不得加单位，右上左下顺序）

边框图像宽度

图片边框的长度（需要添加单位）（不是边框的长度是边框图片的长度）

边框图像重复

图像帧默认是平铺（重复）、全圆（圆形）还是拉伸（拉伸）

代码演示

        div {
            width: 400px;
            height: 300px;
            border: 15px solid pink;
            /* 边框图片路径 */
            border-image-source: url(images/border.jpg);
            /* 第一种写法上右下左值不同的时候  */
            /* border-image-slice: 170 10 45 80; */
            /* 第二种写法上右下左值都相同的时候  */
            border-image-slice: 170;
            /* 图片边框的宽度（需要加单位） */
            border-image-width: 30px;
            /* 图像边框是否平铺（repeat）、铺满（round）或拉伸（stretch） */
            border-image-repeat: round;
        }


    

注意：

(1)当div中输入文字时，如果属性border-image-width: 30px； 不添加，会显示如下效果，边框图片的长度等于包包边框的边框长度：15px；

(2)当div中输入文字且border-image-width:30px时； 添加到该属性后，会在下面显示疗效。 边框图像的长度等于border-image-width: 30px； 边框图片的长度不会挤压文字，所以可以看到文字的显示和上图不一样