原创 德莱厄斯 2025-06-30 08:30 重庆
前言一些游戏中的窗口通常都有一些炫酷的效果....
「四个角（TL, TR, BL, BR）」 ：固定尺寸，「不缩放」，用来保持 UI 的边角样式（圆角、高光、装饰等）。「四条边（Top, Bottom, Left, Right）」 ：只在一个方向拉伸：Top/Bottom 水平拉伸Left/Right 垂直拉伸「中心区域（Center）」 ：在 「水平和垂直方向都可以拉伸」，填满剩下的空间。不得不说，发明九宫格缩放的人就是个天才，这大大减少了美术资源用量。聪明的你肯定联想到了你那睿智的 UI 同事，他也总是给你一些让你抓耳挠腮的背景图，让你在使用时总是有图片拉伸变形的问题。那么前端有没有类似的用法呢？有的兄弟有的哦？你以为我又要介绍某个 auto 系列插件是吗？还真让你猜错了，今天我要说的是几个 CSS 属性。它们分别是：border-image-sourceborder-image-sliceborder-image-repeat通过这三个属性，就可以做到让图片做到不变形的拉伸效果。现在拿一个图片举例可以看到，我拿红线将在此图上花了一个井字形，这个井字可不是随便画的，它大有来头，它标记了我允许它形变的地方，和保持不变的地方。这样四个角将会保持我们目前看到的样子（原始比例），当图片宽度或高度改变时，只会改变可拉伸区域的表现。这张图片的原始尺寸是 1064*141，且上面的截图是以原始尺寸展示的。从此图来看（梯形），它大概率要承受比它更长或更短的内容，目测一下，可以看到右上角、左上角的不允许形变区域大概是 50px、而左右不允许形变区域大概是 200px、由于这张梯形图且不考虑上下拉伸，所以下面则不能设置固定部分，否则会使左右两边发生断层（有时斜率不一致）。所以我们这么写╔════╦═══════╦════╗
║ TL ║ Top ║ TR ║
╠════╬═══════╬════╣
║ L ║Center ║ R ║
╠════╬═══════╬════╣
║ BL ║ Bottom║ BR ║
╚════╩═══════╩════╝
我们将正常的边框属性按照刚刚目测的数值写成这样，现在看起来无事发生，因为边框是透明的。那么我们接着写：.frame-container {
/* 1. 先设定边框宽度（上 右 下 左）*/
border-width: 50px 200px 0px 200px;
border-style: solid;
border-color: transparent; /* 透明即可，边框颜色会被 image 覆盖 */
}
这里为了方便演示，我们将容器大小设置为图片的原始大小，目前的效果看起来有点奇怪，左右两边看起来被折断了。.frame-container {
/* 1. 先设定边框宽度（上 右 下 左）*/
border-width: 50px 200px 0 200px;
border-style: solid;
border-color: transparent; /* 透明即可，边框颜色会被 image 覆盖 */
/* 2. 指定 border-image 源图片 */
border-image-source: url('./a.png');
/* 为了演示，就给它一个动态宽度和高度 */
width: 1064px;
height: 141px;
/* 3. 指定 slice，也就是按 30px / 10px / 20px / 15px 把图片分成 9 块 */
border-image-slice: 50 200 0 200 fill;
}
加上 box-sizing: border-box; 图片看起来正常多了，我还加了其他必须的代码，现在这张图已经具备我们开头说的能力了。加一个 hover 简单看一下：.frame-container {
/* 1. 先设定边框宽度（上 右 下 左）*/
border-width: 50px 200px 0 200px;
border-style: solid;
border-color: transparent; /* 透明即可，边框颜色会被 image 覆盖 */
/* 2. 指定 border-image 源图片 */
border-image-source: url('./a.png');
/* 为了演示，就给它一个动态宽度和高度 */
width: 1064px;
height: 141px;
/* 3. 指定 slice，也就是按 30px / 10px / 20px / 15px 把图片分成 9 块 */
border-image-slice: 50 200 0 200 fill;
/* 4. 指定拉伸（stretch）——
上边/下边 拉伸水平；左边/右边 拉伸垂直；中间那块自由拉伸/填充 */
border-image-repeat: stretch;
transition: 1s;
/* 5. 你可以给中间区域再加个背景，比如纯白或者另一张图 */
background-color: white;
/* 如果想用内容图，也可以启用下面这行： */
/* background: url("content.png") no-repeat center/cover; */
box-sizing: border-box; /* 确保 width/height 包括 border */
}
总结通过上面的演示，可以发现，通过这种方式可以实现横向纵向（取决于图片异形，有的只能横向，有的只能纵向，有的横纵都可）的不变形拉伸。学会了这招，再也不用向 UI 要多张切图、拆分切图了，还不谢谢我。/* 鼠标移进去改变尺寸，看看效果，模拟内容变少 */
.frame-container:hover {
width: 400px;
height: 141px;
}
AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding
点击"阅读原文"了解详情~
