CSS 背景与边框

深入理解 CSS 背景的完整属性体系、border-radius 的各种写法、border-image 九宫格切片机制、box-shadow 的多层叠加，以及 background-image 和渐变的组合使用。

YouTubeGoogle

CSS 背景与边框

为什么背景和边框是 UI 设计的基石

无论是简单的卡片阴影、圆角按钮，还是复杂的渐变叠加、多图层背景——这些现代 UI 的基础视觉效果都离不开 CSS 背景和边框属性。

理解这些属性不只是知道 background-color 和 border-width 的用法。你需要理解多重背景的叠加顺序、border-radius 的斜杠语法、border-image 的九宫格切片机制、以及 box-shadow 的多层叠加规则。这些细节决定了你在实现设计稿时的准确程度。

面试定位：背景和边框在面试中不常单独考察，但在实际 UI 开发中非常重要。候选人需要展示对 CSS 图形渲染机制的深层理解，而非只会使用简单的 background: red 和 border: 1px solid black。

background 完整属性体系

简写属性

.background {
  background-color: #f0f0f0;
  background-image: url('image.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-origin: padding-box;
  background-clip: border-box;

  /* 简写（常用） */
  background: #f0f0f0 url('image.png') center/cover no-repeat;
}

背景属性的详解

background-color

.bg-color {
  background-color: #ff0000;         /* 关键字 */
  background-color: rgb(255, 0, 0);  /* RGB */
  background-color: rgba(255, 0, 0, 0.5); /* RGBA（半透明） */
  background-color: hsl(0, 100%, 50%); /* HSL */
}

background-image

.bg-image {
  /* 单张图片 */
  background-image: url('image.png');

  /* 多张图片（按顺序叠加，第一层在最上层） */
  background-image:
    url('foreground.png'),
    url('middle.png'),
    url('background.png');
}

background-size

.bg-size {
  background-size: 100px 100px;     /* 具体尺寸 */
  background-size: 50% 50%;        /* 相对背景区域的百分比 */
  background-size: cover;          /* 覆盖整个区域，可能裁剪 */
  background-size: contain;        /* 完整显示，可能留白 */
  background-size: auto;           /* 保持原始尺寸 */
}

background-position

.bg-pos {
  background-position: center;         /* 关键字 */
  background-position: top left;      /* 组合关键字 */
  background-position: 50% 50%;        /* 百分比 */
  background-position: 100px 200px;   /* 具体坐标 */
  background-position: bottom 10px right 20px; /* 混合语法 */
}

多重背景的叠加顺序

.multi-bg {
  background-image:
    url('top-layer.png'),   /* 最上层 */
    url('middle-layer.png'),
    url('bottom-layer.png'); /* 最下层 */

  background-color: #f0f0f0; /* 始终在最下层 */
}

叠加顺序图示：

视觉结果（上到下）：
┌─────────────────────┐
│   top-layer.png     │ ← 最后声明，在最上层
├─────────────────────┤
│   middle-layer.png  │
├─────────────────────┤
│   bottom-layer.png  │
├─────────────────────┤
│   #f0f0f0 (颜色)    │ ← 始终在最下层
└─────────────────────┘

渐变背景

linear-gradient

.linear {
  /* 基本用法 */
  background: linear-gradient(red, blue);

  /* 方向控制 */
  background: linear-gradient(to right, red, blue);        /* 从左到右 */
  background: linear-gradient(to bottom right, red, blue); /* 从左上到右下 */
  background: linear-gradient(45deg, red, blue);           /* 角度控制 */

  /* 多色渐变 */
  background: linear-gradient(to right, red, orange, yellow, green);

  /* 色标（颜色停止点） */
  background: linear-gradient(to right, red 0%, blue 50%, green 100%);
  background: linear-gradient(to right, red 0%, blue 30%, green 70%, blue 100%);
}

radial-gradient

.radial {
  /* 从中心向外扩散 */
  background: radial-gradient(red, blue);

  /* 圆形 vs 椭圆 */
  background: radial-gradient(circle, red, blue);          /* 正圆 */
  background: radial-gradient(ellipse, red, blue);          /* 椭圆 */

  /* 位置控制 */
  background: radial-gradient(circle at top left, red, blue);
  background: radial-gradient(circle at 30% 40%, red, blue);

  /* 色标 */
  background: radial-gradient(circle, red 0%, yellow 50%, blue 100%);
}

conic-gradient（锥形渐变）

.conic {
  /* 从中心点向外辐射的角度渐变 */
  background: conic-gradient(red, yellow, green, red);

  /* 带起点的锥形渐变 */
  background: conic-gradient(from 0deg at 50% 50%, red, yellow, green, red);

  /* 饼图效果 */
  background: conic-gradient(
    red 0deg 90deg,
    yellow 90deg 180deg,
    green 180deg 270deg,
    blue 270deg 360deg
  );
}

重复渐变

.repeating-linear {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 10px,
    blue 10px,
    blue 20px
  );
}

