位置: IT常识 - 正文

24张图攻克border-image

编辑：rootadmin

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！原文链接 ==>http://sylblog.xin/archi ...

推荐整理分享24张图攻克border-image，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

大家好，我是半夏?，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 ? 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

原文链接 ==>http://sylblog.xin/archives/35

前言

前有background-image 为背景增光增彩，后有mask-image 给背景增加可玩性，今天我们来聊聊border-image，看看他是如何发光发热的！Go!Go!Go!

border-image

首先这个属性是下面个属性的缩写，

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

原理

对于本人来说，这个属性比其他属性来讲是比较难的,所以先介绍背后的原理。

首先掏出一张大家都在用的图片，是不是瞬间感觉很熟悉。

为什么这张图这么受大家的欢迎呢，我觉得这张图是一个完美的九宫格。没错，九宫格就是原理。这里我们假设border-image（或者说是border-image-slice）属性三等分，把图片分成一个九宫格。这张图是8181尺寸的，所以正好是每个菱形占据一个角。尺寸是2727。同时也会把浏览器元素分成九块,但是并不是平均分的，比如，左上角大小就和borderimage的左上角大小一致，但是上边中间的大小是剩余的空间大小，这里就引出了第二个属性，border-image-repeat会决定borderimage中间格子在元素上如何显示，相信看到这里大家对于border-image的原理有大概的了解了。

下面我们介绍各个属性

border-image-source

border-image的背景图使用url()调用，图片可以是相对路径或是绝对路径，也可以不使用图片，即border-image:none;这里有个点要注意：如果存在border-image属性并且图片不是none的话，border-style 会失效。

举例 width: 200px; height: 200px; border: 10px solid #000; padding: 20px; border-image: url('./../juejin.png') ;

通过图片我们会发现：

1. 我们给边框设置的黑色并没有生效。

2. border-image的宽度和border的宽度保持一致。

3. 如果不设置border的宽度，border-image也就没有宽度，即使你设置了border-image-width:也是没有作用的。（border-image-width下面会介绍，莫急！）

border-image-slice

规定图片剪裁位置

没有单位，专指像素。默认单位是像素(px)了。例如：border-image:urlurl('./../juejin.png') 30 repeat;这里的30就是30像素支持百分比值，百分比值大小事相对于边框图片而言，假设边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。可以接收单值，两个值

下面是个人的理解方式，可能说法不太正确

我们可以想象有四根线，top right bottom left,这四根线都有一个值：

top距离boder上面的距离，right距离border右边的距离

bottom距离border下面的距离，left距离border左边的距离

然后的根据这个值裁剪出来的内容一次对应到元素上

一个值；

border-image-slice: 30%;

一个值：四条线的距离都是一样的。

两个值

border-image-slice: 10% 30%;

top和bottom是10%

left和right是30%