都5202年了，你不会还只知道用border做边框吧？在 CSS 世界里，边框不只是 border 一条路。你可能一直用

在 CSS 世界里，边框不只是 border 一条路。你可能一直用 border 写边框，hover 时元素宽度变化、渐变边框做不出来……其实，现在有更酷、更灵活的方式来实现边框效果。今天我们就来盘一盘——都有哪些边框“新玩法”，以及什么时候用它们最合适。

1️⃣ 传统 border

.element {
  border: 2px solid #0d98ff;
  border-radius: 12px;
}

优点：

简单直接，兼容性最好
可控边宽、样式、颜色

缺点：

不支持渐变、阴影等复杂效果
hover 动态变化会影响元素大小（因为 border 会占空间）

✅ 适用场景： 简单实用，没特别设计需求时首选。

2️⃣ outline

.element {
  outline: 2px solid #0d98ff;
}

优点：

不占用元素空间
用于 focus、hover 提示很方便

缺点：

只能是单色，无法圆角或渐变
样式比较简单

✅ 适用场景： 边框高亮、可访问性提示（例如表单聚焦时的高亮效果）。

3️⃣ box-shadow

.element {
  box-shadow: 0 0 0 2px #0d98ff;
  border-radius: 12px;
}

优点：

不占用空间，可以叠加多层
可以配合透明度或伪元素实现渐变边框效果

缺点：

单独 box-shadow 不能直接使用渐变
调整厚度或位置需要调 spread

✅ 适用场景： 想要内外发光、渐变或阴影边框效果。

4️⃣ 伪元素 + 背景/渐变

.element {
  position: relative;
  border-radius: 12px;
}

.element::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #0d98ff, #0b56a2);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.2s ease-in-out;
}

优点：

支持渐变、动画、虚化等高级效果
不影响元素内容和布局

缺点：

代码稍复杂
兼容性需要注意 -webkit-mask 和 mask-composite

✅ 适用场景： 想要炫酷渐变边框、hover 动画，完美解决传统 border 的局限。

💡 小技巧：用伪元素控制边框，hover 只改变伪元素背景，不会让元素宽度跳动。

更详细介绍请看： juejin.cn/post/753800…

5️⃣ background-clip + box-sizing 实现背景渐变边框

.box {
  box-sizing: border-box; /* 保证边框不撑开元素大小 */
  border: 5px solid transparent;
  border-radius: 12px;
  background: 
    linear-gradient(white, white) padding-box,  /* 内容区背景 */
    linear-gradient(45deg, red, blue) border-box; /* 渐变边框 */
  padding: 16px 24px;
  font-size: 16px;
  text-align: center;
}

等价于：

.box {
  box-sizing: border-box;
  border: 5px solid transparent;
  border-radius: 12px;

  background-image: 
    linear-gradient(white, white),
    linear-gradient(45deg, red, blue);

  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  
  padding: 16px 24px;
  font-size: 16px;
  text-align: center;
}

background可以同时设置多个属性，顺序不限：

background: <color> <image> <position>/<size> <repeat> <origin> <clip> <attachment>;

代码解读：

box-sizing: border-box;
- 控制宽高计算方式。
- 宽/高 = 内容 + padding + border，一起算在内。
- 避免渐变边框因为透明 border 而撑开元素大小。
border: 5px solid transparent;
- 给元素设置一个透明的边框，用来“预留”渐变边框的显示区域。
linear-gradient(white, white) padding-box
- 第一层背景，范围裁剪到 padding-box（内容 + 内边距，不包含边框区域），这里填充白色。
- 作用：确保内容区背景是统一的，不会被渐变干扰。
linear-gradient(45deg, red, blue) border-box
- 第二层背景，范围裁剪到 border-box（包含边框），实现红蓝渐变。
- 由于边框本身透明，这层渐变只会出现在边框区域，看起来像“渐变边框”。

优点：

原生 CSS 属性实现，写法简洁，不依赖伪元素。
性能好，浏览器渲染直接利用背景绘制机制。
代码可读性强，一眼能看出逻辑。
搭配 box-sizing: border-box，避免尺寸跳动

缺点：

灵活度有限，不支持复杂的边框动画/虚化。
如果内容区也需要复杂背景（渐变/图片），需要额外技巧来避免冲突。

✅ 适用场景：
需要一个 简单的渐变边框，并且内容区背景纯色或可控。

💡 小技巧：
如果想做 Hover 动画，可以只修改第二层背景的渐变：

.box:hover {
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(90deg, #0d98ff, #0b56a2) border-box;
}

🔹 总结推荐

需求类型	推荐方式
简单实用	`border`
临时高亮或 focus 提示	`outline`
内外发光 / 柔和边框效果	`box-shadow`
炫酷渐变/hover 动画	伪元素 + `gradient`/`mask`
简单快速渐变边框	`background-clip + box-sizing`

🔑 小结

border 太单调？用伪元素 + 渐变来实现炫酷边框。
hover 想要平滑过渡？用伪元素控制边框，而不是改变 border 宽度。
想让元素更灵动、更有层次？box-shadow + 透明度组合，让边框效果丰富。
想简单快速实现渐变边框？background-clip + box-sizing了解一下。

都5202年了，是时候让你的边框也跟上潮流了。💥

感谢白色小猫Zee同学的补充ｂ(￣▽￣)ｄ。也欢迎其他小伙伴来补充！！！