滑动门效果是CSS三段式背景合成技术，用伪元素+渐变实现左/右圆角与中间平铺分离，避免单图拉伸导致的像素化、阴影错位等问题。
滑动门效果不是动效，也不是 JavaScript 控制的“滑动”，它纯粹是 CSS 背景资源的分段合成策略——用三段背景（左圆角、右圆角、中间平铺）撑起可变宽的文字容器，避免拉伸失真。现代实现已完全脱离图片切片，靠伪元素 + linear-gradient + background-clip 就能搞定。
为什么不能直接用单张背景图拉伸？
直接给 a 或 button 设置一张带圆角的 PNG 作为 background-image，再设 background-repeat: stretch，结果只会：圆角像素化、阴影错位、内边距不一致、暗色模式下渐变断裂。浏览器对 background 的拉伸没有语义控制能力，它只做无脑插值缩放。
常见错误现象包括：
- 文字加长后按钮两端“鼓包”，圆角被横向拉成椭圆
- hover 时背景闪烁或重绘延迟（尤其在 Safari 中）
- 使用
border-radius叠加背景图时，圆角裁剪区域和背景绘制区域不重合
::before + ::after 伪元素实现三段式背景
核心思路：主元素负责中间平铺区，两个伪元素分别覆盖左右端，各自承载圆角+阴影等不可伸缩部分。这样文字增减只影响主元素宽度，伪元素尺寸固定不动。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
关键实操点：
- 主元素设
position: relative，伪元素用position: absolute定位 - 左伪元素
left: 0，右伪元素right: 0，宽度统一设为16px（适配常见圆角） - 中间区域用
padding-left: 16px和padding-right: 16px避免文字被伪元素遮挡 - 所有背景用
linear-gradient生成，比如左端：background: linear-gradient(90deg, #3b82f6, #1d4ed8)
示例片段：
nav a {
position: relative;
display: inline-block;
padding: 8px 16px;
color: white;
text-decoration: none;
}
nav a::before,
nav a::after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 16px;
}
nav a::before {
left: 0;
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
nav a::after {
right: 0;
background: linear-gradient(270deg, #3b82f6, #1d4ed8);
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
兼容性与性能要注意的几个坑
伪元素方案在 Chrome/Firefox/Safari 15.4+ 都没问题，但 IE11 及更早版本不支持 background: linear-gradient 在伪元素上生效，且 border-radius 渲染有偏差。若必须兼容 IE，得回退到传统 span 嵌套 + 图片 sprite 方案。
性能方面容易被忽略的点：
- 避免在伪元素上叠加多层
box-shadow，会触发全层重绘；改用单层filter: drop-shadow() - 不要给伪元素设
transition: all，hover 时只过渡background-color或transform - 移动端 Safari 对
background-clip: text+ 伪元素组合渲染不稳定，慎用于标题类导航
真正难的不是写出来，而是让三段背景在高 DPI 屏、缩放 125%、暗色模式切换、字体加载完成前后，始终严丝合缝对齐——这需要反复检查 background-position、padding 和伪元素 width 的像素级一致性，而不是依赖“差不多”。
