背景与边框

CSS 背景与边框（2025-2026 实用核心知识）

1. background 属性全家桶（最常用写法）

1.1 基本写法与常用简写

/* 最常用单层背景简写 */
.background {
  background: #f8fafc url('/images/bg.jpg') center/cover no-repeat fixed;
}

/* 完整拆分（推荐用于复杂场景） */
.background {
  background-color: #f8fafc;
  background-image: url('/images/pattern.png');
  background-repeat: repeat-x;           /* repeat | repeat-x | repeat-y | no-repeat | space | round */
  background-position: center top 20px;  /* x y | 50% 20px | left bottom */
  background-size: cover;                /* cover | contain | auto | 100% 50% | 300px */
  background-attachment: fixed;          /* scroll（默认） | fixed | local */
  background-clip: border-box;           /* border-box（默认） | padding-box | content-box */
  background-origin: padding-box;        /* 与 clip 类似，但影响 background-position 起点 */
}

1.2 多重背景（2025-2026 非常流行）

/* 多层背景从上到下依次叠加，最后一层可以是颜色 */
.multi-bg {
  background:
    linear-gradient(135deg, rgba(99,102,241,0.3) 0%, transparent 50%),
    url('/images/hero-overlay.png') center/cover no-repeat,
    radial-gradient(circle at 30% 70%, #6366f1 0%, transparent 60%),
    #0f172a;
}

/* 常见组合：渐变 + 纹理 + 底色 */
.card {
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.1), transparent),
    url('/images/noise.png') repeat,
    #1e293b;
}

1.3 常用 background 技巧速查

场景	推荐写法	说明
全屏背景图	background: url() center/cover fixed	fixed 视差效果
响应式背景图	background-size: cover	自动缩放填满
渐变文字（背景裁剪）	background: linear-gradient(...) -webkit-background-clip: text; color: transparent;	常见于标题
毛玻璃效果	backdrop-filter: blur(12px) 配合 background: rgba(255,255,255,0.1)	现代感
固定背景不随内容滚动	background-attachment: fixed	经典视差

2. 边框（border）与圆角（border-radius）

2.1 边框常用写法

/* 完整写法 */
border: 2px solid #6366f1;

/* 方向拆分 */
border-top: 4px dashed #ec4899;
border-bottom: 1px solid rgba(0,0,0,0.1);

/* 颜色 + 样式 + 宽度简写 */
border: 1px solid var(--border-color);

/* 2025+ 流行：不同边不同样式 */
border-block: 2px solid #6366f1;           /* 上下（逻辑属性） */
border-inline: 1px dashed #10b981;         /* 左右 */

2.2 border-radius 高级用法

/* 基础 */
border-radius: 12px;

/* 椭圆角 */
border-radius: 50% / 50%;                  /* 完美圆形 */

/* 不同角不同半径（顺时针：左上→右上→右下→左下） */
border-radius: 16px 32px 8px 48px;

/* 只圆某几个角 */
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;

/* 超流行：iOS 风格大圆角 + 轻微内凹 */
.card {
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

3. 盒阴影（box-shadow）与内阴影

3.1 box-shadow 语法

box-shadow: h-offset v-offset blur-radius spread-radius color inset?;

/* 常用组合 */
.shadow-sm {
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.shadow-md {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.shadow-lg {
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.shadow-xl {
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

/* 彩色阴影（2025-2026 流行） */
.shadow-primary {
  box-shadow: 0 8px 32px rgba(99,102,241,0.35);
}

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

3.2 多重阴影（常见高级效果）

/* 立体感 + 发光 */
.neon {
  box-shadow: 
    0 0 10px #6366f1,
    0 0 30px #6366f1,
    inset 0 0 10px rgba(99,102,241,0.4);
}

/* 浮雕感 */
.emboss {
  box-shadow: 
    2px 2px 4px rgba(0,0,0,0.4),
    -2px -2px 4px rgba(255,255,255,0.5);
}

4. 边框图片（border-image）—— 较少用但很酷

border-image: url('/images/border.png') 27 stretch;

/* 更完整写法 */
border-image-source: url('/images/frame.png');
border-image-slice: 30;                    /* 切图尺寸（上右下左） */
border-image-width: 30px;                  /* 边框宽度 */
border-image-repeat: stretch;              /* stretch | repeat | round | space */

使用建议：
2025-2026 项目中很少使用 border-image（维护性差、难以响应式），多被渐变 + box-shadow 替代

5. 快速决策表（工作中最常问自己）

需求场景	推荐方案	备注
现代卡片阴影	box-shadow: 0 4px 12px rgba(0,0,0,0.12)	轻盈自然
强立体/拟物化	多重阴影 + inset	经典 neumorphism
发光/霓虹效果	多层 box-shadow + 相同色调	适合按钮、标题
全屏背景 + 视差	background-attachment: fixed + cover	移动端需注意性能
毛玻璃背景	backdrop-filter: blur(16px) + rgba 背景	配合 overflow: hidden
大圆角现代感	border-radius: 16px ~ 32px	配合 overflow: hidden 裁剪子元素
响应式背景	background-size: cover / contain	+ media query 切换图片（srcset 更好）