热爱护肤的刘博士1. 从“能用”到“好看”：背景和圆角到底在解决什么问题
做前端这些年，我越来越确认一件事：一个页面给人的第一印象，往往不是布局有多精妙、交互有多复杂，而是背景和圆角这些“皮肤级”属性有没有打理好。很多人写 CSS 时，背景就是 background-color 填个色，圆角就是 border-radius: 10px 收工，但真到了做落地页、做后台可视大屏、做产品官网的时候，才发现这些基础属性背后藏着大量讲究。
这篇是 CSS 常用元素属性宝典的下篇，专门把背景和圆角这两块掰开揉碎讲清楚。背景部分会覆盖 background 全系子属性、渐变背景的三种写法、多重背景叠加、以及 background-blend-mode 混合模式；圆角部分会从 border-radius 的基本语法讲到椭圆角、百分比计算机制、内圆角实现，再到“圆角 + 阴影 + 渐变”组合出来的高级卡片效果。适合已经掌握 CSS 基础选择器和盒模型、想进一步提升页面质感的前端开发者，也适合刚入行不久、想系统补齐 CSS 知识短板的同学。
先说结论：背景和圆角从来不是“装饰性”的小事，它们是性价比最高的颜值杠杆。一个用好了渐变背景和细腻圆角的卡片，不需要任何图片资源就能做出层次感和立体感，加载速度快、适配灵活、维护方便，这套技能在移动端适配和多端复用的场景下尤其值钱。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 背景属性全解析：你以为的 background 其实有八层
2.1 background 家族的完整清单
很多人写背景只认识 background-color 和 background-image，实际上 CSS 里背景相关的属性一共有八个，完整掌握它们，你才能理解为什么有些页面的背景可以那么“有层次”。
| 属性 | 作用 | 常见取值示例 |
|---|---|---|
background-color |
背景颜色 | #f5f5f5、rgba(0,0,0,0.5) |
background-image |
背景图片/渐变 | url(logo.png)、linear-gradient(...) |
background-repeat |
平铺方式 | no-repeat、repeat-x、repeat-y |
background-position |
背景位置 | center center、20px 30px |
background-size |
背景尺寸 | cover、contain、100% auto |
background-attachment |
背景固定方式 | scroll、fixed、local |
background-origin |
背景定位参考区域 | padding-box、border-box、content-box |
background-clip |
背景绘制范围 | border-box、padding-box、content-box、text |
看到一个重点没有？background-origin 和 background-clip 很多人根本没碰过。前者决定背景图从哪个区域开始定位，后者决定背景最终显示在哪个区域内。默认情况下背景的绘制范围是 border-box，也就是说背景会铺到边框底下，这也是为什么有时候你给元素加了 border，却发现边框颜色和背景混在一起很脏——因为背景图压到了边框区域下面。
2.2 背景尺寸的两个核心关键字：cover 与 contain
background-size 是背景属性里最容易被忽视、但实际价值最高的一个。我在带团队评审代码时，只要看到有人用固定像素值写背景图尺寸，基本都会让他改成 cover 或 contain，原因很简单：固定像素在响应式布局下一定会出问题。
cover 的含义是让背景图等比例缩放，直到完全覆盖容器，可能产生裁剪；contain 是让背景图等比例缩放，直到完整显示在容器内，可能产生留白。选择哪个，取决于图片内容和设计意图。如果是全屏 banner 背景，希望图片铺满不