如何使用 CSS 背景渐变实现左右不对称双线边框-html教程-PHP中文网

如何使用 CSS 背景渐变实现左右不对称双线边框

本文介绍一种纯 CSS 方案，利用多层 linear-gradient 背景替代传统边框，实现左右两侧均为双线、但其中一条线高度减半（即“一长一短”）的视觉效果，无需额外 HTML 元素或伪元素。

本文介绍一种纯 css 方案，利用多层 `linear-gradient` 背景替代传统边框，实现左右两侧均为双线、但其中一条线高度减半（即“一长一短”）的视觉效果，无需额外 html 元素或伪元素。

在标准 CSS 中，border 属性无法单独控制单侧边框的长度（如只让左侧上半部分有边框），因此直接使用 border-left/border-right 无法满足“一侧双线、且其中一线更短”的需求。解决方案是放弃依赖 border，转而用背景渐变精确绘制线条。

核心思路是：
✅ 使用两个独立的 linear-gradient 背景图像；
✅ 每个渐变仅渲染一条纯色实线（var(--c) 0 0 表示 0px 高度的单色条）；
✅ 通过 background-size 控制每条线的高度（如 var(--b) 50% 表示宽为 2px、高为容器高度 50% 的矩形）；
✅ 利用 background-position 精确定位：left 10px bottom 0 将短线置于左侧内边距 10px 处、底部对齐；right 10px bottom 0 同理定位右侧短线。

以下是完整可复用的 CSS 代码：

.double-border {
  --b: 2px; /* 边框粗细 */
  --c: #3CD5AF; /* 主色 */
  height: 100%;
  /* 移除原生左右边框，改用背景模拟 */
  border: none;
  /* 双背景：左短线 + 右短线 */
  background: 
    linear-gradient(var(--c) 0 0) left 10px bottom 0 / var(--b) 50% no-repeat,
    linear-gradient(var(--c) 0 0) right 10px bottom 0 / var(--b) 50% no-repeat;
  /* 可选：添加水平内边距避免文字紧贴线条 */
  padding: 0 1.5em;
}

⚠️ 注意事项：

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须设置 height: 100% 或明确高度（如 min-height: 200px），否则 50% 背景高度将失效；

若容器内容高度动态变化，建议配合 display: flex; flex-direction: column 或使用 aspect-ratio 保障结构稳定；

left 10px bottom 0 中的 10px 是内偏移量，可根据设计需求调整（如改为 left 15px 增大间距）；

若需“上长下短”等其他组合，只需将 bottom 0 改为 top 0 并调整 background-size 的高度百分比即可。