跟着 MDN 学CSS day_15：（掌握CSS背景与边框的创造性用法）

在网页视觉设计中，背景与边框是两个使用频率极高的属性类别。它们不仅承担着装饰界面的功能，还在信息层级、品牌传达和用户体验中发挥着重要作用。MDN 的"背景与边框"这一课，系统介绍了从背景颜色、背景图像、渐变到边框样式、圆角等一整套知识体系。这些属性看似零散，但彼此之间有着紧密的逻辑关联，掌握之后可以解决绝大多数的视觉样式需求。

本文将对课程中的每个知识点进行详细拆解，并结合示例代码进行讲解。

一、背景颜色的使用与覆盖范围

1.1 background-color 的基本用法

background-color是 CSS 中最基础的背景属性，它接受任何有效的颜色值，包括十六进制颜色、RGB、HSL、颜色关键字等。它的作用是填充元素的内容区域和内边距区域，也就是从内容盒的边界一直延伸到内边距盒的边界，但不会渗透到外边距区域。

.box{padding:0.3em;background-color:#567895;}h2{background-color:black;color:white;}span{background-color:rgb(255 255 255 / 50%);}

🎨效果解析：

• 外层盒子使用了一个柔和的蓝色背景
• 标题文字反白显示在黑色背景上
• 行内的span元素则通过半透明的白色背景制造出类似高亮的效果

⚠️注意：span是行内元素，背景色会紧贴文字边缘，这与块级元素背景铺满整行的行为有所不同。

1.2 背景颜色的层级关系

当背景颜色和背景图像同时存在时，背景颜色会处于最底层，背景图像则会叠加在背景颜色之上。这意味着如果背景图像是带有透明区域的 PNG 格式，或者使用了包含透明度的渐变，底下的背景颜色就会透过透明部分显示出来。

🎯叠加效果设计：这个特性在设计叠加效果时非常有用，可以用背景颜色作为兜底方案，同时让图像或渐变提供更丰富的视觉层次。

♿无障碍注意：从无障碍角度考虑，当我们把文字放在背景图像上方时，务必同时指定一个background-color。如果背景图片因为网络问题未能加载，文字依然能够依靠背景颜色保持足够的对比度，确保可读性不受影响。

二、背景图像的基础行为与默认特性

2.1 background-image 的引入方式

background-image属性通过url()函数引入外部图像资源作为元素的背景。与img标签不同，背景图像属于 CSS 的表现层，不会占用 HTML 的语义空间，因此适合用于纯装饰性的图像内容。

⚠️重要提醒：屏幕阅读器无法识别背景图像，所以任何承载信息的图片都应该使用img标签并配置合适的alt属性，而不是放在背景中。

.a{background-image:url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);}.b{background-image:url(https://mdn.github.io/shared-assets/images/examples/star.png);}

🔍默认行为观察：

• 大图（热气球）—— 实际尺寸远大于200px宽的盒子，不会被自动缩小，我们只能看到图像左上角的一小部分
• 小图（星星）—— 实际尺寸远小于盒子，会在水平和垂直两个方向上自动重复平铺，直到填满整个盒子

2.2 理解默认平铺机制

背景图像默认的平铺行为是由background-repeat属性的初始值repeat决定的。repeat意味着图像在水平方向和垂直方向都会不断重复，直到铺满整个元素区域。这个设计源于早期网页对纹理背景的需求，比如用一张小尺寸的纹理图片重复拼接成完整的背景。

然而，在现代设计中，我们更常用的是单张不重复的背景图。因此，几乎每次设置background-image时，都会同时配合background-repeat: no-repeat来关闭平铺。这已经成了一种书写习惯。

.box{background-image:url(https://mdn.github.io/shared-assets/images/examples/star.png);background-repeat:no-repeat;}

🎯平铺选项：

• no-repeat—— 不重复（最常用）
• repeat-x—— 只在水平方向重复
• repeat-y—— 只在垂直方向重复

三、控制背景图像尺寸的多种方式

3.1 background-size 的长度值与百分比

当背景图像与元素的尺寸不匹配时，我们可以通过background-size来主动调整图像的显示大小。使用具体的长度值如px或em，可以精确控制背景图像的宽高。

📝规则：如果只指定一个值，浏览器会将其当作宽度，高度则自动按比例缩放。

.box{background-image:url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);background-repeat:no-repeat;background-size:80px 10em;}

⚠️失真风险：这里同时指定了宽度和高度，但两者的比例很可能与原图不一致，所以图像会出现明显的扭曲。在实际使用中，直接指定两个长度值的情况并不常见，更多的时候我们依赖关键字来完成自适应缩放。

3.2 cover 与 contain 的区别

background-size提供了两个非常实用的关键字：

💡选用建议：两者都不需要指定具体数值，大大简化了响应式设计中的背景图处理。在大多数情况下，cover的使用频率更高，因为它能保证背景图始终填满容器，视觉效果更加饱满。

四、背景图像的精准定位

4.1 background-position 的坐标系

background-position使用一个以盒子左上角为原点的二维坐标系来定位背景图像。默认值是(0,0)，也就是图像的左上角与盒子的左上角对齐。我们可以使用关键字、长度值、百分比值以及它们的组合来描述背景图的位置。

.box{background-image:url(https://mdn.github.io/shared-assets/images/examples/star.png);background-repeat:no-repeat;background-position:120px 1em;}

🎯效果说明：星星图片的左上角距离盒子左边缘120px，距离盒子上边缘1em。这种数值定位方式非常直观，适合需要精确偏移的场景。

4.2 关键字与混合定位

除了纯数值，我们还可以使用top、bottom、left、right、center等关键字来定位：

🚀四值语法：CSS 还支持四值语法，允许我们同时指定到两条边的偏移距离。例如top 20px right 10px表示图片距离顶部 20px、距离右侧 10px。这种写法在需要精确控制图片与盒子边缘距离的设计中非常方便。

五、渐变背景的灵活应用

5.1 线性渐变与径向渐变

渐变在 CSS 中属于image数据类型，因此可以通过background-image属性来应用。最常见的两种渐变是：

.a{background-image:linear-gradient(105deg,rgb(0 249 255 / 100%)39%,rgb(51 56 57 / 100%)96%);}.b{background-image:radial-gradient(circle,rgb(0 249 255 / 100%)39%,rgb(51 56 57 / 100%)96%);background-size:100px 50px;}

🔍效果解析：

• 线性渐变：角度是105度，意味着渐变方向从左上角向右下角倾斜。颜色在39%和96%的位置发生变化，中间会自然过渡
• 径向渐变：指定了circle形状，从中心开始向外扩散。有意思的是，为径向渐变单独设置了background-size，使其尺寸小于盒子本身，再配合默认的平铺行为，就会产生重复的圆形渐变图案。这种技巧可以用来制作点状纹理或波点背景

5.2 渐变生成工具的使用

手写渐变代码有时候会比较繁琐，特别是涉及多个颜色停止点、角度和形状时。实际开发中，很多开发者会使用在线 CSS 渐变生成器来可视化地创建渐变，然后直接复制生成的代码。

💡学习建议：这些工具极大提高了渐变的调试效率，也降低了对渐变语法的记忆负担。尽管如此，理解渐变的基本参数含义仍然是必要的，这样在使用工具时才不会被各种滑块和输入框弄迷糊。

六、多背景图像的叠加技巧

6.1 多背景的声明方式

CSS 允许在同一个元素上设置多个背景图像，只需要在background-image属性中用逗号分隔各个图像的url值即可。列表中第一个图像位于最顶层，后续图像依次堆叠在下方。这种分层机制和图形软件中的图层概念完全一致，让我们可以组合出复杂的视觉效果。

.box{background-image:url(https://mdn.github.io/shared-assets/images/examples/star.png),url(https://mdn.github.io/shared-assets/images/examples/big-star.png);}

🎯叠加原理：在这个例子中，小星星图片在上层，大星星图片在下层。如果小星星带有透明背景，大星星就会从透明区域透出来。利用这种叠放关系，我们可以把纹理、图标、渐变等多层内容组合在一起，而不需要增加额外的 HTML 元素。

6.2 多个背景的属性对应规则

当为多个背景设置background-repeat、background-position、background-size等属性时，同样需要用逗号分隔，每个值对应相同顺序的背景图层。

⚠️循环规则：如果某个属性的值数量少于背景图层数量，浏览器会自动循环重复已有的值来填补空缺。比如有两个背景图但只写了一个background-position值，那么这两个图都会使用同一个位置设定。

🛡️安全建议：这个循环规则在实际使用中需要特别留意，如果不小心少写了某个值，可能会导致意料之外的定位或重复效果。通常情况下，建议每个背景图层都明确写出对应的附属属性，保持代码的清晰和可控。

七、背景附着与滚动行为

7.1 background-attachment 的三种模式

background-attachment控制背景图像在页面或元素滚动时如何表现：

📝实验建议：这个属性的效果只有在内容超过元素尺寸并产生滚动条时才能体现出来。因此学习时最好在一个有足够内容的可滚动容器中实验，才能直观地理解三者的区别。

📱移动端注意：fixed值在移动端浏览器中的表现有时会和桌面端不一致，使用时需要充分测试。

八、background 简写属性的规则与技巧

8.1 简写属性的基本语法

background是一个功能强大的简写属性，可以在一条声明中同时设置：

• 背景颜色
• 背景图像
• 背景位置
• 背景大小
• 背景重复方式
• 背景附着方式

等多个子属性。

.box{background:linear-gradient(105deg,rgb(255 255 255 / 20%)39%,rgb(51 56 57 / 100%)96%)center center / 400px 200px no-repeat,url(https://mdn.github.io/shared-assets/images/examples/big-star.png)center no-repeat,rebeccapurple;}

🔍语法解析：

• 包含了三个背景层
• 第一个：带定位和尺寸的渐变（center center / 400px 200px）
• 第二个：带定位的图片（center no-repeat）
• 第三个：纯色背景（rebeccapurple）

🚨关键规则：

• background-size的值必须紧跟在background-position之后并用斜线分隔
• background-color只能在最后一个逗号之后声明，不能出现在前面的背景层中

8.2 简写的注意事项

由于简写属性会重置所有未显式设置的背景子属性为默认值，当我们在样式表中混合使用简写和单独属性时，务必确保简写声明出现在单独属性声明之前，否则后面的单独属性可能会在无意中被简写覆盖。

⚠️常见问题：许多难以排查的背景样式问题，根源就在于简写属性的覆盖机制。

🛡️安全习惯：

• 要么全部使用简写
• 要么全部使用单独属性
• 避免混用

九、边框样式的多样化表达

9.1 边框的简写与分侧设置

border属性是设置边框最常用的简写形式，可以在一行中同时指定边框的宽度、样式和颜色。如果只需要为某一条边设置边框，可以使用border-top、border-right、border-bottom、border-left这样的分侧简写属性。

.box{border:5px solid #0b385f;border-bottom-style:dashed;}h2{border-top:2px dotted rebeccapurple;border-bottom:1em doublergb(24 163 78);}

🎯效果解析：

• 外层盒子整体使用了深蓝色的实线边框，但通过border-bottom-style单独将底边改为了虚线样式，实现了四周不一致的边框效果
• 标题元素则分别给顶部和底部设置了不同颜色、不同宽度和不同样式的边框，形成独特的视觉点缀

💡分侧覆盖技巧：这种分侧覆盖的技巧，让我们可以在统一的基础上灵活地制造变化。

9.2 边框样式的丰富选择

边框的样式除了常见的solid实线外，还有多种选择：

🎨视觉效果：double、groove、ridge、inset和outset依赖于边框颜色在不同面的明暗变化来制造立体感，因此在单色背景下效果较为明显。在实际使用中，solid和dashed出现频率最高，其他样式更多用于特殊的复古或拟物化设计。

💡进阶技巧：边框宽度和颜色的设置同样影响最终的视觉效果。较宽的边框可以承载更多细节，而细边框则显得简洁利落。边框颜色可以使用任何有效的颜色值，包括半透明颜色，这一点在制作玻璃拟态或毛玻璃效果时非常有用。

十、圆角的实现与应用

10.1 border-radius 的基本用法

border-radius属性用来给元素的角添加圆角效果。它可以接受一个或两个值：

值可以是长度单位或百分比。

.box{border-radius:1em;border-top-right-radius:10% 30%;}

🎯效果解析：

• 整体设置了四个角为1em的圆角半径
• 单独将右上角的水平半径改为 10%、垂直半径改为 30%，制造出不对称的圆角效果

🎨形状创造：border-radius的这种灵活性让我们可以做出从微妙的圆角卡片到完全的圆形甚至胶囊形状等各种效果。当border-radius的值大于等于元素宽高的一半时，正方形元素就会变成一个圆形。

10.2 分角设置的语法

与边框类似，border-radius也支持对四个角分别设置，对应的属性是：

简写的border-radius属性本身也可以接受多个值，按照左上、右上、右下、左下的顺序进行设置，斜线前后还可以分别指定水平和垂直半径。

🎯掌握要点：掌握这些语法细节，就能在设计中精准地控制每一个角的弧度。

总结

本课深入探讨了 CSS 背景与边框的各个方面：

背景与边框并不是孤立的美化手段，它们和前面学习的盒模型、尺寸调整以及后续将要学习的布局模式紧密相连。一个元素的最终视觉呈现，是所有这些 CSS 属性协同作用的结果。因此，在后续学习Flexbox和Grid等布局技术时，背景和边框的知识会不断被复用和深化，值得我们在实践中反复锤炼。

还在纠结 CSS 样式写得杂乱无章、布局频频踩坑？收藏此文持续跟进，后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货，从基础样式到实战排版一站式学透，快速提升前端页面编写能力！