[b][size=4]1. 响应式排版：一行 CSS 适配所有屏幕[/size][/b]
[code]:root {
--base-font-size: 16px;
}
p {
font-size: clamp(var(--base-font-size), 5vw, var(--base-font-size * 1.25));
}[/code][b]旧法痛点：[/b]用 JS 获取屏幕宽度，再手动设置字体大小，代码繁琐还易出兼容问题。
[b]新技核心[/b]：CSS 自定义属性 +[codeblock]clamp()[/codeblock]函数，自动适配字体大小，兼顾灵活性和规范性。
[b][size=4]2. 深色模式：自动跟随系统，无需手动切换[/size][/b]
[code]:root {
--background-color: #fff;
--text-color: #000;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #333;
--text-color: #fff;
}
}
body {
background-color: var(--background-color);
color: var(--text-color);
}[/code][b]旧法痛点：[/b]写 JS 函数监听开关点击，手动切换页面样式类，还要处理状态保存。
[b]新技核心：[/b][codeblock]prefers-color-scheme[/codeblock]媒体查询，自动识别系统配色，纯 CSS 实现无缝切换。
[b][size=4]4. 占位符动画：输入框瞬间变高级[/size][/b]
[code]input::placeholder {
transition: all 0.3s ease-in-out;
}
input:focus::placeholder {
transform: translateY(-100%);
opacity: 0.7;
}[/code][b]旧法痛点：[/b]JS 监听焦点事件，手动修改占位符文本，效果单一无动画。
[b]新技核心：[/b][codeblock]::placeholder[/codeblock]伪元素 + CSS 过渡，焦点触发位移 + 透明度变化，视觉体验拉满。
[b][size=4]5. 图片延迟加载：原生属性一键实现[/size][/b]
[code]<img src="image.jpg" alt="Lazy-loaded Image" loading="lazy">[/code][b]旧法痛点：[/b]JS 监听 DOM 加载，手动替换图片 src，还要处理滚动加载逻辑。
[b]新技核心：[/b]HTML 原生[codeblock]loading="lazy"[/codeblock]属性，浏览器原生支持，自动延迟加载非视口图片。
[size=4][b]6. 滚动触发动画：滚动即显，无需事件监听[/b][/size]
[code].animate-me {
opacity: 0;
transition: opacity 0.5s;
scroll-margin-top: 20vh;
}
.animate-me.in-view {
opacity: 1;
}[/code][b]旧法痛点：[/b]JS 监听页面滚动，计算元素位置，手动添加动画类，代码量大且耗性能。
[b]新技核心：[/b][codeblock]scroll-margin-top+CSS[/codeblock] 过渡，结合视口检测，元素进入视野自动触发动画。
[b][size=4]7. 可定制表单控件：焦点样式随心改[/size][/b]
[code]:root {
--input-border: #ccc;
--input-border-focused: #007bff;
}
.custom-input {
border: 2px solid var(--input-border);
}
.custom-input:focus-within {
border: 2px solid var(--input-border-focused);
}[/code][b]旧法痛点：[/b]JS 监听焦点 / 失焦事件，手动添加 / 移除样式类，表单多了代码超冗余。
[b]新技核心：[/b][codeblock]:focus-within[/codeblock]伪类 + CSS 变量，聚焦时自动切换样式，适配所有表单控件。
[b][size=4]8. 全页叠加菜单：纯 CSS 实现菜单开关[/size][/b]
[code]#menuToggle {
display: none;
}
#menuToggle:checked + label {
/* 菜单展开样式 */
}
label {
cursor: pointer;
}[/code][b]旧法痛点：[/b]JS 监听复选框点击，手动控制菜单显示 / 隐藏，还要处理层级问题。
[b]新技核心：[/b][codeblock]:checked[/codeblock]伪类 + 兄弟选择器，通过复选框状态控制菜单样式，无 JS 更稳定。
[b][size=4]9. 渐变边框：圆锥渐变打造炫酷边框[/size][/b]
[code].gradient-border {
border: 5px solid;
border-image: conic-gradient(from 0deg at 50% 50%, red, yellow, green, blue, purple);
border-image-slice: 1;
}[/code][b]旧法痛点：[/b]JS 动态修改边框样式，或用复杂 CSS 嵌套实现渐变，兼容性差且不易维护。
[b]新技核心：[/b][codeblock]conic-gradient[/codeblock]圆锥渐变 + [codeblock]border-image[/codeblock]，一键实现多彩渐变边框，样式可自定义。
[b][size=4]10. 多列布局：几行 CSS 实现杂志式排版[/size][/b]
[code].multi-column {
column-count: 3;
column-gap: 20px;
}[/code][b]旧法痛点：[/b]JS 动态计算列宽和间距，适配不同内容高度，代码复杂且易错位。
[b]新技核心：[/b][codeblock]CSScolumn[/codeblock]系列属性，一键设置列数、间距，自动适配内容，兼容所有现代浏览器。
[b][size=4]11. 自定义复选框 / 单选框：摆脱原生丑样式[/size][/b]
[code]input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
width: 20px;
height: 20px;
background-color: #ccc;
display: inline-block;
}
input[type="checkbox"]:checked + label {
background-color: #007bff;
}
[/code][b]旧法痛点：[/b]JS 监听复选框状态，手动修改自定义标签样式，还要处理选中状态保存。
[b]新技核心：[/b]隐藏原生控件 +[codeblock]:checked[/codeblock]伪类，用 [codeblock]label[/codeblock] 模拟控件样式，选中状态自动同步。
[b][size=4]12. 无缝页面跳转：平滑滚动一键实现[/size][/b]
[code]body {
scroll-behavior: smooth;
}[/code][b]旧法痛点：[/b]JS 编写滚动函数，计算目标位置，手动控制滚动速度，效果生硬。
[b]新技核心：[/b][codeblock]CSSscroll-behavior: smooth[/codeblock]，全局设置平滑滚动，所有锚点跳转自动生效。
[b][size=4]13. 等高列布局：Flexbox 告别高度适配[/size][/b]
[code].flex-container {
display: flex;
}
.flex-container > div {
flex: 1;
}[/code][b]旧法痛点：[/b]JS 遍历所有列，获取最大高度，再统一设置列高，窗口缩放还要重新计算。
[b]新技核心：[/b][codeblock]CSS Flexbox[/codeblock] 布局，父元素设[codeblock]display: flex[/codeblock]，子元素自动等高，灵活又省心。
[b][size=4]14. 动态渐变文本：纯 CSS 实现文字渐变色[/size][/b]
[code].gradient-text {
background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #ff8c00, #ffcd00);
}
[/code][b]旧法痛点：[/b]用 JS 或 SVG 实现文字渐变，步骤繁琐，还易出现兼容性问题。
[b]新技核心：[/b][codeblock]background-clip: text[/codeblock]+ 线性渐变，文字填充背景渐变，简单又炫酷。
[b][size=4]15. 图片文字叠加：精准定位无需 JS 计算[/size][/b]
[code].image-container {
position: relative;
}
.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}[/code][b]旧法痛点：[/b]JS 计算图片和文字的宽高，手动设置定位坐标，适配不同屏幕超麻烦。
[b]新技核心：[/b][codeblock]CSSposition[/codeblock]定位 +[codeblock]transform[/codeblock]平移，文字自动居中叠加在图片上，适配所有尺寸。