.repeating-radial {
  background: repeating-radial-gradient(
    circle,
    red,
    red 10px,
    blue 10px,
    blue 20px
  );
}

border-radius 详解

基本语法

.radius {
  /* 单值：四个角相同 */
  border-radius: 10px;

  /* 双值：左上+右下、右上+左下 */
  border-radius: 10px 20px;

  /* 三值：左上、右上+左下、右下 */
  border-radius: 10px 20px 30px;

  /* 四值：左上、右上、右下、左下 */
  border-radius: 10px 20px 30px 40px;
}

斜杠语法

/* 斜杠前：水平半径
 * 斜杠后：垂直半径
 * 允许创建不对称圆角 */
.asymmetric {
  /* 水平 20px，垂直 10px */
  border-radius: 20px / 10px;

  /* 四个角不同 */
  border-radius: 10px 20px / 30px 40px;
  /* 等价于：
   * border-top-left-radius: 10px 30px;
   * border-top-right-radius: 20px 40px;
   * border-bottom-right-radius: 10px 30px;
   * border-bottom-left-radius: 20px 40px;
   */
}

百分比写法

.percent {
  /* 相对于元素尺寸计算 */
  border-radius: 50%;       /* 正圆/正椭圆 */
  border-radius: 50% 50% 0 0; /* 上方圆角，下方直角 */
}

border-image 九宫格切片

完整语法

.border-img {
  /* 简写 */
  border-image: source slice / width / outset repeat;

  /* 实际示例 */
  border-image: url('border-image.png') 30 / 15px / 0 stretch;
}

九宫格原理

切片示意图：
┌─────┬─────┬─────┐
│  1  │  2  │  3  │
├─────┼─────┼─────┤
│  4  │  5  │  6  │
├─────┼─────┼─────┤
│  7  │  8  │  9  │
└─────┴─────┴─────┘

1, 3, 7, 9: 角落区域，不拉伸
2, 4, 5, 6, 8: 边缘和中心区域，可拉伸

stretch vs repeat vs round

/* stretch（默认）：拉伸边缘区域 */
border-image: url('border.png') 30 stretch;

/* repeat：平铺边缘区域（可能截断） */
border-image: url('border.png') 30 repeat;

/* round：平铺并自动调整尺寸以完整填充 */
border-image: url('border.png') 30 round;

box-shadow 多层叠加

基本语法

.shadow {
  /* 基础投影 */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

  /* 扩展半径和模糊半径 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

  /* 内阴影 */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

投影参数

.shadow-params {
  /* offset-x: 水平偏移
   * offset-y: 垂直偏移
   * blur-radius: 模糊半径（可选）
   * spread-radius: 扩展半径（可选）
   * color: 颜色（可选）
   */

  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2);
  /*       ↑    ↑    ↑    ↑
   *      偏移 偏移 模糊 扩展
   */
}

多层阴影叠加

.multi-shadow {
  /* 多层阴影按顺序叠加（前面的在上层） */
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),    /* 第一层 */
    0 10px 20px rgba(0, 0, 0, 0.1),   /* 第二层 */
    0 20px 40px rgba(0, 0, 0, 0.1);  /* 第三层 */
}

实际应用

/* 卡片阴影 */
.card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

.card:hover {
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.12);
}

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

/* 发光效果 */
.glow {
  box-shadow:
    0 0 5px rgba(255, 255, 255, 0.5),
    0 0 20px rgba(255, 255, 255, 0.3),
    0 0 30px rgba(255, 255, 255, 0.2);
}

实战场景

场景一：渐变背景按钮

.gradient-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.gradient-btn:hover {
  background: linear-gradient(135deg, #7b8ff0, #8a5cb8);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

场景二：圆角卡片

.rounded-card {
  background: white;
  border-radius: 16px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.05),
    0 10px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden; /* 确保子元素不超出圆角 */
}

场景三：网格背景

.grid-bg {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

延展阅读