边框、圆角与阴影 - CSS 教程

讲解

边框的简写是 border: 宽度样式颜色，其中「样式」（solid、dashed、dotted、double 等）是必须的——只写 border: 2px red 整条声明无效，因为样式缺省是 none。可以拆开写 border-width、border-style、border-color，也可以单边设置 border-top: 1px solid #ddd。注意边框会占用盒模型空间（border-box 下向内挤压内容），两个 1px 边框的元素并排时交界处会变成 2px，常用 margin-left: -1px 或只给一个方向加边框来解决。

border-radius 设置圆角，值可以是长度或百分比：border-radius: 8px 四角统一；border-radius: 50% 在正方形上得到正圆、在矩形上得到椭圆角（头像、胶囊按钮的标配）；也可以四角分别写 border-radius: 8px 0 0 8px（左上、右上、右下、左下顺时针）。给圆角容器里的图片裁角，图片自己不会跟随圆角，需要容器加 overflow: hidden 或给图片也设同样的 radius。

与边框相关但独立于盒模型的还有两样：outline（轮廓）不参与布局、不撑开盒子，默认跟随圆角，常用于键盘焦点提示——永远不要 outline: none 而不提供替代焦点样式，那是无障碍灾难；box-shadow 设置投影，语法是 offset-x offset-y 模糊半径扩散半径颜色，加 inset 变内阴影，可以逗号分隔叠加多层。阴影不占用布局空间，做卡片悬浮感、层级感全靠它。

示例

/* 标准卡片：边框 + 圆角 + 柔和投影 */
.card {
  border: 1px solid #e9ecef;
  border-radius: 12px;
  box-shadow:
    0 1px 3px rgb(0 0 0 / 8%),
    0 4px 12px rgb(0 0 0 / 6%); /* 双层阴影更自然 */
}

/* 圆形头像与胶囊按钮 */
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.pill {
  border-radius: 999px; /* 超大值恒为胶囊，不依赖具体高度 */
  padding: 6px 16px;
  background: #e7f5ff;
}

/* 焦点轮廓：看得见但不撑布局 */
.button:focus-visible {
  outline: 2px solid #1c7ed6;
  outline-offset: 2px;
}

/* 圆角容器裁图 */
.cover {
  border-radius: 12px;
  overflow: hidden; /* 图片四角跟随容器圆角 */
}

常见坑

border 漏写样式：border: 1px #ccc 是无效声明（样式默认 none），必须带 solid 等关键字。
用 border 模拟焦点态撑动布局：focus 时加 border 会让元素尺寸跳变，改用 outline 或 box-shadow 就不会影响布局。
图片不跟随圆角：给容器设了 border-radius 图片四角还是方的，缺了 overflow: hidden（或给 img 自身设 radius）。
阴影参数顺序乱记：offset-x、offset-y 在前两个位置且必须写，blur、spread、颜色在后；想要「发光」效果就 offset 设 0 加大 blur。
border-radius: 50% 用在非正方形上想要正圆：50% 是相对各自身宽高，长方形会得到椭圆。正圆的前提是先有正方形（可用 aspect-ratio: 1 保证）。

小结

border 必须带样式；border-radius 做圆角、正圆和胶囊；outline 不占布局、别删焦点样式；box-shadow 可多层叠加且不占空间。下一章处理页面上最多的内容——文字排版。