24张图攻克border-image.doc
版权申诉
155 浏览量
2022-07-12
11:27:09
上传
评论
收藏 466KB DOC 举报
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）属性三等分，把图片分成一个
剩余12页未读，继续阅读
资源评论
