图像边框-css盒子模型-web前端开发 border-image #职场

web 前端开发课程：css 盒子模型-图像边框。

讲课人：波波老师。

说说 border-image 这个很重要的概念，它允许在元素的边框上绘制图像。

再来看一下右侧图片，图像边框的原理是什么？就是把图像划分成一个九宫格。

1. 第一个属性：border-image-source，它是绘制边框的图像路径，还要配合第二个属性：图像的边框宽度。

先看一个演示。

(1) 看一下图像边框，这里做一个 div.image，做一个.image 的样式，要把它的宽度和高度设一下。

(2) 然后设一下边框的图像，url(images/border.png')，可以看到什么都没有，因为还要配合第二个，也就是它的宽度才能把图像显示出来。比如设置一个 30PX，可以看到已经有了，这个图片看不太清楚。

(3) 还是老规矩，设置背景，background-color，设置一个淡蓝色，这是绿色。边框图像的背景已经出来了，可以通过修改它的宽度来设置背景，当然这不是想要的。

2. 再看下一个属性，刚才已经把图像边框加上去了，但是并不是想要的九宫格的效果，因为还差一个非常重要的属性，那就是 border-image-slice，图片的偏移。这个是什么意思？就是图片边界向内部偏移的值，也就是分别从上边、右边、下边和左边拿出多少个像素来做边框，这个只能填纯数字或者是百分比，因为它是必须绑定 PX 像素值的。

看一下演示。

(1) 看一下背景图片，它的长度和宽度都是 81，把它除以 3，也就是图片的大小在 27 左右，就把偏移值设为 27。

(2) border-image-slice，把它设成 27，可以看到现在已经成了九宫格的样子，把宽度可以设置高一点或者是小一点，小一点好看一点，10 个 20，或者连看都不看，直接设为 33%，也就是 1/3，看到效果和那个也差不了太多。

这就是图像的偏移。

3. border-image-source：绘制边框的图像路径。

4. border-image-width：图像边框宽度。

5. border-image-slice：图像边框向内偏移。

6. border-image-outset：圆角边框。

7. border-image-repeat：图像边框重复方式。

这是边框的外部绘制，也就是边框往外偏移的量，来看一下演示。现在可以看到图像的边框是在内部的，把它往外做偏移，border-image-outset，偏移 30 个 PX，可以看到效果跑到边框的外部来了。

还有一个 border-image-repeat，就是边框的重复方式，它是什么？可以看图片，九宫格上用到这 8 个方块，红色的四个是不变的，黄色的四个刚才看到它被拉伸了，这是默认的效果。还可以把它调成什么？是调成 repeat 平铺，来看一下演示。

border-image-repeat，把它做成 repeat，把这个去掉，可以看到它就变成了平铺的方式，把它改成 stretch，可以看到它又被拉伸。这就是 repeat 两种方式的区别。