张赫尔写页面做得多了，你会发现一个很朴素的规律：决定一个界面“质感”的，往往不是复杂的布局，而是那些不起眼的细节属性。背景和圆角，就是其中最能拉颜值、也最容易被轻视的两个。很多同学会用 background-color 和 border-radius: 10px 就觉得完事了，但真到做渐变卡片、毛玻璃弹窗、圆形头像、胶囊按钮的时候，又总被各种意想不到的渲染问题卡住。这篇我打算把背景和圆角这两个家族从头到尾捋一遍，包括多背景叠加、渐变写法、圆角椭圆半径、百分比计算逻辑，以及移动端兼容性这类实操里绕不开的坑。适合刚学完 CSS 基础、想进阶页面细节的同学，也适合写了一阵子但没系统整理过这两个属性的朋友。
1. 背景属性：从单色到多层叠加的实操拆解
背景这个属性，在 CSS 里是个“大家族”。平时我们常用 background-color，但它只是整条背景链路里最基础的一环。真正让背景变得强大的，是把图片、渐变、定位、尺寸、裁切、混合模式这些子属性组合起来用。我建议先把它拆开，逐个搞明白每个子属性管什么，再回到简写上去理解顺序，这样才不会在写代码的时候靠魔法记。
1.1 先认清 background 家族：一份属性清单
background 相关的子属性，至少包括下面这些：
background-color：背景色，最简单，但需要注意它只占背景层的最底层。background-image：背景图，可以是图片 URL，也可以是渐变（渐变本质上也是背景图）。background-repeat：平铺方式，有repeat、no-repeat、repeat-x、repeat-y、space、round。background-position：背景图位置，支持像素、百分比、关键字，还有center、top left这类组合。background-size：背景图尺寸，有auto、cover、contain，也支持固定像素和百分比。background-attachment：背景是否固定，有scroll、fixed、local。background-origin：背景图定位的参考边界，有border-box、padding-box、content-box。background-clip：背景绘制范围，有border-box、padding-box、content-box，还有text（文字渐变必备）。background-blend-mode：背景层混合模式，类似 PS 里的图层混合。
这么多属性，如果一开始全部铺开，容易晕。我习惯把它们分成三组来记：颜色和图片是一组，管的是“背景里有什么”；定位和尺寸是一组，管的是“背景放哪里、放多大”；裁切和固定是一组，管的是“背景显示在哪、怎么随滚动”。这样记忆负担小很多，查文档的时候也知道去哪一块找。
1.2 背景图片的平铺与定位：repeat 和 position 的坑
先聊 background-repeat。默认值是 repeat，这意味着你用一张 100px 的小图做背景，它会像瓷砖一样铺满整个容器。这个特性做纹理背景时特别好用，但很多人图片不显示或有黑边，其实是没设置 no-repeat，或者图片本身就是深色底，被平铺后视觉上连成一片，误以为“没生效”。
space 和 round 这两个值挺有意思。space 会保持图片原始尺寸，在容器里尽量多铺几张，然后四边留出均匀的间隙；round 会拉伸或压缩图片尺寸，让图片正好整数倍平铺，不出现半张图。我做过重复展示徽章底纹的需求，用 round 比手动算像素方便太多，但要注意它可能会让图片发生变形。
background-position 这里有个很关键的认知：百分比不是相对坐标平移，而是图片上对应位置与容器上对应位置对齐。比如 50% 50%，是图片的中心点对着容器的中心点，这个逻辑跟 left: 50% 再往上偏移一半是两回事。理解这个，在写多背景图对齐的时候，就不会算出奇怪的值。常见写法是：
css复制background-position: center center;
background-position: right bottom;
background-position: 20px 30px;
background-position: 50% 30%;
像素值好理解，就是图片左上角相对容器左上角的偏移。但百分比如果按“位移偏移量”去算，很容易算错，我早年就吃过这个亏。记住“对齐”这个逻辑，看 background-size 就不容易糊涂。
1.3 background-size：cover 和 contain 的适用场景
background-size 是背景图片自适应最核心的属性。cover 是把图片拉伸到能完全覆盖容器，短边优先撑满，长边会溢出，所以通常要配 background-position: center 让溢出部分居中裁掉。contain 是把图片完整放进容器，长边优先撑满，短边可能留白。这两个词就像家里铺地毯：cover 是地毯得铺满整个房间，哪怕边角得塞进去；contain 是地毯必须完整可见，边上露地板也没关系。
实际操作里，我的选型原则是：
- 需要背景铺满且视觉焦点在中心，用
cover+center。 - 需要展示完整的产品图、LOGO 底纹，用
contain。 - 需要平铺小纹理，用原始尺寸或固定像素。
如果是移动端适配，背景图建议直接用 2 倍图甚至 3 倍图，配合 background-size: cover，避免在 Retina 屏上发虚。设计师给你一张 720px 宽的 Banner，你把它铺到 1080px 宽的容器上，就等着被说“图糊了”。
1.4 背景的盒模型：origin 与 clip 到底管什么
background-origin 和 background-clip 是两个经常被忽略、但理解后能解决很多细节问题的属性。
background-origin 决定背景图定位的原点，默认是 padding-box。也就是说，背景图的位置是以 padding 区域左上角为参考的。如果你设了 border: 10px solid，背景图不会从 border 区域开始铺，而是从边框内部开始。改成 border-box，背景图才会从边框区域开始计算定位。
background-clip 决定背景的绘制范围，默认是 border-box，所以背景会绘制到边框下沿。但注意，当 background-origin 是 padding-box 时，绘制范围还是 border-box，就可能导致背景色延伸到边框下面，如果边框是半透明，会有颜色透出来。这时候把 background-clip 设置成 padding-box，背景就不会画到边框区，视觉上干净很多。
background-clip: text 是进阶玩法。把背景裁剪成文字的形状，再配合 color: transparent，就能做出文字渐变效果：
css复制.gradient-text {
background-image: linear-gradient(90deg, #ff6a00, #ee0979);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
这个写法在广告标题、重点数据展示上很常见。注意 -webkit-background-clip 前缀目前仍然几乎是必须的，很多浏览器对标准写法支持不够稳。
1.5 background-attachment: fixed 的移动端坑
background-attachment: fixed 可以让背景不随滚动而移动，做出“视差”那种沉浸感。桌面端体验很好，但移动端的问题很严重：iOS Safari 和部分 Android 浏览器对这个属性的支持一直不稳定，尤其是当容器内部有滚动时，背景会直接失效、闪动，甚至影响滚动性能。
我踩过最疼的一个坑：页面内容高度超过一屏，给根容器设了 background-attachment: fixed，结果在 iPhone 上背景图片直接不显示，白屏一块。查了半天，发现是 iOS 对 fixed 背景和动态工具栏的兼容性问题。现在我的做法是：移动端统一不用这个属性，改用伪元素固定背景的替代方案：
css复制.page {
position: relative;
overflow: hidden;
}
.page::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background-image: url("bg.jpg");
background-size: cover;
background-position: center;
}
这样视觉上背景不随内容滚动，但规避了 background-attachment 的兼容性问题。毕竟用户感知的是“背景没动”，至于你用什么手段实现，他没兴趣知道。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. border-radius 圆角进阶：你以为四个 px 只是四个角吗
border-radius 是 CSS 里少数能极大改变视觉气质的属性。同样一张卡片，直角和 8px 圆角的观感完全不同，前者偏硬朗工具风，后者更柔和友好。但要真正用好它，得搞清楚简写读法、百分比计算和斜杠写法。
2.1 一个值到四个值：圆角简写的读法
border-radius 的简写规则类似 margin、padding，有 1 到 4 个值：
css复制border-radius: 10px; /* 四个角都是 10px */
border-radius: 10px 20px; /* 左上右下 10px，右上左下 20px */
border-radius: 10px 20px 30px; /* 左上 10px，右上左下 20px，右下 30px */
border-radius: 10px 20px 30px 40px; /* 左上、右上、右下、左下，顺时针 */
按顺时针读：左上、右上、右下、左下。三个值时，左下等于右上。这个跟 margin 的省略规则一致，记住了就不容易慌。
还有一个容易忘的是，每个角可以单独用四个长属性控制：
css复制border-top-left-radius: 10px 20px;
border-top-right-radius: 10px 20px;
border-bottom-right-radius: 10px 20px;
border-bottom-left-radius: 10px 20px;
不过实战中直接写简写更常见，长属性适合在 JS 里单独控制某一个角时用。
2.2 百分比圆角的真实计算逻辑
百分比圆角的价值在于自适应：容器的宽高变了，圆角跟着变，不用媒体查询里再改像素值。但这里有个关键点：水平半径的百分比基于元素的宽度，垂直半径的百分比基于元素的高度。
比如 border-radius: 50%，在宽 200px、高 100px 的容器上，水平半径是 100px、垂直半径是 50px，画出来是一个椭圆。只有宽高相等时，50% 才是正圆。这就是为什么做圆形头像要 width: 100px; height: 100px; border-radius: 50%，三个条件缺一不可。
border-radius: 100% 并不是比 50% 更圆。当两个相邻角的水平半径之和超过元素宽度时，浏览器会按比例缩小半径，让它们刚好衔接。所以只要值够大，效果就趋向胶囊形。有人喜欢写 border-radius: 999px，本质就是用远超实际尺寸的值来保证“绝对圆润”，这个技巧做胶囊按钮很好用。
2.3 扇形、胶囊、半圆：用 border-radius 做常见形状
圆角不只能做圆和椭圆，稍微组合一下就能做出一堆常用形状。
- 胶囊按钮：
border-radius: 999px，不管按钮多宽，两端都是半圆。 - 半圆：
border-radius: 100px 100px 0 0，上边两个角是圆的，下边两个角是直角，就是半圆。 - 扇形：
border-radius: 100px 0 0 0，只圆左上角，配合背景色就能做出扇形的视觉。 - 对话气泡的小尾巴：用伪元素做一个正方形，只圆两个相邻角，然后旋转 45 度，再配合
border-radius微调。
这些形状不需要切图，纯 CSS 就能搞定。我在做消息气泡、步骤条、标签页的选中态时经常这么用，省了不少图片请求。
2.4 border-radius 与 border、box-shadow 的配合细节
border-radius 不是只影响背景和边框，它还会带动内部的元素裁切。最常见的场景：父容器设了 border-radius 和 overflow: hidden，里面的图片才能跟着变圆。如果忘了加 overflow: hidden，图片的四个角会硬生生从圆角里戳出来，视觉上很难看。
还有 box-shadow 会跟着元素的圆角走。给一个圆角元素加阴影，阴影也是圆角的，这个特性在做悬浮卡片时很自然，不需要额外处理。但注意 border 本身的渲染：如果你的边框是虚线或者点线，圆角的转弯处有时会出现不太美观的连接点，这是浏览器渲染限制，目前没有特别干净的纯 CSS 解决方案，只能靠设计层面规避。
3. 背景与圆角的高级玩法：几招让页面颜值直接翻倍
基础的背景和圆角讲到这，下面进入组合环节。真正让页面有“设计感”的，往往不是单个属性，而是把渐变、多背景、伪元素、毛玻璃、CSS 变量这些手段组合起来。
3.1 渐变背景：线性、径向、锥形渐变的选型
渐变有三类，各自适用场景不同。
linear-gradient 最常用，可以做从纯色到纯色的过渡，也可以做多色渐变。它的完整写法是 linear-gradient(方向, 颜色1 位置, 颜色2 位置, ...)：
css复制background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
这个 135deg 是从左下到右上，不少人会写成 45deg，两者方向正好相反，建议自己画个坐标系确认一下。渐变的位置可以控制颜色的“停留范围”，做出硬边分割、条纹、格子等效果。
radial-gradient 是径向渐变，从中心向外扩散，适合做圆形光晕、聚焦效果。比如按钮上的 hover 光效，用它是自然的选择。
conic-gradient 是锥形渐变，绕中心一圈，适合做仪表盘、扇形占比、彩色色轮。做 loading 圆弧等场景有奇效，但注意兼容性和角度单位的习惯用法。
3.2 多背景叠加：纹理+渐变+图片的组合操作
多背景是 CSS 背景里最被低估的能力。一个容器可以同时设多个 background-image，它们按从上到下的顺序叠加，第一层在最上面。用法是逗号分隔：
css复制background-image:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("banner.jpg");
background-size: cover, cover;
background-position: center, center;
这个写法很实用：图片上盖一层半透明黑色渐变，文字在图片上的可读性立刻提升，而且不用额外加一个遮罩元素。做 Banner、卡片封面、首屏大图时，我再也没用过假元素做遮罩。
多背景也可以把纹理和渐变叠起来。比如背景色从浅蓝渐变到深蓝，上面再叠加一层细小的噪点纹理，就能模拟一种微妙的纸张质感，纯 CSS 就能完成。
3.3 伪元素 + 圆角：磨砂玻璃卡片实战
磨砂玻璃效果（毛玻璃）最近几年特别流行。核心是 backdrop-filter 的 blur()，但它的兼容性和嵌套问题需要小心处理。
一个比较稳的毛玻璃卡片方案是这样的：
css复制.glass-card {
position: relative;
border-radius: 16px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
注意：backdrop-filter 要生效，元素本身不能完全透明，但也不能完全不透明。半透明白色底 + 模糊，是毛玻璃能“磨”出后面内容的典型配置。另外，如果父容器有 overflow: hidden 或者 transform，backdrop-filter 有可能失效或卡顿，移动端尤其明显。多数情况下，我给弹窗、导航栏这类表层元素用，不做大面积铺底。
伪元素 + 圆角还有个常见玩法：制作边框光晕。比如给按钮做一个发光描边，用 ::before 做一个比按钮大一圈的渐变背景，再加 filter: blur()，视觉上就像边缘有一层柔光。
3.4 用 CSS 变量统一管理和主题化背景圆角
项目大了以后，最怕圆角值满天飞：这个 8px、那个 12px、还有随手写的 50%。我现在的习惯是，组件库或项目入口统一定义 CSS 变量：
css复制:root {
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-full: 999px;
--bg-primary: #f5f7fa;
--bg-gradient-brand: linear-gradient(135deg, #667eea, #764ba2);
}
然后组件里统一用 var(--radius-md)、var(--bg-gradient-brand)。好处很明显：
- 改主题时只改变量，全站圆角和背景风格跟着变。
- 设计走查时发现某个圆角不舒服，改一处就行。
- 换肤、暗色模式，只用切一套变量，不用碰业务代码。
这个思路跟设计系统中的“间距刻度”“颜色令牌”是一个逻辑。CSS 变量虽然语法简单，但把它当成设计规范的落地点，价值非常大。
4. 常见问题与排查技巧实录
写背景和圆角这么多年，我攒了一批高频问题的排查经验。这部分不是文档里会写的，但实战中几乎人人都会遇到。我一条条列出来，方便你直接按图索骥。
4.1 背景图不显示
背景图不显示，通常不是 CSS 写错了，而是下列几个原因：
- 路径问题：相对路径是从 CSS 文件所在位置出发，不是从 HTML 页面出发。很多人在这里踩坑。
- 简写覆盖：先写了
background-color，后面又写background: #fff;，后者会把前面的background-image一起重置掉。 - 图片本身加载失败：先打开图片 URL 确认是否能访问。
- 渐变被覆盖：
background: #fff;会把background-image里的渐变冲掉，因为background简写会重置所有子属性。
排查时可以开 DevTools，看 computed 样式里 background-image 到底有没有值，以及 Network 面板里图片请求是不是 404。
4.2 border-radius 不生效或显示异常
圆角不生效的常见原因：
- 元素没有宽度或高度：圆角对“没有形状”的元素没有视觉影响。
- 与
border-image冲突：border-image会禁用border-radius的视觉效果，两者不能同用。 - 子元素溢出：图片、背景色从圆角外露，父级加
overflow: hidden解决。 - 父元素设置了
overflow: auto且子元素过多，圆角裁切可能表现异常。 transform或clip-path干扰部分浏览器的圆角渲染。
遇到圆角问题，先看 computed 样式确认 border-radius 有没有被覆盖，再检查有没有 border-image 和裁剪属性在捣乱。
4.3 背景渐变硬度突兀
渐变太生硬，多半是颜色停止位置没处理好。比如：
css复制background: linear-gradient(90deg, #fff 0%, #fff 50%, #000 50%, #000 100%);
这就是纯硬分割，左白右黑。想让过渡柔和，就要让两个颜色的停止位置重叠或接近。常见做法是用多个颜色停止点控制渐变节奏：
css复制background: linear-gradient(90deg, #fff 0%, #f0f0f0 40%, #ccc 100%);
还可以利用透明色过渡，比如做淡出遮罩：
css复制background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
这种渐变在图片底部做文字区域的压暗处理时非常常用。如果想做条纹，也可以用固定的颜色停止点制造硬边，但那是刻意效果，跟“突兀”是两码事。
4.4 background-attachment 在移动端失效
前面提过 fixed 在移动端不靠谱。这里再补充一个替代思路：如果只是想背景图固定，不想内容滚动时图片跟着滚，可以用一个固定定位的 div 做背景层，把真正的页面内容放在一个相对定位的高层级容器里，让背景层永远在最底层、内容永远盖在上面。这比 background-attachment: fixed 更可控，而且还能给背景层加动画、模糊等效果。
4.5 常见兼容性速查表
我整理了一张基础速查表，开发时照着它快速判断：
| 属性或特性 | 兼容性注意点 | 建议 |
|---|---|---|
background-clip: text |
需要 -webkit- 前缀、color: transparent |
加前缀，做降级背景色 |
backdrop-filter |
桌面端现代浏览器支持良好，移动端部分中低端机性能差 | 适量使用，弹窗、导航等局部场景优先 |
background-attachment: fixed |
iOS Safari 及部分 Android 浏览器行为不稳定 | 移动端用伪元素固定方案替代 |
conic-gradient |
较新属性，老浏览器不支持 | 可用 @supports 判断，降级为纯色或线性渐变 |
border-radius 与 border-image 同用 |
border-image 会让 border-radius 失效 |
二选一，或改用 box-shadow 做替代效果 |
这些内容都是实际开发中容易被“能跑就行”掩盖的小问题，但往往就是它们决定了一个页面在真机上的表现。
我个人在写 CSS 时有个习惯：背景和圆角这类视觉属性，一定要在真实设备或 DevTools 的设备模拟里过一遍。桌面端看着正常的渐变、圆角、毛玻璃，到手机上可能完全两个样，尤其是性能表现。设计上的“差不多”，在代码里往往就是差一行兼容、多一个前缀、少一个裁切。把这些细节抠住了，页面颜值和稳定性自然就上来了。