文本高级样式
技巧 1：文本溢出省略（单行 / 多行）
简单理解：当文本内容超过容器宽度时，自动隐藏超出部分并显示省略号（…），避免文本换行或溢出容器，保持布局整洁。
核心区别：单行省略适用于导航栏、标题等短文本；多行省略适用于卡片描述、文章摘要等长文本。
技巧 2：文本对齐与间距（精准控制排版）
除了基础的 text-align: center，还可以通过 line-height 实现单行文本垂直居中，通过 letter-spacing 调整字符间距，word-spacing 调整单词间距，让文本排版更美观、更易读。
技巧 3：文本装饰与转换（丰富文本样式）
摆脱默认的下划线链接，通过 text-decoration 自定义装饰线样式；通过 text-transform 快速实现文本大小写转换，无需修改 HTML 内容，提升开发效率。
技巧 4：文本阴影（增强视觉层次感）
给文本添加轻微阴影，让文本从背景中 “凸显” 出来，尤其适用于浅色背景下的文本、大标题等场景，视觉效果更精致，且语法简单易调整。
技巧 5：文本换行控制（避免布局错乱）
针对长数字、长英文单词等场景，通过 word-break 或 white-space 控制文本是否换行、如何换行，避免文本超出容器导致布局变形。
背景高级样式
技巧 1：背景图的自适应（避免拉伸 / 变形）
通过 background-size 和 background-position 控制背景图的尺寸和位置，实现背景图 “居中显示”“覆盖容器”“保持比例”，避免背景图拉伸变形，适配不同尺寸的容器。
技巧 2：多重背景（无需额外 DOM 元素）
可以给一个元素设置多张背景图和纯色背景，无需添加额外的 HTML 标签，简化 DOM 结构，适用于需要叠加背景的场景（如带底纹的按钮、带装饰图的卡片）。
技巧 3：背景渐变（替代纯色 / 图片，更美观）
无需使用图片，通过 CSS 渐变实现线性、径向渐变背景，颜色和渐变方向可自由调整，加载速度比图片更快，且适配所有尺寸的容器，适用于按钮、卡片、页面背景等场景。
技巧 4：背景固定（实现视差滚动基础效果）
通过 background-attachment: fixed 让背景图固定在视口中，滚动页面时背景图不跟随滚动，形成简单的视差效果，提升页面的交互视觉体验，语法简单易实现
<!-- 对应CSS示例的HTML结构，可直接运行查看效果 --> <div class="container"> <!-- 场景1：文本高级样式 --> <div class="card"> <div class="text-single-ellipsis">这是一行超长的标题文本，用于测试单行文本溢出省略效果</div> <div class="text-multi-ellipsis">这是一段多行超长的描述文本，用于测试多行文本溢出省略效果，这是一段多行超长的描述文本，用于测试多行文本溢出省略效果，这是一段多行超长的描述文本。</div> <a href="#" class="text-layout">文本排版与装饰示例</a> <div class="text-shadow">文本阴影与大写转换</div> <div class="text-break">12345678901234567890abcdefghijklmnopqrstuvwxyz这是一段长文本测试换行效果</div> </div> <!-- 场景2：背景高级样式 --> <div class="card"> <div class="bg-img">背景图自适应示例</div> <div class="bg-multi">多重背景示例</div> <button class="bg-gradient-linear">线性渐变按钮（悬浮查看效果）</button> <div class="bg-gradient-radial">径向渐变卡片示例</div> </div> </div> <!-- 背景固定示例（滚动页面查看视差效果） --> <div class="bg-fixed">背景固定（滚动页面，背景不跟随滚动）</div> <div style="height: 800px; background-color: #f5f5f5; padding: 20px; text-align: center; font-size: 18px; color: #333;"> 向下滚动页面，查看上方背景图的固定效果<br> 这是一段占位内容，用于撑起页面高度，方便测试背景固定效果 </div>/* 重置样式，消除默认边距和盒模型问题（新手友好，基础铺垫） */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 公共样式：居中布局，方便查看效果，简化样式书写 */
.container {
width: 1000px;
margin: 50px auto;
display: flex;
gap: 40px;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
.card {
width: 300px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
background-color: #fff;
}
/************************** 场景1：文本高级样式（简易复用，覆盖高频场景） **************************/
/* 示例1：单行文本溢出省略（适用于标题、导航） */
.text-single-ellipsis {
width: 260px;
font-size: 18px;
font-weight: bold;
color: #333;
/* 单行省略核心代码（3行缺一不可） */
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 隐藏超出容器的内容 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
margin-bottom: 20px;
}
/* 示例2：多行文本溢出省略（适用于卡片描述、文章摘要） */
.text-multi-ellipsis {
width: 260px;
font-size: 14px;
color: #666;
/* 多行省略核心代码（4行缺一不可，兼容现代浏览器） */
display: -webkit-box; /* 弹性盒模型（webkit内核专用） */
-webkit-line-clamp: 3; /* 显示3行，超出隐藏 */
-webkit-box-orient: vertical; /* 弹性盒模型垂直排列 */
overflow: hidden; /* 隐藏超出容器的内容 */
margin-bottom: 20px;
}
/* 示例3：文本排版与装饰（对齐、间距、装饰线） */
.text-layout {
width: 260px;
font-size: 16px;
color: #333;
/* 文本居中对齐 */
text-align: center;
/* 单行文本垂直居中（容器高度50px） */
height: 50px;
line-height: 50px;
/* 字符间距 */
letter-spacing: 2px;
/* 移除默认下划线，添加底部虚线装饰 */
text-decoration: none;
border-bottom: 1px dashed #3498db;
margin-bottom: 20px;
}
/* 示例4：文本阴影与大小写转换 */
.text-shadow {
width: 260px;
font-size: 20px;
color: #fff;
text-align: center;
/* 文本阴影：水平偏移、垂直偏移、模糊半径、阴影颜色 */
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
/* 文本大写转换（无需修改HTML） */
text-transform: uppercase;
background-color: #3498db;
padding: 10px 0;
border-radius: 4px;
margin-bottom: 20px;
}
/* 示例5：长文本换行控制（避免布局错乱） */
.text-break {
width: 260px;
font-size: 14px;
color: #666;
/* 强制换行：无论中英文、数字，超出容器宽度自动换行 */
word-break: break-all;
border: 1px solid #eee;
padding: 10px;
border-radius: 4px;
}
/************************** 场景2：背景高级样式（简易复用，覆盖高频场景） **************************/
/* 示例1：背景图自适应（居中、覆盖、不拉伸） */
.bg-img {
width: 300px;
height: 200px;
border-radius: 8px;
/* 背景图设置 */
background-image: url("https://picsum.photos/800/600");
/* 背景图居中显示 */
background-position: center;
/* 背景图覆盖容器且保持比例（不拉伸） */
background-size: cover;
/* 背景图不重复 */
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 18px;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
margin-bottom: 20px;
}
/* 示例2：多重背景（纯色背景+两张背景图，无需额外DOM） */
.bg-multi {
width: 300px;
height: 200px;
border-radius: 8px;
/* 多重背景：从左到右依次叠加（前面的背景覆盖后面的） */
background:
url("https://picsum.photos/100/100") no-repeat center 20px,
url("https://picsum.photos/200/200") no-repeat center bottom 20px,
#f5f5f5;
/* 背景尺寸分别对应背景图（按顺序） */
background-size: 80px 80px, 120px 120px, cover;
display: flex;
justify-content: center;
align-items: center;
color: #333;
font-size: 18px;
margin-bottom: 20px;
}
/* 示例3：背景渐变（线性渐变/径向渐变，替代图片） */
/* 线性渐变按钮 */
.bg-gradient-linear {
width: 300px;
height: 50px;
border: none;
border-radius: 25px;
/* 线性渐变：方向（to right 从左到右）、起始颜色、结束颜色 */
background: linear-gradient(to right, #3498db, #2ecc71);
color: #fff;
font-size: 16px;
cursor: pointer;
/* 过渡效果，hover时更平滑 */
transition: all 0.3s ease;
margin-bottom: 20px;
}
/* 鼠标悬浮修改渐变方向 */
.bg-gradient-linear:hover {
background: linear-gradient(to right, #2ecc71, #3498db);
}
/* 径向渐变卡片 */
.bg-gradient-radial {
width: 300px;
height: 200px;
border-radius: 8px;
/* 径向渐变：从中心向外、起始颜色、结束颜色 */
background: radial-gradient(circle, #f39c12, #e74c3c);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 18px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
margin-bottom: 20px;
}
/* 示例4：背景固定（简单视差效果，滚动页面查看） */
.bg-fixed {
width: 100%;
height: 300px;
/* 背景图设置 */
background-image: url("https://picsum.photos/1920/1080");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* 背景固定，不跟随页面滚动 */
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 24px;
text-shadow: 0 3px 6px rgba(0,0,0,0.5);
margin: 50px 0;
}