CSS 边框与轮廓

边框（border）是元素边界上可见的线条，轮廓（outline）是元素外围不占空间的描边。此外 box-shadow 也能在视觉上创造类似边框的效果。

border — 边框

边框有三个子属性：宽度、样式、颜色：

css 
.box {
  border-width: 2px;
  border-style: solid;
  border-color: #e2e8f0;
}

简写

css 
.box {
  border: 2px solid #e2e8f0;
  /*    宽度  样式  颜色 */
}

border-style 样式

值效果
solid实线（最常用）
dashed虚线
dotted点线
double双实线
groove凹槽（3D 效果）
ridge脊线（3D 效果）
inset内陷（3D 效果）
outset外突（3D 效果）
none无边框
hidden隐藏（用于表格合并）
css 
.solid { border: 2px solid #e2e8f0; }
.dashed { border: 2px dashed #94a3b8; }
.dotted { border: 2px dotted #94a3b8; }

border-style 是必选项——如果没有指定样式，边框不会显示，哪怕设置了 border-width 和 border-color。

分方向设置

可以分别为四个边设置边框：

css 
.card {
  border-top: 3px solid #2563eb;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  border-left: 1px solid #e2e8f0;
}

/* 只加底部边框作为分割线 */
.divider {
  border-bottom: 1px solid #e2e8f0;
}

border-radius — 圆角

将直角变为圆角：

css 
/* 统一圆角 */
.rounded {
  border-radius: 8px;
}

/* 四个角分别设置（左上 右上 右下 左下） */
.custom {
  border-radius: 8px 16px 8px 16px;
}

/* 椭圆形圆角：水平半径 / 垂直半径 */
.ellipse {
  border-radius: 16px / 8px;
}

/* 圆形 */
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

outline — 轮廓

轮廓与边框类似，但有两个关键区别：

  1. 不占空间—轮廓不影响元素尺寸和布局
  2. 不在盒模型内—轮廓绘制在边框之外
css 
/* 浏览器默认的焦点轮廓 */
input:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px; /* 轮廓与边框的距离 */
}

不要用 outline: none 去掉焦点轮廓而不提供替代方案——这会破坏键盘可访问性。如果确实需要自定义，请用 :focus-visible + 明显的替代样式。

box-shadow — 阴影

box-shadow 虽然名字是阴影，但在视觉上也能模拟边框和发光效果：

css 
/* 基础阴影 */
.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /*          x偏移 y偏移 模糊 颜色 */
}

/* 更详细的格式 */
.detail {
  box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.15);
  /*          x偏移 y偏移 模糊 扩散 颜色 */
}

/* 内阴影（inset） */
.inset {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 多重阴影 */
.multi {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 4px 10px rgba(0, 0, 0, 0.08);
}

/* 模拟边框（不占盒模型空间） */
.fake-border {
  box-shadow: 0 0 0 2px #2563eb;
}

阴影不参与盒模型计算，多次叠加阴影可以实现非常丰富的视觉效果而无须改动布局。但过度使用阴影（尤其是大模糊值）会触发浏览器的重绘开销，影响滚动性能。