目录
前言
一、背景属性：给页面穿上 “华丽外衣”
1.1 背景颜色（background-color）：基础中的基础
1.1.1 颜色值的三种常用写法
1.1.2 实战技巧：页面背景色设置
1.2 背景图片（background-image）：让背景更有层次感
1.2.1 图片路径的写法
1.2.2 基础用法示例
1.3 背景平铺（background-repeat）：控制图片重复方式
1.3.1 各取值示例
1.3.2 实战场景：用平铺实现纹理背景
1.4 背景位置（background-position）：精准控制图片位置
1.4.1 参数写法详解
1.4.2 常用示例
1.4.3 实战技巧：图标定位
1.5 背景尺寸（background-size）：灵活调整图片大小
1.5.1 参数详解
1.5.2 常用示例
1.5.3 cover 与 contain 的核心区别（实战必懂）
1.6 背景复合写法：简化代码
1.6.1 复合写法语法
1.6.2 示例对比
1.7 多重背景：叠加出高级效果
1.7.1 基础用法
1.7.2 实战案例：带水印的背景
1.8 背景附着（background-attachment）：控制背景滚动方式
1.8.1 取值详解
1.8.2 常用示例（视差滚动效果）
二、圆角矩形（border-radius）：告别尖锐，拥抱柔和
2.1 基础用法：简单圆角
2.1.1 基本语法
2.1.2 示例：按钮圆角
2.1.3 数值与效果的关系
2.2 进阶用法：分别控制四个角
2.2.1 缩写写法（顺时针顺序）
2.2.2 展开写法（精准控制）
2.2.3 示例：不规则圆角
2.3 高级用法：创建圆形和椭圆形
2.3.1 创建圆形
2.3.2 创建椭圆形
2.4 特殊用法：圆角与边框、阴影的搭配
2.4.1 圆角 + 边框
2.4.2 圆角 + 阴影
2.4.3 实战案例：卡片组件
2.5 注意事项：避免常见坑
2.5.1 边框和内边距对圆角的影响
2.5.2 背景图片与圆角的冲突
2.5.3 百分比数值的注意事项
三、实战综合案例：打造高颜值登录页面
3.1 页面效果描述
3.2 完整代码
3.3 代码解析
总结
前言
在 CSS 的世界里，想要打造出视觉惊艳、细节精致的网页，背景属性和圆角设计绝对是 “点睛之笔”。它们看似基础，却能通过灵活组合实现从简约清新到炫酷高级的多种风格，是前端开发者必须熟练掌握的核心技能。上一篇我们聊了字体、文本等基础属性，这篇就聚焦背景属性和圆角矩形，从基础用法到进阶技巧，再到实战案例，带你全方位解锁 CSS 的 “颜值魔法”！下面就让我们正式开始吧！
一、背景属性：给页面穿上 “华丽外衣”
背景是网页的 “底色”，直接影响整体视觉基调。CSS 的背景属性家族十分强大，不仅能设置纯色背景，还能添加背景图片、控制平铺方式、调整位置和尺寸，甚至实现多重背景叠加。掌握这些属性，就能告别单调的白色背景，让网页瞬间鲜活起来。
1.1 背景颜色（background-color）：基础中的基础
背景颜色是最常用的背景属性，用于设置元素的纯色背景，默认值为transparent（透明），也就是说元素默认会继承父元素的背景。
1.1.1 颜色值的三种常用写法
CSS 中设置颜色有三种核心方式，各有适用场景，在上期博客中已经为大家详细介绍过了，这里我们再结合实际开发场景详细说明一下：
- 预定义颜色值（单词形式）：直接使用英文颜色名称，比如
red（红色）、blue（蓝色）、green（绿色）等。这种方式简单直观，适合快速设置常见颜色，但颜色种类有限，无法满足精细的配色需求。.bgc-demo1 { background-color: red; /* 红色背景 */ } .bgc-demo2 { background-color: skyblue; /* 天蓝色背景 */ } - 十六进制形式（最常用）：通过
#后跟 6 位十六进制数（00-FF）表示，每两位分别对应 R（红）、G（绿）、B（蓝）三色分量。这种方式颜色范围极广，是开发中最常用的配色方式。如果十六进制数中两两相同，还可以简写为 3 位，比如#ff0000可简写为#f00，#ffff00可简写为#ff0。.bgc-demo3 { background-color: #ff0000; /* 红色，等同于red */ } .bgc-demo4 { background-color: #f3f3f3; /* 浅灰色，常用于页面背景 */ } .bgc-demo5 { background-color: #0f0; /* 绿色，简写形式 */ } - RGB/RGBA 形式：通过
rgb()函数指定红、绿、蓝三色分量的数值（0-255），比如rgb(255, 0, 0)对应红色。RGBA 在 RGB 的基础上增加了透明度参数（0-1），rgba(255, 0, 0, 0.5)表示半透明红色，适合需要叠加效果的场景。.bgc-demo6 { background-color: rgb(255, 165, 0); /* 橙色 */ } .bgc-demo7 { background-color: rgba(0, 0, 255, 0.3); /* 半透明蓝色 */ }
1.1.2 实战技巧：页面背景色设置
在实际开发中，我们常给body标签设置浅灰色背景，让页面内容与背景形成区分，提升可读性：
body { background-color: #f5f5f5; /* 浅灰色背景，避免纯白刺眼 */ }同时，透明背景transparent也很常用，比如某些弹窗组件需要透过背景看到下层内容：
.modal { background-color: transparent; /* 透明背景 */ border: 1px solid #eee; padding: 20px; }1.2 背景图片（background-image）：让背景更有层次感
背景图片能让页面更具设计感，通过background-image属性设置，语法为background-image: url(图片路径)。
1.2.1 图片路径的写法
- 相对路径：相对于当前 CSS 文件或 HTML 文件的路径，比如图片与 CSS 文件在同一目录下，直接写图片名称
url(rose.jpg)；图片在上级目录则写url(../images/rose.jpg)。- 绝对路径：完整的图片 URL，比如
url(https://example.com/images/rose.jpg)，适合引用网络图片。- 路径引号：URL 可以加引号（单引号或双引号），也可以不加，推荐加上引号提高可读性。
1.2.2 基础用法示例
.bgi-demo { width: 800px; height: 500px; /* 必须设置高度，否则元素高度为0，背景图片无法显示 */ background-image: url("rose.jpg"); /* 背景图片 */ }⚠️ 注意：背景图片默认会覆盖在背景颜色上方，如果图片有透明区域，会显示出下方的背景颜色。如果只设置背景图片而不设置元素高度，元素会被内容撑开（若没有内容则高度为 0），导致背景图片无法显示，因此务必给元素指定高度或确保元素有足够内容。
1.3 背景平铺（background-repeat）：控制图片重复方式
背景图片默认会在水平和垂直方向上平铺（repeat），当图片尺寸小于元素尺寸时，会重复显示以填满元素。通过background-repeat可以控制平铺方式，常用取值如下：
repeat：默认值，水平和垂直方向都平铺。no-repeat：不平铺，只显示一张图片。repeat-x：只在水平方向平铺。repeat-y：只在垂直方向平铺。
1.3.1 各取值示例
/* 不平铺，只显示一张图片 */ .bgr-demo1 { width: 800px; height: 500px; background-image: url("rose.jpg"); background-repeat: no-repeat; background-color: #f0f0f0; /* 背景颜色与图片叠加 */ } /* 水平平铺 */ .bgr-demo2 { width: 800px; height: 200px; background-image: url("icon.png"); background-repeat: repeat-x; background-color: #eee; } /* 垂直平铺 */ .bgr-demo3 { width: 300px; height: 500px; background-image: url("line.png"); background-repeat: repeat-y; background-color: #fff; }1.3.2 实战场景：用平铺实现纹理背景
在开发中，我们常使用小尺寸的纹理图片（比如木纹、布纹、渐变条纹）通过平铺实现大面积的背景效果，既节省图片资源，又能让背景更有质感：
.wooden-bg { width: 100%; height: 600px; background-image: url("wood-texture.jpg"); /* 小尺寸木纹图片 */ background-repeat: repeat; /* 平铺填充整个元素 */ }1.4 背景位置（background-position）：精准控制图片位置
当背景图片不平铺时，background-position属性可以控制图片在元素中的位置，参数支持方位名词、精确单位、混合单位三种形式，灵活度极高。
1.4.1 参数写法详解
- 方位名词：
top（上）、bottom（下）、left（左）、right（右）、center（中），可以组合使用（比如top left、center right），顺序无关。
- 若只指定一个方位名词，另一个默认居中（比如
left等同于left center，top等同于center top）。- 精确单位：可以是像素（px）、百分比（%）等，以元素左上角为原点（0,0），第一个值为水平方向（x 轴），第二个值为垂直方向（y 轴）。
- 比如
background-position: 50px 100px表示图片左上角距离元素左边界 50px，距离上边界 100px。- 百分比是相对于元素和图片的尺寸差计算的，比如
background-position: 50% 50%表示图片中心与元素中心对齐（等同于center center）。- 混合单位：同时包含方位名词和精确单位，第一个值为水平方向，第二个值为垂直方向。
- 比如
background-position: 20px center表示水平方向距离左边界 20px，垂直方向居中；background-position: right 30px bottom 40px表示距离右边界 30px，距离下边界 40px。
1.4.2 常用示例
/* 居中显示（最常用） */ .bgp-demo1 { width: 800px; height: 500px; background-image: url("rose.jpg"); background-repeat: no-repeat; background-position: center; /* 等同于 center center */ background-color: purple; } /* 左上角显示 */ .bgp-demo2 { width: 800px; height: 500px; background-image: url("rose.jpg"); background-repeat: no-repeat; background-position: top left; /* 等同于 left top */ } /* 精确位置控制 */ .bgp-demo3 { width: 800px; height: 500px; background-image: url("rose.jpg"); background-repeat: no-repeat; background-position: 100px 150px; /* 水平100px，垂直150px */ } /* 混合单位控制 */ .bgp-demo4 { width: 800px; height: 500px; background-image: url("rose.jpg"); background-repeat: no-repeat; background-position: right 50px center; /* 距离右边界50px，垂直居中 */ }1.4.3 实战技巧：图标定位
在制作网页图标（比如按钮中的小图标）时，常使用background-position精准控制图标位置，配合no-repeat实现图标与文字的搭配：
.btn { display: inline-block; padding: 10px 20px 10px 40px; /* 左侧预留图标空间 */ background-image: url("icon-search.png"); background-repeat: no-repeat; background-position: 15px center; /* 图标在左侧15px，垂直居中 */ background-color: #007bff; color: #fff; text-decoration: none; border-radius: 4px; }1.5 背景尺寸（background-size）：灵活调整图片大小
background-size属性用于控制背景图片的尺寸，解决图片尺寸与元素尺寸不匹配的问题，支持具体数值、百分比、关键字三种写法。
1.5.1 参数详解
- 具体数值：直接指定图片的宽度和高度，比如
background-size: 400px 300px表示图片宽 400px、高 300px（可能会导致图片变形，需谨慎使用）。 - 百分比：相对于父元素的宽度和高度计算，比如
background-size: 100% 50%表示图片宽度占父元素 100%，高度占父元素 50%。 - 关键字：
cover：将图片扩展至足够大，使图片完全覆盖元素背景区域，可能会导致图片部分区域被裁剪（不改变图片比例）。contain：将图片扩展至最大尺寸，使图片宽度和高度完全适应元素背景区域，不会裁剪图片（不改变图片比例，可能会留下空白）。auto：默认值，保持图片原始尺寸。
1.5.2 常用示例
/* 具体数值（可能变形） */ .bgs-demo1 { width: 800px; height: 500px; background-image: url("rose.jpg"); background-repeat: no-repeat; background-position: center; background-size: 800px 500px; /* 图片完全填充元素，可能变形 */ } /* cover：完全覆盖（可能裁剪） */ .bgs-demo2 { width: 800px; height: 500px; background-image: url("rose.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; /* 覆盖整个元素，多余部分裁剪 */ } /* contain：完全适应（可能留空白） */ .bgs-demo3 { width: 800px; height: 500px; background-image: url("rose.jpg"); background-repeat: no-repeat; background-position: center; background-size: contain; /* 适应元素，不裁剪，可能留空白 */ } /* 宽度100%，高度自动（保持比例） */ .bgs-demo4 { width: 800px; height: 500px; background-image: url("rose.jpg"); background-repeat: no-repeat; background-position: center; background-size: 100% auto; /* 宽度铺满，高度自动适应 */ }1.5.3 cover 与 contain 的核心区别（实战必懂）
很多开发者在使用cover和contain时容易混淆，我们用表格清晰对比：
| 关键字 | 核心特点 | 适用场景 |
|---|---|---|
| cover | 完全覆盖元素，可能裁剪图片 | 背景图需要铺满元素，不介意裁剪（比如页面 banner、卡片背景） |
| contain | 完全适应元素，不裁剪图片 | 背景图需要完整显示，不介意留空白（比如 logo 背景、产品图片展示） |
示例对比：
/* cover示例：banner背景，铺满无空白 */ .banner { width: 100%; height: 400px; background-image: url("banner.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; } /* contain示例：产品图片展示，完整显示 */ .product-img { width: 300px; height: 300px; background-image: url("product.jpg"); background-repeat: no-repeat; background-position: center; background-size: contain; background-color: #f5f5f5; }1.6 背景复合写法：简化代码
为了提高开发效率，CSS 支持将背景相关属性合并为一个background属性，顺序无严格要求，但建议遵循“颜色→图片→平铺→位置→尺寸”的顺序（尺寸需要跟在位置后面，用/分隔）。
1.6.1 复合写法语法
background: 背景颜色 背景图片 背景平铺 背景位置 / 背景尺寸;1.6.2 示例对比
- 分开写法：
.bg-complex { width: 800px; height: 500px; background-color: #f0f0f0; background-image: url("rose.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; } - 复合写法（简化后）：
.bg-complex { width: 800px; height: 500px; background: #f0f0f0 url("rose.jpg") no-repeat center / cover; }
⚠️ 注意：background-size必须跟在background-position后面，用/分隔，这是复合写法的固定规则，否则会失效。
1.7 多重背景：叠加出高级效果
CSS 支持给一个元素设置多个背景图片，用逗号分隔各个背景的属性值，实现叠加效果。多个背景的层级关系为：第一个背景在最上层，最后一个背景在最下层。
1.7.1 基础用法
.multi-bg { width: 800px; height: 500px; /* 多重背景：上层图片 + 下层渐变背景 */ background: url("logo.png") no-repeat center, /* 上层：logo居中 */ linear-gradient(to bottom, #007bff, #6610f2); /* 下层：渐变背景 */ }1.7.2 实战案例：带水印的背景
在开发中，我们常需要给背景添加水印（比如公司 logo、“草稿” 字样），使用多重背景可以轻松实现，无需额外添加元素：
.watermark-bg { width: 100%; height: 600px; /* 背景：底层纯色 + 中层纹理 + 上层水印 */ background: url("watermark.png") no-repeat center rgba(255, 255, 255, 0.3), /* 水印（半透明） */ url("texture.png") repeat, /* 纹理背景 */ #f8f9fa; /* 底层纯色 */ }1.8 背景附着（background-attachment）：控制背景滚动方式
background-attachment属性用于控制背景图片是否跟随页面滚动，常用取值有scroll（默认）、fixed、local。
1.8.1 取值详解
scroll：背景图片跟随元素滚动，当页面滚动时，背景图片会相对于元素移动。fixed：背景图片固定在浏览器窗口中，不跟随页面或元素滚动，相当于 “冻结” 在屏幕上。local：背景图片跟随元素内容滚动（比如元素有滚动条时，背景会跟着内容一起滚动）。
1.8.2 常用示例（视差滚动效果）
background-attachment: fixed是实现视差滚动效果的关键属性，让背景图片与前景内容滚动速度不同，营造出立体层次感：
.parallax-section { height: 600px; background-image: url("mountain.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; /* 背景固定，实现视差效果 */ display: flex; align-items: center; justify-content: center; } .parallax-text { font-size: 48px; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }HTML 结构：
<section class="parallax-section"> <h2 class="parallax-text">视差滚动效果</h2> </section> <div style="height: 800px; background-color: #fff; padding: 50px;"> <p>这里是普通内容区域...</p> </div> <section class="parallax-section"> <h2 class="parallax-text">第二张视差背景</h2> </section>当滚动页面时，背景图片固定不动，前景内容滚动，形成强烈的视觉冲击。
二、圆角矩形（border-radius）：告别尖锐，拥抱柔和
在 Web 设计中，圆角是提升页面质感的 “小细节”，能让尖锐的矩形边缘变得柔和，给人更舒适的视觉体验。CSS 的border-radius属性不仅能实现简单的圆角，还能创建圆形、椭圆形，甚至不规则的圆角效果，是现代 UI 设计的必备属性。
2.1 基础用法：简单圆角
border-radius属性用于设置元素边框的圆角半径，数值越大，圆角越明显。它的基础语法非常简单，支持具体数值（px、em 等）和百分比。
2.1.1 基本语法
/* 所有角统一设置圆角 */ border-radius: 数值;2.1.2 示例：按钮圆角
按钮是圆角最常用的场景之一，通过border-radius可以让按钮从 “方方正正” 变得更圆润：
.btn-rounded { padding: 12px 24px; background-color: #007bff; color: #fff; border: none; border-radius: 8px; /* 8px圆角，适中大小 */ font-size: 16px; cursor: pointer; } .btn-rounded:hover { background-color: #0056b3; }HTML 结构：
<button class="btn-rounded">点击按钮</button>效果：按钮四个角都变成 8px 半径的圆角，hover 时颜色加深，交互体验更佳。
2.1.3 数值与效果的关系
border-radius的数值决定了圆角的 “弧度”，我们用表格展示不同数值的效果：
| 数值 | 效果描述 | 适用场景 |
|---|---|---|
| 2-4px | 轻微圆角，几乎不明显 | 卡片、输入框等需要轻微优化的元素 |
| 8-16px | 适中圆角，视觉舒适 | 按钮、弹窗、卡片等核心交互元素 |
| 20px 以上 | 大圆角，风格鲜明 | 特殊设计的组件、头像框等 |
2.2 进阶用法：分别控制四个角
border-radius支持分别控制元素的四个角（上左、上右、下右、下左），有两种写法：缩写写法和展开写法。
2.2.1 缩写写法（顺时针顺序）
border-radius的缩写遵循“顺时针”规则，从左上角开始，依次为：上左、上右、下右、下左，具体分为四种情况：
- 1 个值：
border-radius: 10px→ 四个角都是 10px 圆角。- 2 个值：
border-radius: 10px 20px→ 上左、下右为 10px；上右、下左为 20px。- 3 个值：
border-radius: 10px 20px 30px→ 上左为 10px；上右、下左为 20px；下右为 30px。- 4 个值：
border-radius: 10px 20px 30px 40px→ 上左 10px、上右 20px、下右 30px、下左 40px（顺时针顺序）。
2.2.2 展开写法（精准控制）
如果需要更精准地控制单个角，可以使用展开属性，每个角对应一个属性：
- 上左角：
border-top-left-radius- 上右角：
border-top-right-radius- 下右角：
border-bottom-right-radius- 下左角：
border-bottom-left-radius
2.2.3 示例：不规则圆角
通过缩写或展开写法，可以实现不规则的圆角效果，让元素更有设计感：
/* 缩写写法：四个角不同圆角 */ .irregular-radius1 { width: 300px; height: 200px; background-color: #ff7f50; border-radius: 10px 30px 50px 70px; /* 上左10px、上右30px、下右50px、下左70px */ } /* 展开写法：只给左上角和右下角设置圆角 */ .irregular-radius2 { width: 300px; height: 200px; background-color: #9370db; border-top-left-radius: 20px; border-bottom-right-radius: 20px; }2.3 高级用法：创建圆形和椭圆形
border-radius不仅能实现圆角矩形，还能轻松创建圆形和椭圆形，关键在于控制元素的宽高比和圆角半径。
2.3.1 创建圆形
要创建圆形，需要满足两个条件：
- 元素的宽度和高度相等（正方形）。
border-radius的值为元素宽度（或高度）的一半，或直接设置为50%。
示例：圆形头像
.avatar-circle { width: 150px; height: 150px; /* 宽高相等，正方形 */ background-image: url("avatar.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 50%; /* 50%圆角，变成圆形 */ border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }HTML 结构：
<div class="avatar-circle"></div>效果：正方形元素变成完美的圆形，适合作为用户头像、图标等。
2.3.2 创建椭圆形
要创建椭圆形，需要满足两个条件：
- 元素的宽度和高度不相等（长方形）。
border-radius的值为元素宽度和高度的一半，或直接设置为50%。
示例：椭圆形 banner
.oval-demo { width: 400px; height: 200px; /* 宽高不等，长方形 */ background-color: #20c997; border-radius: 50%; /* 50%圆角，变成椭圆形 */ display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; }HTML 结构：
<div class="oval-demo">椭圆形元素</div>效果：长方形元素变成椭圆形，适合作为特殊装饰、标签等。
2.4 特殊用法：圆角与边框、阴影的搭配
border-radius可以与border（边框）、box-shadow（阴影）完美搭配，让元素更有层次感，需要注意的是：边框和阴影会跟随圆角一起显示，不会出现 “直角边框 + 圆角阴影” 的冲突。
2.4.1 圆角 + 边框
.border-radius-with-border { width: 300px; height: 200px; background-color: #fff; border: 2px solid #007bff; border-radius: 12px; /* 圆角会作用于边框 */ padding: 20px; }2.4.2 圆角 + 阴影
.border-radius-with-shadow { width: 300px; height: 200px; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* 阴影会跟随圆角 */ padding: 20px; }2.4.3 实战案例：卡片组件
将圆角、边框、阴影、背景结合，打造一个精美的卡片组件：
.card { width: 350px; background-color: #fff; border-radius: 16px; /* 大圆角，更显高级 */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); overflow: hidden; /* 让图片圆角与卡片一致 */ } .card-img { width: 100%; height: 200px; background-image: url("card-img.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; } .card-content { padding: 24px; } .card-title { font-size: 20px; color: #333; margin-bottom: 8px; } .card-desc { font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 16px; } .card-btn { display: inline-block; padding: 8px 16px; background-color: #007bff; color: #fff; border-radius: 6px; text-decoration: none; font-size: 14px; }HTML 结构：
<div class="card"> <div class="card-img"></div> <div class="card-content"> <h3 class="card-title">卡片标题</h3> <p class="card-desc">这是一张精美的卡片组件，结合了圆角、阴影、背景等属性，视觉效果更佳。</p> <a href="#" class="card-btn">查看详情</a> </div> </div>效果：卡片整体有柔和的圆角和轻微阴影，图片部分铺满顶部，内容区域间距合理，是现代网页中常见的组件样式。
2.5 注意事项：避免常见坑
在使用border-radius时，有几个常见问题需要注意，避免出现不符合预期的效果：
2.5.1 边框和内边距对圆角的影响
当元素设置了border或padding时，border-radius的圆角半径是相对于元素的 “外边界” 计算的，边框会跟随圆角显示，内边距不会影响圆角形状，但会影响内容与圆角的距离。
示例：
.demo-padding { width: 300px; height: 200px; background-color: #fff; border: 2px solid #ff7f50; border-radius: 12px; padding: 20px; /* 内容与边框有20px距离，圆角不受影响 */ }2.5.2 背景图片与圆角的冲突
如果元素设置了背景图片，且图片需要跟随圆角显示（不超出圆角范围），需要给元素添加overflow: hidden属性，否则图片会超出圆角，显示为直角。
示例：
.bg-with-radius { width: 300px; height: 200px; background-image: url("rose.jpg"); background-size: cover; border-radius: 12px; overflow: hidden; /* 隐藏超出圆角的图片部分 */ }2.5.3 百分比数值的注意事项
当border-radius使用百分比时，圆角半径是相对于元素的宽度和高度计算的，比如border-radius: 50%会让元素变成圆形（宽高相等）或椭圆形（宽高不等），而border-radius: 10%则表示圆角半径为元素宽度的 10%（水平方向）和高度的 10%（垂直方向）。
示例：
.percent-radius { width: 400px; height: 200px; background-color: #9370db; border-radius: 10%; /* 水平圆角40px（400px*10%），垂直圆角20px（200px*10%） */ }三、实战综合案例：打造高颜值登录页面
为了让大家更好地掌握背景属性和圆角矩形的综合运用，我们来打造一个高颜值的登录页面，融合前面所学的所有核心知识点：
3.1 页面效果描述
- 背景：使用渐变色 + 纹理图片的多重背景，实现高级质感。
- 登录卡片：居中显示，带有圆角和阴影，内部包含输入框、按钮等元素。
- 输入框：轻微圆角，聚焦时边框变色。
- 按钮：大圆角，hover 时有颜色变化。
- 头像：圆形设计，位于卡片顶部居中。
3.2 完整代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>高颜值登录页面</title> <style> /* 重置浏览器默认样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Microsoft YaHei', sans-serif; /* 多重背景：渐变+纹理 */ background: url("texture.png") repeat, linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; } /* 登录卡片 */ .login-card { width: 400px; background-color: #fff; border-radius: 20px; /* 大圆角，柔和视觉 */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); padding: 40px 30px; position: relative; } /* 圆形头像 */ .login-avatar { width: 100px; height: 100px; background-image: url("avatar-default.jpg"); background-size: cover; background-position: center; border-radius: 50%; /* 圆形 */ border: 5px solid #f5f5f5; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .login-title { text-align: center; margin: 20px 0 30px; color: #333; font-size: 24px; } /* 输入框组 */ .input-group { margin-bottom: 25px; } .input-group label { display: block; margin-bottom: 8px; color: #666; font-size: 14px; } .input-group input { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 8px; /* 输入框圆角 */ font-size: 16px; transition: border-color 0.3s ease; } .input-group input:focus { outline: none; border-color: #667eea; /* 聚焦时边框变色 */ box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2); } /* 登录按钮 */ .login-btn { width: 100%; padding: 14px; background-color: #667eea; color: #fff; border: none; border-radius: 30px; /* 大圆角按钮 */ font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease; } .login-btn:hover { background-color: #5a6edb; /* hover时颜色加深 */ } /* 底部链接 */ .login-links { text-align: center; margin-top: 20px; } .login-links a { color: #667eea; text-decoration: none; font-size: 14px; margin: 0 10px; } .login-links a:hover { text-decoration: underline; } </style> </head> <body> <div class="login-card"> <div class="login-avatar"></div> <h2 class="login-title">欢迎登录</h2> <div class="input-group"> <label for="username">用户名</label> <input type="text" id="username" placeholder="请输入用户名"> </div> <div class="input-group"> <label for="password">密码</label> <input type="password" id="password" placeholder="请输入密码"> </div> <button class="login-btn">登录</button> <div class="login-links"> <a href="#">忘记密码？</a> <a href="#">注册账号</a> </div> </div> </body> </html>运行效果如下：
3.3 代码解析
- 背景设计：使用
linear-gradient创建渐变背景，叠加texture.png纹理图片，通过repeat平铺，让背景更有质感，避免单调。 - 登录卡片：使用
border-radius: 20px创建大圆角，配合box-shadow添加阴影，提升立体感；通过position: relative和绝对定位实现头像在卡片顶部居中。 - 圆形头像：宽高相等（100px），
border-radius: 50%变成圆形，添加边框和阴影，让头像更突出。 - 输入框：
border-radius: 8px轻微圆角，聚焦时通过transition实现边框颜色平滑过渡，提升交互体验。 - 登录按钮：
border-radius: 30px大圆角，hover 时颜色加深，符合现代 UI 设计风格。
总结
背景属性和圆角矩形看似简单，但通过灵活组合和细节调整，能让网页的视觉效果提升一个档次。希望这篇文章能帮助你全面掌握这些属性的用法，在实际开发中打造出更精美的网页！如果有任何问题或疑问，欢迎在评论区留言交流～
