主题
CSS3 新增背景属性与CSS3 新增边框属性（Day13 2/4）
本页对应 Day13_CSS3，共 6 段视频，约 1 小时 8 分。
学习目标
- 能使用
background-size的长度、百分比、cover、contain设置背景图像尺寸，并说明单值、双值及不同关键字下的显示差异。 - 能按规则书写
background复合属性，正确处理position与size的斜杠分隔，以及origin/clip冲突时的取值顺序。 - 能通过逗号分隔或复合属性为同一元素设置多背景图，并控制各背景图的位置、重复方式及重叠时的上下层顺序。
- 能使用
border-radius及四个单角属性设置圆角，正确分配一至四个值，并用斜杠分别设置 X/Y 半径制作椭圆角或圆形。 - 能使用
outline及其相关属性设置外轮廓，说明外轮廓不影响元素尺寸与布局，并能去除输入框聚焦时的默认外轮廓。 - 能使用
text-align-last设置最后一行文本的水平对齐方式，区分start、end、left、right、center、justify在单行和多行文本中的效果。
知识点
旧标准背景属性回顾
本节笔记先列出旧标准已有的背景属性：
css
background-color
background-image
background-repeat
background-position
background-attachment为什么需要：这些属性解决的是“背景颜色、图片、重复、位置、固定方式”等基础问题。
怎么想：先明确旧标准的短板——背景图只能按原尺寸显示，元素小就看不全，元素大就可能重复。
怎么做：写背景时仍可继续使用上述属性。
易错点：旧属性本身不能自由缩放背景图，别把 background-position 当成尺寸控制。
background-size：控制背景图尺寸
为什么需要：转写稿里背景图是 1600×950，元素只有 800×500，只能看到东方明珠的尖儿。旧标准没有直接调整背景图尺寸的属性，所以需要 background-size。
怎么想：它有两个方向：宽度、高度。可以写长度、百分比，也可以只写一个值让高度按比例自动计算；关键字 contain 优先保证图片完整，可能留白；cover 优先铺满元素，可能裁掉一部分。
怎么做：
css
.box {
width: 800px;
height: 500px;
background-image: url("./images/bg05.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}只写一个长度时，另一个方向按比例计算；百分比分别参照元素宽、高。
易错点：只写 100% 不等于 100% 100%，前者高度按比例，后者可能拉伸变形；contain 可能留白，cover 可能裁切；实际开发常配合 background-position: center。
background 复合属性与冲突
为什么需要：把图片、重复、位置、尺寸等写在一起更紧凑。
怎么想：旧属性的值形式差异大，顺序较自由；但新增属性后出现冲突：background-origin 与 background-clip 都可用 content-box、padding-box、border-box；background-size 和 background-position 都可写两个长度。
怎么做：复合属性中，一个 box 值同时设置原点和显示范围；两个 box 值时第一个是 origin，第二个是 clip。background-size 必须写在 background-position 后面，并用斜杠分隔：
css
.box {
background: url("./images/bg.jpg") no-repeat 0 0 / 500px 100px content-box padding-box;
}易错点：想写 size 却省略 position 不行；斜杠不能省；content-box 只写一个会同时影响原点和裁切范围。
多背景图
为什么需要：一个元素要叠多个装饰图，例如四角小图加一张大底图。
怎么想：用逗号分隔每一层背景，每层都可以单独写复合属性；位置重叠时，先写的在上层。
怎么做：
css
.box {
background:
url("./images/tl.png") no-repeat left top,
url("./images/tr.png") no-repeat right top,
url("./images/bl.png") no-repeat left bottom,
url("./images/br.png") no-repeat right bottom,
url("./images/bg05.jpg") center / cover no-repeat;
}易错点：先写的大图若写在后面会在底层；每层图片、位置、重复要各自对应清楚；多背景推荐复合写法，可读性更好。
边框圆角 border-radius
为什么需要：直角盒子生硬，圆角能做出按钮、头像、卡片。
怎么想：border-radius 可设 1 到 4 个值，从左上开始顺时针；单角属性如 border-top-right-radius 可单独设置。一个长度同时设 X/Y 半径，两个长度分别是 X 半径、Y 半径；斜杠可分别写 X 半径组和 Y 半径组。
怎么做：
css
.box {
width: 100px;
height: 100px;
background: #ccc;
border-radius: 50%;
}做正圆需要宽高相等，再设 50%。
易错点：属性名顺序是 top-right，不能写成 right-top；百分比参照元素宽高；没有边框但有背景色，圆角仍能看出来；椭圆圆角用斜杠，左右数量可不同。
外轮廓 outline
为什么需要：需要在边框外再画一圈提示线，又不希望影响布局。
怎么想：outline 有 style、width、color，复合写法和 border 类似；outline-offset 控制外轮廓与边框的距离，可负值。
怎么做：
css
.box {
outline: 5px solid #080;
outline-offset: 10px;
}易错点：外轮廓不属于盒模型，不改变元素尺寸和位置；outline-style 默认是 none；outline-offset 不是 outline 的子属性，是独立属性；输入框焦点轮廓可用 outline: none 覆盖。
text-align-last：最后一行水平对齐
为什么需要：多行文本中，text-align 主要影响整体，最后一行常需单独控制。
怎么想：新标准中 start/end 按文字起始、结束方向对齐；left/right 仍保留；justify 可两端对齐。
怎么做：
css
p {
text-align-last: end;
}易错点：它只管最后一行；只有一行时这一行就是最后一行；不要和 text-align 混用概念；justify 可能把字距拉开，实际不一定好看。
先厘清本节范围
本节虽然标题写“新增边框属性”，但转写稿实际从背景尺寸讲到背景复合、多背景图，再落到边框圆角和外轮廓，最后补了 text-align-last。学习时不要把它们割裂：背景负责“铺图”，圆角负责“改形”，外轮廓负责“加外圈”，最后一行对齐负责“文本收尾”。
背景尺寸：background-size
为什么需要：旧标准里背景图多大就只能用多大，元素尺寸和图片尺寸不匹配时，图片不是显示不全就是比例失控。怎么想：先判断目标是“完整显示”还是“铺满元素”，再决定用长度、百分比还是关键字。怎么做：转写稿中元素为 800×500，原图约 1600×950，只能看到局部；写 background-size: 200px 100px 后图片变小并继续重复。只写一个长度时，高度按比例自动计算；写百分比时，宽参照元素宽、高参照元素高。contain 优先保证图片完整，比例不合时可能留空；cover 优先铺满元素，比例不合时可能裁掉一部分，常配合 center 使用。易错点：两个 100% 可能把圆球拉成“蛋”；cover 不是“完整显示”，而是“铺满但可能裁切”。
css
.box {
width: 800px;
height: 500px;
background: url("...") no-repeat center / cover;
}背景复合属性与多背景图
为什么需要：单独写 background-image、background-repeat、background-position、background-size 很啰嗦，复合属性可一次写完；多背景则能让一个元素叠多张图。怎么想：复合属性按空格分隔，但新增属性带来两个冲突点：background-origin 与 background-clip 都可能写成 content-box 这类值；background-size 和 background-position 都可能写两个长度。怎么做：若只写一个 content-box，同时设置原点和显示范围；写两个则先原点、后显示范围。background-size 必须写在 position 后面，并用斜杠分隔，例如 center / cover。多背景用逗号分隔，先写的背景图在上层，后写的在下层；位置重叠时顺序尤其明显。易错点：想在复合属性里写 size，必须把 position 写上，哪怕写默认值；多背景不是“后写在上”，而是“先写在上”。
css
.box {
background:
url("TL") no-repeat left top,
url("TR") no-repeat right top,
url("BL") no-repeat left bottom,
url("BR") no-repeat right bottom,
url("BG05") center / cover;
}边框圆角：border-radius
为什么需要：直角盒子生硬，圆角能软化视觉边界。怎么想：先看是四个角一起设，还是单角设；再看是正圆角还是椭圆角。怎么做：单角属性名要按“先上下后左右”记，如右上角是 border-top-right-radius，不能写成 border-right-top-radius。默认值为 0；写 10px 后右上角变圆，调到 100px 弧度更大，因为 radius 是半径。单角可写两个长度，第一个是 X 半径，第二个是 Y 半径；写百分比时，X 参照元素宽，Y 参照元素高。复合属性 border-radius 可写 1 到 4 个值，从左上开始顺时针；要分别设 X/Y 半径，用斜杠，左右各可写 1 到 4 个值，数量不要求一致。易错点：没有边框时圆角仍可生效，只要有背景色也能看出来；复合属性常见写法多用于正圆角，椭圆角要理解斜杠规则。
css
.box {
border-radius: 20px;
}
.box2 {
border-radius: 100px / 10px;
}外轮廓：outline
为什么需要：有时需要在边框外再加一圈提示线，但又不希望它参与盒子模型、改变尺寸和位置。怎么想：把 outline 理解成“元素发出的外圈光”，它不占布局。怎么做：outline-style 类似 border-style，默认是 none；outline-width 写长度；outline-color 写颜色；复合属性用空格分隔。outline-offset 控制外轮廓与边框的距离，可写负值，负得越多越往内，甚至与边框重叠。易错点：outline-offset 不是 outline 的子属性，是独立属性；外轮廓再宽也不改变元素尺寸和位置，只可能盖住别的元素；输入框聚焦自带外轮廓，可用 outline: none 覆盖。
css
.box {
outline: 5px solid #080;
outline-offset: 10px;
}最后一行对齐：text-align-last
为什么需要：多行文本中，普通 text-align 往往影响整体，而设计上有时只想控制最后一行。怎么想：先确认是否多行；只有一行时，这一行就是最后一行。怎么做：text-align-last 默认 start，表示靠文字起始方向；end 靠结束方向；也保留 left、right、center，justify 可让最后一行两端对齐。易错点：start/end 与语言书写方向有关，中文从左到右时 start 近似 left；justify 会把最后一行拉开，实际不一定好看，转写稿也明确说不常用。
本节要解决什么
CSS3 对文本控制做了不少补充：最后一行怎么对齐、修饰线能不能换风格和颜色、长单词能不能断开、空白和换行怎么保留、溢出后怎么显示省略号，以及文字阴影怎么写。下面按“为什么需要→怎么想→怎么做→易错点”拆开讲。本节笔记没有配图，因此不额外插入图片；笔记中的代码会原样保留。
text-align-last：只控制最后一行
为什么需要：多行文本里，普通 text-align 主要影响整体行，但最后一行常常需要单独处理，比如标题式段落最后一行靠右或两端对齐。
怎么想：text-align-last 管的是“最后一行文本的水平对齐方式”。start 是靠文字起始方向，end 是靠文字结束方向；left/right/center/justify 则是明确的左、右、居中、两端对齐。课堂调试时把值改成 end，刷新后只有最后一行跑到右边；改成 justify，最后一行会被拉开。若段落只有一行，这一行也会被当作最后一行处理。
怎么做：
css
p {
text-align-last: end;
}易错点：属性名是 text-align-last，不要写成 text-align-last 之外的变体；转写稿里的“tax align last”应纠正为 text-align-last，“star”是 start，“N点”是 end，“just fine”是 justify。另外 start 不等同于永远靠左，它跟文字方向有关；中文从左到右时通常接近左对齐。
文本修饰线：line、style、color 分开控制
为什么需要：以前下划线、删除线比较单一；CSS3 可以把修饰线的类型、风格、颜色拆开设置，表达更细。
怎么想：text-decoration-line 管类型：none、underline、overline、line-through；text-decoration-style 管风格：solid、dashed、dotted、double、wavy；text-decoration-color 管颜色；text-decoration 是复合属性，多个值用空格分隔。
怎么做：
css
a {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: #900;
}易错点：笔记表格里的 line-throuth 是笔误，正确写法是 line-through。复合属性虽然用空格分隔，但不要把属性名和值混在一起写；类型、风格、颜色要按值的形式区分。
断行与空白：word-wrap / overflow-wrap、white-space
为什么需要：长英文单词或 URL 可能撑破容器；代码、诗歌又可能需要保留原格式和换行。
怎么想：word-wrap / overflow-wrap 控制是否允许单词内部断行，常用值是 normal 和 break-word。white-space 控制文本显示格式：normal 默认；pre 原格式显示；pre-wrap 在 pre 基础上加自动换行；pre-line 在 normal 基础上识别换行符；nowrap 强制显示成一行。
怎么做：
css
.box {
overflow-wrap: break-word;
white-space: pre-wrap;
}易错点：笔记里的 break-wrod 是笔误，正确是 break-word。pre-wrap 和 pre-line 不要混：前者更偏向保留原格式再加自动换行，后者是在普通格式基础上识别换行符。nowrap 常和溢出隐藏、省略号配合使用。
text-overflow：单行长文本显示省略号
为什么需要：列表、导航、卡片标题经常只允许一行，超出部分要显示省略号。
怎么想：笔记给的是三步：先强制一行，再隐藏溢出，最后设置省略号。三步缺一不可。
怎么做：保留笔记代码：
css
/* 将文本强制显示到一行 */
white-space: nowrap;
/* 溢出部分隐藏 */
overflow: hidden;
/* 显示省略号 */
text-overflow: ellipsis;易错点：只写 text-overflow: ellipsis 往往看不到效果，因为还没有制造“溢出并被隐藏”的条件；text-overflow 的默认值是 clip。另外要确认文字确实超出容器，否则不会出现省略号。
text-shadow：文字阴影
为什么需要：给文字增加层次、发光或立体感，比图片更轻量。
怎么想：阴影可以设置偏移位置、模糊值和颜色；多阴影用逗号分隔。颜色可以写在偏移前，也可以写在后面，笔记代码都展示了。
怎么做：保留笔记代码：
css
/* 阴影偏移 */
text-shadow: 3px 3px;
/* 阴影偏移 颜色 */
text-shadow: 4px 4px #999;
text-shadow: #900 4px 4px;
/* 阴影模糊值 */
text-shadow: 3px 3px 5px;
text-shadow: 3px 3px 15px rgba(0,0,0,.5);
/* 多阴影 */
text-shadow: 1px 1px #bbb,
2px 2px #aaa,
3px 3px #999,
4px 4px #888,
5px 5px #777,
6px 6px #666;易错点：多阴影之间是逗号，不是空格；颜色位置可前可后，但偏移值要保持“水平偏移、垂直偏移”的读法。写复杂阴影时先写单层，确认方向后再叠加多层。
课堂画面
代码示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3 背景尺寸与多背景</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
}
.box {
width: 800px;
height: 400px;
border: 2px dashed #900;
background-image: url("./images/BG05.jpg");
background-repeat: no-repeat;
/* 两个长度：宽 200px，高 100px */
background-size: 200px 100px;
}
.box2 {
width: 800px;
height: 400px;
border: 2px dashed #900;
background-image: url("./images/BG05.jpg");
background-repeat: no-repeat;
/* 只写一个长度：宽度 100%，高度按比例自动计算 */
background-size: 100%;
}
.box3 {
width: 800px;
height: 400px;
border: 2px dashed #900;
background-image: url("./images/BG05.jpg");
background-repeat: no-repeat;
/* cover：铺满元素，可能裁切；contain：完整显示，可能留白 */
background-size: cover;
background-position: center;
}
.multi {
width: 1000px;
height: 600px;
background-color: #ccc;
/* 多背景：逗号分隔，先写的在上层 */
background-image:
url("./images/BG-TL.png"),
url("./images/BG-TR.png"),
url("./images/BG-BL.png"),
url("./images/BG-BR.png"),
url("./images/BG05.jpg");
background-repeat: no-repeat;
background-position:
left top,
right top,
left bottom,
right bottom,
center;
/* 最后一层大图使用 cover */
background-size:
auto,
auto,
auto,
auto,
cover;
}
.compound {
width: 1000px;
height: 500px;
border: 2px solid #090;
/* 复合属性中 size 必须写在 position 后面，并用斜杠分隔 */
background: url("./images/BG05.jpg") no-repeat center / cover content-box;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="multi"></div>
<div class="compound"></div>
</body>
</html>关键行与易错点：
background-size: 200px 100px;两个长度分别表示背景图的宽和高；两个都写死会改变图片比例，可能被拉伸。background-size: 100%;只写一个长度时，表示背景图宽度，高度会根据图片比例自动计算。background-size: cover;让背景图自动适配元素，优先铺满整个元素，代价是图片可能显示不完整；contain优先保证图片完整显示，元素可能留白。转写稿中强调实际开发中cover更常用。- 多背景图用逗号分隔，先写的背景图会显示在上层；位置、重复、尺寸也按逗号一一对应。最后写的大图在底层。
- 复合属性中
background-size必须写在background-position后面，并用/分隔，如center / cover；如果只想写size不写position，也要把position的默认值写上，如0 0 / cover。 content-box在复合属性中只写一个时，会同时设置background-origin和background-clip；写两个时第一个是origin，第二个是clip。- 易错点：
background-size的两个长度和background-position的两个长度形式相同，复合属性中不写斜杠会被当成position。 - 代码中的图片路径需要替换成本地实际图片；图片不存在时背景图不显示，但其他样式仍会生效。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3 圆角与外轮廓</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
}
.box {
width: 400px;
height: 100px;
border: 2px solid #900;
background-color: #ccc;
padding: 20px;
margin-bottom: 20px;
}
.box01 {
/* 右上角圆角：属性名是 top-right，不能写成 right-top */
border-top-right-radius: 10px;
}
.box02 {
/* 复合属性：1~4 个值，从左上角开始顺时针 */
border-radius: 10px 30px 50px 80px;
}
.box03 {
/* 斜杠左边是 X 半径，右边是 Y 半径；两边各可写 1~4 个值 */
border-radius: 100px 30px / 40px 50px;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #09c;
text-align: center;
line-height: 100px;
color: #fff;
}
.outline-box {
width: 600px;
padding: 20px;
border: 6px dashed #900;
background-color: #ccc;
/* 外轮廓不影响元素尺寸和位置 */
outline: 5px solid #080;
/* outline-offset 是独立属性，不是 outline 的子属性 */
outline-offset: 10px;
margin-bottom: 20px;
}
.outline-box2 {
width: 600px;
padding: 20px;
border: 6px dashed #900;
background-color: #ccc;
outline: 5px solid #909;
/* 负值会向边框内部重叠 */
outline-offset: -2px;
}
</style>
</head>
<body>
<div class="box box01">右上角圆角</div>
<div class="box box02">四个角不同圆角</div>
<div class="box box03">椭圆圆角（斜杠写法）</div>
<div class="circle">圆</div>
<div class="outline-box">外轮廓 outline + outline-offset</div>
<div class="outline-box2">outline-offset 负值</div>
</body>
</html>关键行与易错点：
- 单角属性名固定为
border-top-right-radius，不能写成border-right-top-radius；顺序是先上下、后左右。 border-radius写一个长度时，同时设置 X 半径和 Y 半径；写两个长度时，第一个是 X 半径，第二个是 Y 半径。- 百分比分别参照元素宽和高，所以宽高不等时写
50%不是正圆；宽高相等再加border-radius: 50%才能得到圆形。 border-radius: 10px 30px 50px 80px;从左上角开始顺时针：左上、右上、右下、左下；1~3 个值时按 CSS 规则复制。- 斜杠写法：左边是 X 半径，右边是 Y 半径；两边各可写 1~4 个值，数量不必一致，各自按 1~4 值规则计算。
outline不是盒子模型的一部分，不影响元素尺寸和位置；outline-offset是独立属性，不是outline的子属性，可写负值，负值会向边框内部重叠。- 易错点：不要把
outline-offset写进outline复合属性里，它不是outline的子属性。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3 文本属性</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
}
.box {
width: 600px;
padding: 20px;
background-color: #ccc;
margin-bottom: 20px;
}
.box01 {
/* 最后一行靠文字结束方向对齐 */
text-align-last: end;
}
.box02 {
/* 最后一行两端对齐 */
text-align-last: justify;
}
.ellipsis {
width: 300px;
padding: 10px;
border: 1px solid #900;
/* 单行长文本显示省略号：三件套 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.shadow {
font-size: 40px;
color: #333;
/* 阴影偏移、模糊值、颜色；多阴影用逗号分隔 */
text-shadow:
1px 1px #bbb,
2px 2px #aaa,
3px 3px #999,
4px 4px #888,
5px 5px #777,
6px 6px #666;
}
.wrap {
width: 300px;
border: 1px solid #090;
/* 允许单词内部断行 */
word-wrap: break-word;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<div class="box box01">
这是一段用于测试最后一行文本水平对齐方式的文字，内容要足够长，让浏览器自动换行，这样才能看出 text-align-last 只影响最后一行的效果。
</div>
<div class="box box02">
这是一段用于测试 text-align-last: justify 的文字，最后一行会被拉开到两端对齐，实际开发中要谨慎使用。
</div>
<div class="ellipsis">
这是一段很长很长很长很长很长很长很长很长的单行文本，超出部分会显示省略号。
</div>
<div class="shadow">文本阴影</div>
<div class="wrap">
SupercalifragilisticexpialidociousSupercalifragilisticexpialidocious
</div>
</body>
</html>关键行与易错点：
text-align-last只控制最后一行文本的水平对齐方式；如果里面只有一行，那一行就是最后一行，也会生效。- 默认值是
start，表示靠文字起始方向对齐；end表示靠文字结束方向对齐。中文从左到右时，start相当于 left，end相当于 right。 text-align-last: justify;会把最后一行拉开到两端对齐，转写稿中说明这种效果不好看，实际不常用。- 单行省略号三件套缺一不可：
white-space: nowrap;强制文字显示在一行，overflow: hidden;隐藏溢出部分，text-overflow: ellipsis;显示省略号。只写text-overflow不会生效。 text-shadow的顺序是：水平偏移、垂直偏移、模糊值、颜色；多阴影用逗号分隔，可以叠加多层。word-wrap: break-word;允许单词内部断行，overflow-wrap是新名称，可以同时写以兼容。- 易错点：
text-overflow: ellipsis;必须配合overflow: hidden;和white-space: nowrap;使用，否则不会出现省略号。
常见错误
现象：单行长文本没有出现省略号，仍然换行或溢出。
原因：只写了text-overflow: ellipsis，缺少强制单行和溢出隐藏；容器宽度也未受约束。
修法：同时补齐white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，并确保元素有明确可约束的宽度。现象：在
background复合属性里写url(...) 500px 100px，尺寸不生效，图片位置反而变了。
原因：复合属性中的两个长度优先被解析为background-position，不是background-size。
修法：写成background: url(...) 0 0 / 500px 100px no-repeat;，或改用background-size子属性单独声明。现象：
background: url(...) content-box;后以为只设置了裁剪范围，实际原点和裁剪都变了。
原因：content-box这类值在复合属性中写一个会同时设置background-origin和background-clip。
修法：需要区分时写两个值，或改用background-origin、background-clip子属性分别设置。现象：
border-radius: 100px 30px / 40px 50px;后算不清每个角，误以为斜杠两边数量必须一致。
原因：斜杠左边是 X 半径、右边是 Y 半径，两边各按 1–4 个值独立展开，不要求数量一致。
修法：先分别展开 X/Y 半径，再按角对应；复杂椭圆圆角优先用单角属性写清楚。现象：把
outline-offset写进outline复合值里，外轮廓与边框的距离没有变化。
原因：outline-offset不是outline的子属性，不能塞进复合值。
修法：分开声明，例如outline: 4px dashed #080; outline-offset: 6px;，需要内缩时可用负值。现象：多背景图中，底层大图盖住了四个角的小图标。
原因：多背景重叠时先写的背景在上层，后写的在下层。
修法：按“上层先写、底层后写”的顺序排列；角标先写，铺底大图放最后。
练习
给一个
800×400的.banner设置背景图，要求不变形且尽量铺满元素；写出关键声明，并说明如果设计稿要求完整显示整张图应改用哪个关键字。用
background复合属性写出：图片a.png、不重复、位置居中、尺寸cover；再用子属性写法写出等价声明。给卡片设置四个角：左上
8px，右上 X 半径20px、Y 半径40px，右下50%，左下0。分别尝试用单角属性和border-radius斜杠写法完成。输入框聚焦时浏览器自带外轮廓，要求去除；另给按钮加
4px虚线外轮廓，并距离边框6px，且不能影响页面布局。写出关键 CSS。用多背景实现：四个角各放一个小图标且不重复，底层放一张大图并
cover居中。写出层序安排，并说明重叠时谁在上层。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 设置背景图像尺寸 | 10:01 |
| 2 | 背景复合属性 | 11:07 |
| 3 | 多背景图 | 07:00 |
| 4 | 边框圆角 | 24:07 |
| 5 | 外轮廓outline | 10:36 |
| 6 | 最后一行文字水平对齐方式 | 05:51 |
小结
- CSS3 背景、边框、文本新增属性更强调“可控适配”和“细粒度控制”，但组合使用时歧义也更多。
- 复合属性出现歧义时，优先靠分隔符和顺序消歧：
background的 position/size 用/，border-radius的 X/Y 用/。 - 背景尺寸按目标选：完整显示用
contain，铺满用cover，需要精确尺寸才写两个长度值。 - 圆角本质是半径控制；规则圆角适合复合属性，复杂椭圆圆角用斜杠或单角属性更清晰。
outline是装饰性外轮廓，不参与盒模型；不要用它替代border做占位或撑开布局。- 单行省略号是组合技，缺一不可，并且依赖容器宽度可约束。
- 多背景层序与
z-index无关，按书写顺序决定上下层；底层大图通常最后写。 - 新增文本属性多用于细节控制，实际项目中优先保证可读性、兼容性和维护成本。