自我介绍
大家好，我叫小黑，也叫小荷，目前喜欢并从事页面写作。 因为不喜欢在这些BBS之类的峰会上发帖，所以之前发表过几篇关于html-js的盖章文章，现在申请了后端观察打字员。 在这里要感谢沉飞童鞋，虽然我不明白他在做什么。 嗯~不过我选择在这里发表文章的原因是下面这句话：
中国的后端开发领域一直像一盘散沙。 每个人、每个站都独立工作。 天上有星星，大师多如牛毛，但他们的成就却很少广为流传。 在设计中找到您自己的参考。
我不是圣人，我只是表达我所学到的和所想的。 毕竟我个人的观点是有限的。 如果有什么悖论或者侮辱的地方，请投稿，大家可以在辩论中提高。 另外，也许你也想知道为什么网上有那么多学习文章，而类似的文章却要自己写下来。 我个人的看法是：只有自己实践过的人才有发言权。
那么问题来了：我的言论怎么会被指责呢？ 戳评论吧！
前言
border-image属性不再是什么新鲜事，也是一个由来已久的话题。 这是很多年前就已经出现的属性了，不过目前还比较孤单，而且似乎不被看好，但是如果深入研究的话，肯定有很多好处，只是可惜的是浏览器支持到目前为止并不比其他css3属性多，特别是IE，只有IE11及以上版本支持。 有关详细信息，请参阅边框图像兼容性。 不过还好，对正宗现代浏览器和移动浏览器的支持还是很令人印象深刻的，所以明天我会解释这个属性的各种值。
border-image总结
其实我的【border-image属性】就是用来给元素的边框添加背景图片的。 在某些情况下，使用此边框图像可以轻松勾勒出一些更复杂的小部件。 i 是 border-image-source border-image-slice border-image-widthborder-image-outsetborder-image-repeat 的缩写值。 只是为了缩写方便。 毕竟，你知道，我们的家庭边界-*有一个缩写值。 如果没有婴儿时的缩写价值，那么每个人看到它都可能会醉。
哦，对了，忘了告诉你，我的作用就是替换边框样式的值。 值得注意的是，如果border-image的值为none，那么就不会显示背景图片，同时会显示border-style的值。 然后我的详尽缩写值如下所示：
物业名称：
边框图像
价值：
|| [/| /
？ / ]? ||
初始值：
详细信息请参阅各个属性
应用于：
除表格单元格边框折叠之外的所有元素均已折叠。
是否继承:
不
百分比：
不适用
媒体：
视觉的
计算：
详细信息请参阅各个属性
动画片：
详细信息请参阅各个属性
所以，我的完整写法是
.border-image-all{ border:27px solid #000; border-image:url(/2014/09/border.png) 27 27 27 27 fill/27 27 27 27/27px 27px 27px 27px repeat;}
正如你所看到的，这正是我的缩写值之一。请不要头痛css3 内边框，虽然这是一长串各种英语短语，但你对我来说可能并不陌生。
，想想css属性里面有什么和图片相关的，反正我就想到了background属性的值。 css中引入的图像属性的属性值无非是：图像地址background-image、图像重复background-repeat、图像平铺形式background-attachment等。因此，边框图像也是类似的。 我们来一一分析那些单独的属性值。
border-image有6个属性值，分别是：图像地址border-image-source、图像剪切border-image-slice、图像长度border-image-width、图像凸border-image-outset、图像重复border-image-repeat
图片地址border-image-source属性名称：
边框图像源
价值：
无 |
初始值：
没有任何
我的名字是介绍图片地址属性。 这个属性的属性值比较容易理解，因为只有两个属性值。 初始值为无。 如果没有设置，那么我们的包边框将应用 border-style 的值； 如果你想设置一个外部链接地址的图片进来，代码可以直接提到：
.border-image{
border:20px solid #000;
border-image-source:url(border.png); //目测我会长得很丑比 ~ .~，不信你试试
}
图像切片 border-image-slice 属性名称：
边框图像切片
价值：
[|
]{1,4}
＆＆ 充满？
初始值：
没有任何
我的名字是 border-image-slice，我指定边框图像的底部、右侧、底部和左侧内部偏移量。 我没有具体的单位值。 例如，px和em不能应用到我的脸上。 您只需要给我一个简单的号码即可。 当然，你也可以按照比例给我设置。 我的作用是将边框图像分割为 9 个区域：4 个角、4 个边和一个中间部分。 前人谦虚的称之为9格，但我悄悄告诉你，不用fill也可以用。 如果选择了属性值，那么中间的第九条条纹就被视为透明并消失了，相当于哪只狗吃了中间的一条！
第一个值是数字，即纯数字以单位计量，如1、2、3……； 第二个值为百分比，即以比率为单位； {1,4} 表示以下数字至少出现一次，最多出现 4 秒，如 border-image-slice:27 border-image-slice:27 27 border-image-slice:27 27 27 border-image- slice:27 27 27 27 都是可能的，这个和margin的值类似，如果你还是不明白这个缩写值代表什么的话，不妨看一下前段时间写的一篇关于margin的缩写值的文章。 fill 是可选属性值。 如果指定，则中间的第九个块不是透明块。 如果不指定的话，将会被处理为透明图像。
你一定很好奇我是怎么工作的，即使csser指定了几个数字，但我根本不明白它是怎么工作的，所以哈哈。 所以这里是解释：
图片使用w3c指定的专用产品~一张81px的正方形位图，9个矩形图案，每个矩形图案为27*27px
左上角、右上角、右下角、左下角有4个白色矩形，顶部区域、右侧区域、底部区域、左侧区域有4个土黄色矩形，中间块（又名第九块）刚才说了，这个border-image-slice是一个切割的功能，直接把图像切割下来，中间不留任何痕迹。 如果给出这个属性值： border-image-slice: 27 27 27 27 那么它表示距底部内偏转区域 27px 处的横切
然后在距两侧内偏转区域27px处垂直切割
紧接着，在距顶部内偏转区域 27px 处进行横切
然后在距两侧内偏转区域27px处垂直切割
那么给定的图像切片 border-image-slice: 27 27 27 27 完整的动态图如下：
这几把刀把我分成了九个部分，所以我出生在九个方格里。
因此，被切割的部分分布在袋框的9个地方，如上图。 相应地，分割图像只能在border-width内移动。 这是什么意思？ 比如包的边框是border-width:54px，分割后的图片是border-image-slice:27，因为有4张图片，内角的长和高都只有27px，但是分割后的图片的边框是bag是54px，所以图片必须水平和垂直拉伸，直到剪切等于bag边框的长度，也就是27px的图片拉伸到54px才停止，然后就不行了！ 在这一点上css3 内边框，与Xin的解释有点不同，因为他认为这是视觉盲点，并且分离的内角图像只分配到帧的4个内角，并且不会平铺、重复，或者伸长沉（这一点与我说的不符），原文引用如下：
有四个角的橙红色矩形区域称为“角边界图像”。 border-image中，角边框图像没有显示效果，不会平铺、重复、拉伸。 类似于视觉盲点的含义。
为了证明我的观点，我用了两个demo来展示，
demo1：当包框的长度大于要剪切的图像的框时，如下代码
.border-image{
border:54px solid #000; //盒子边框为54px
border-image-source:url(border.png);
border-image-slice:27 27 27 27; //边框图片被切成9个区域，其中4个顶角的大小为 27*27px
}
影响：
我对此的理解是以下步骤：
详情请点击：切片值大于帧长度
demo2：当包框的长度小于要剪切的图像的框时，如下代码
.border-image{
border:14px solid #000; //盒子边框为14px
border-image-source:url(border.png);
border-image-slice:27 27 27 27; //边框图片被切成9个区域，其中4个顶角的大小为 27*27px
}
影响：
我对此的理解是以下步骤：
详情请点击：切片值小于边框间距
所以我知道的四个内角的变化可能有拉伸的功能。 当然，如果包包边框和裁剪图片的长度相等，那么这样就不会产生拉伸的效果。
谈谈填充值
填充值是可选属性值。 如果指定该值，则将出现第九区。 如果不指定的话，那么第九区将会被外星人占领并隐藏起来！ （楼下会有demo↓）
需要注意的两点：
1.切片不允许设置负值。 设置负值并设置小于袋子的高度或长度将为100%。 （楼下有demo↓）
2. 切片切割的区域可能会重叠。 如果右切和左切值之和大于或等于盒子的长度，则底部区域（5号）和顶部区域（7号）为空白（有演示↓楼下），反之亦然。
发表评论