背景画在盒子内、边框贴着盒子边、阴影往盒子外扩

background-size：同一张图，四种占位

auto（原尺寸，从左上开始平铺）
cover：铺满且不变形，可能裁掉
contain：完整显示，可能留白
30px 20px：显式尺寸
.hero { background-image: url(hero.jpg); background-size: cover; background-position: center; }

background-position 与 repeat

top left
center
80% 30%（百分比是「图上 80% 处对齐容器 80% 处」，不是距左 80%）

repeat / repeat-x / repeat-y / no-repeat / space（整数倍铺开不裁切）/ round（拉伸到整数倍）。

多层背景：先写的在上面

三层叠加：高光径向 + 斜纹 repeating + 底层 135° 渐变。background-blend-mode 可逐层指定混合方式。
.layers {
  background-image: radial-gradient(...), repeating-linear-gradient(...), linear-gradient(...);
  background-size: auto, auto, 100% 100%;   /* 每层用逗号分别给值 */
  background-position: 0 0;                  /* 只写一个值时所有层共用 */
}

渐变：背景的一种图片值

linear-gradient(90deg, …) 平滑过渡
同色标写两次 = 硬切，做进度条/双色块
radial-gradient
repeating-linear-gradient 做条纹/斑马线

锥形渐变 conic-gradient、圆环 from 45deg at 50% 50% 见第十九章视觉进阶。

边框与圆角

solid
dashed（虚线，注意 dotted 在奇数宽度下会不规整）
double：宽度小于 3px 时两条线会糊在一起
只强调左边：卡片左侧色条
border-radius: 999px → 胶囊
四角不同：12px 4px 12px 4px（顺序：左上 右上 右下 左下）
/* 边框占位：它属于盒子的一部分（border-box 下从 width 里扣），改边框宽度会挤动内容。
   想「加粗但不改动布局」用 outline 或 inset 阴影代替。 */
.card:hover { border-color: #0969da; }        /* 只换色不换宽，避免布局跳动 */

box-shadow：外阴影 / 内阴影 / 描边式阴影

0 1px 2px 贴合的浅阴影
两层叠加：近处锐利 + 远处扩散，接近真实光照
inset 内阴影，做凹陷/描边
6px 6px 0 无模糊 = 硬阴影，复古/新粗野风
/* 语法：inset? offset-x offset-y blur? spread? color */
.btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,.16); }
/* 用阴影做 1px 描边（不占布局）：inset 0 0 0 1px */
.tile { box-shadow: inset 0 0 0 1px #d0d7de; }
/* 性能：阴影会影响重绘成本，动画里优先动 opacity/transform，别动 box-shadow */

outline 与阴影的分工

outline 不占空间、始终是矩形（不吃 border-radius 的旧引擎除外）

结论：焦点环用 outline（可偏移、不挤压布局），装饰用 box-shadow（能跟随圆角、可多层）。永远不要写 outline: none 又不补替代焦点样式。

一个细节：背景跟随滚动还是钉住

background-attachment: scroll（默认）背景随内容盒移动但不跟随滚动条。

滚下来看顶部那条蓝色渐变的差别 →

background-attachment: local 背景跟内容一起滚，所以滚动到最底部时顶部留白会跟着走。

同样滚一遍对比。