标签：box web repeat 示例 image 九宫格 width https border
说明:
原理是利用 border-image 对图片的切割四刀（上右下左），形成九宫格。 做这种功能，首先需要找出特殊的不变的地方，然后再找出重复的地方。 不变的地方通常是头尾（要么是左右，要么是上下），重复的地方必定是中间内容区域（fill）。
示例1：
<style>
.app {
width: max-content; /* fit-content */
min-width: 331px;
height: 92px;
padding: 0 80px 0 50px;
box-sizing: border-box;
border-image-source: url('https://lee-1255983702.cos.ap-guangzhou.myqcloud.com/16493477783361.png');
/* 思路1：传统九宫格，上下左右都切，就是中心区域无限延伸 */
/* border-image-slice: 29 154 20 154 fill; */
/* border-image-width: 29px 154px 20px 154px; */
/* 思路2：只切左右，不切上下 */
border-image-slice: 0 154 0 154 fill;
border-image-width: 0 154px 0 154px;
border-image-repeat: repeat;
}
.content {
/* 为了使用 max-content/fix-content 内容区域最好不要使用绝对定位失去块特征、失去宽度 */
position: relative;
text-align: center;
top: 40px;
}
</style>
<body>
<div class="app">
<div class="content">Lorem ipsum dolor sit amet</div>
</div>
</body>
示例2：
<style>
.app {
width: 456px;
min-height: 320px;
box-sizing: border-box;
border-image-source: url('https://lee-1255983702.cos.ap-guangzhou.myqcloud.com/1649347819653bcard.png');
/* 只切上下两个区域 */
border-image-slice: 40 0 40 0 fill;
border-image-width: 40px 0 40px 0px;
border-image-repeat: repeat;
}
</style>
<body>
<div class="app"></div>
</body>
示例3：
<style>
.app {
width: 456px;
min-height: 393px;
box-sizing: border-box;
border-image-source: url('https://lee-1255983702.cos.ap-guangzhou.myqcloud.com/1649347861622rcard.png');
/* 只切上下两个区域 */
border-image-slice: 40 0 40 0 fill;
border-image-width: 40px 0 40px 0;
border-image-repeat: repeat;
}
</style>
<body>
<div class="app"></div>
</body>
参考资料：
- https://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/
- https://blog.csdn.net/huhaha24/article/details/81059484
- https://zhuanlan.zhihu.com/p/29472601
- https://www.jianshu.com/p/fee55621cd3b
标签：box,web,repeat,示例,image,九宫格,width,https,border 来源： https://www.cnblogs.com/CyLee/p/16115052.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。