HTML横向导航条滑动门效果制作教程-html教程-PHP中文网

滑动门效果是CSS三段式背景合成技术，用伪元素+渐变实现左/右圆角与中间平铺分离，避免单图拉伸导致的像素化、阴影错位等问题。

html横向导航条滑动门效果制作教程

滑动门效果不是动效，也不是 JavaScript 控制的“滑动”，它纯粹是 CSS 背景资源的分段合成策略——用三段背景（左圆角、右圆角、中间平铺）撑起可变宽的文字容器，避免拉伸失真。现代实现已完全脱离图片切片，靠伪元素 + linear-gradient + background-clip 就能搞定。

为什么不能直接用单张背景图拉伸？

直接给 a 或 button 设置一张带圆角的 PNG 作为 background-image，再设 background-repeat: stretch，结果只会：圆角像素化、阴影错位、内边距不一致、暗色模式下渐变断裂。浏览器对 background 的拉伸没有语义控制能力，它只做无脑插值缩放。

常见错误现象包括：

文字加长后按钮两端“鼓包”，圆角被横向拉成椭圆
hover 时背景闪烁或重绘延迟（尤其在 Safari 中）
使用 border-radius 叠加背景图时，圆角裁剪区域和背景绘制区域不重合

`::before` + `::after` 伪元素实现三段式背景

核心思路：主元素负责中间平铺区，两个伪元素分别覆盖左右端，各自承载圆角+阴影等不可伸缩部分。这样文字增减只影响主元素宽度，伪元素尺寸固定不动。

关键实操点：

DeepBI DHTML 页面生成器

生成可在 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 方案。

性能方面容易被忽略的点：