一、遇到的问题在开发工作中，经常会涉及到背景的设置，比如弹窗、下拉框、提示框等，下图展示了问题，然后详细列出了问题涉及到的地方。我手绘了一点对不起！比如设计师为我们设计了一个下拉框背景。-->Normal：就是给我们设计的，比例看起来很舒服，黑色的边角可以想象成装饰品。-->Stretching：实际场景中，谁也不知道会出现多少选项，所以这个下拉框可能会被拉得很长，随着整体被拉长，四个黑色的角也会被拉长。毕竟，伸长率是图片的一部分。-->期望：我们真正想要的效果，四个角的大小比例应该不变，但中间部分要拉长。之前也遇到过背景图在iphonex2上被拉到面目全非的场景解题思路初步分析之所以会出现这种问题，是因为这张图是一个整体，如果是的话必须一起改被改变了。想到的第一个方法：ui给我的，在中间，图片的下三部分，然后我把它们拼接在一起，上下固定，中间自适应高度。如果剩下的问题变成下拉框内容太长，需要水平拉伸，那ui会不会给我？左图，中图，右图？？？每次给3张图很不方便。代码不容易写。3.神奇的border-image看字面的border-image边框图，然后你就会想到，比如topborder的高度和dom元素的高度一样，那么topborder上的image会是dom元素的背景图片，就是玩个把戏。但是设置border-image肯定是不够的，真正厉害的是他的两个A属性#####border-image-width#####border-image-slice是我去学习的时候才这个border-image的相关属性让我意识到它有多么神奇。我觉得我对这个属性有一个详细的答案。自己不一定会做，详细的内容可以自行百度了解。让我解释一下干巴巴的理解：border-image-slice:10101010;（默认没有单位的px，因为是针对原图的，所以不需要考虑外界因素）整张图片一共分为四格，变成了9个区域如图：'图中相当于装饰，切割顺序为上、右、下、左，对应一刀、二刀、三刀、四刀。裁剪后可以指定四个角的宽度，使其不随整体宽高的变化而变化，border-图像切片：10px10px10px10px;.4.上面第9点只是说明了理论上的可行性，那么这些想法的实现还需要ui同学的配合。点9是andriod平台的应用软件开发的一种特殊形式的图片，这也是我换一个新岗位的时候，收到了所谓的点9图片，于是赶紧百度了一下解惑。简单理解就是dot9图片也指出了上面提到的“四刀”的具体切割位置，它也把图片分成了9个部分，这和我们前面说的不谋而合。第9点比较重要的一点就是指出UI想要的切割位置！5.出现一条细白线细白线是“点9图”的一个小bug，如图显示4刀的图案.这个画风太丑了。第一次遇到这个问题，也没找到很多好的解决方法，后来请教了我们的负责人才明白。6.要“解决”，先需要测量他的“四把刀”的宽度，测量原图即可附加属性border-image-slice:12341234fill;border-image-width:12px34px12px34px;改变宽高也是“easy”，不会有白色细线，为什么说“easy”，因为在实际开发中，comp不同分辨率的uter还是有可能会有点线的，暂时没找到100%的解决办法。七。回顾与进步上述仍存在不足之处。想要做的完美，必须要有UI的配合，前端更智能的测量，比如我可以做一个自动生成上传img边框相关属性的小插件也很不错，但是我们公司以后会统一处理这个问题，所以我们就不用一个一个经历这样的麻烦了，说不定公司会在ui下发img的时候，处理在一个统一方式。总结：一些相对冷门的属性可能有一天会大放异彩，只有不断扩充自己的知识面才能更好的解决实际问题。快点！终身学习。
