张赫尔写页面做得多了，你会发现一个很朴素的规律：决定一个界面“质感”的，往往不是复杂的布局，而是那些不起眼的细节属性。背景和圆角，就是其中最能拉颜值、也最容易被轻视的两个。很多同学会用 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 就不容易糊涂。