一、选择器增强：更精准定位元素

• 属性选择器增强：支持更精细的属性匹配，例如：
  • [attr^=value]：选中属性值以 value 开头的元素（如 a[href^="https"] 匹配所有 https 链接）；
  • [attr$=value]：选中属性值以 value 结尾的元素（如 img[src$=".png"] 匹配所有 png 图片）；
  • [attr*=value]：选中属性值包含 value 的元素（如 input[name*="user"] 匹配名称含 "user" 的输入框）。
• 结构化伪类：根据元素在 DOM 中的位置选择，例如：
  • :nth-child(n)：选中父元素的第 n 个子元素（如 li:nth-child(2) 选中第 2 个列表项）；
  • :nth-of-type(n)：选中同类型元素中的第 n 个（如 p:nth-of-type(odd) 选中所有奇数段落）；
  • :first-of-type / :last-of-type：选中同类型的第一个 / 最后一个元素；
  • :only-child：选中父元素中唯一的子元素。
• 伪元素标准化：将 :before / :after 规范为 ::before / ::after（双冒号），用于在元素前后插入内容（需配合 content 属性），例如：

二、盒模型与布局：更灵活的空间控制

• box-sizing 盒模型控制：解决传统盒模型中 padding 和 border 增加元素总宽高的问题：
  • box-sizing: content-box（默认）：宽高仅包含内容（content），padding 和 border 向外扩展；
  • box-sizing: border-box：宽高包含内容、padding 和 border，更符合直观布局需求（常用于全局重置）。
• 弹性布局（Flexbox）：一维布局模型，通过 display: flex 将容器设为弹性容器，子元素（弹性项）可灵活调整排列、对齐和空间分配，解决了传统布局中垂直居中、自适应分配空间等难题。核心属性包括 justify-content（主轴对齐）、align-items（交叉轴对齐）、flex（子元素伸缩比例）等。
• 网格布局（Grid）：二维布局模型，通过 display: grid 将容器设为网格容器，可同时控制行和列的布局，适合整体页面结构规划。核心属性包括 grid-template-columns（定义列宽）、grid-template-rows（定义行高）、grid-gap（行列间距）等。
• 多列布局（Multi-column）：让文本像报纸一样分栏显示：

三、背景与边框：更丰富的视觉效果

• 多重背景（Multiple Backgrounds）：一个元素可设置多张背景图，按顺序叠加：

• 背景尺寸（background-size）：控制背景图大小，解决图片拉伸 / 压缩问题：
  • cover：背景图缩放至完全覆盖容器（可能裁剪）；
  • contain：背景图缩放至完全放入容器（可能留白）；
  • 具体尺寸（如 100px 200px 或 50%）。
• 背景定位与裁剪：
  • background-origin：指定背景图的起始位置（content-box / padding-box / border-box）；
  • background-clip：指定背景图的绘制区域（同上，可用于实现 “内边框背景” 效果）。
• 边框增强：
  • border-radius：圆角边框（支持单角设置，如 border-top-left-radius: 10px）；
  • box-shadow：元素阴影（支持多阴影、内阴影），例如 box-shadow: 2px 2px 5px rgba(0,0,0,0.3)；
  • border-image：用图片作为边框（替代纯色边框），例如 border-image: url(border.png) 30 stretch；
  • 渐变边框：结合 background-clip 和渐变实现，例如：

四、文本效果：更细腻的文字样式

• 文本阴影（text-shadow）：为文字添加阴影，增强立体感：

• 文本溢出处理：
  • text-overflow: ellipsis：文本溢出时显示省略号（需配合 white-space: nowrap 和 overflow: hidden）；
  • word-wrap: break-word / overflow-wrap: break-word：长单词强制换行；
  • word-break: break-all：任意位置强制换行（适合英文）。
• 自定义字体（@font-face）：引入服务器端字体，摆脱系统字体限制：

五、2D/3D 转换：元素的动态变形

• 2D 转换：
  • translate(x, y)：平移（如 translate(10px, 20px) 向右下移动）；
  • rotate(deg)：旋转（如 rotate(30deg) 顺时针旋转 30 度）；
  • scale(x, y)：缩放（如 scale(0.5) 缩小至 50%）；
  • skew(x-deg, y-deg)：倾斜（如 skew(10deg, 5deg) 沿 X/Y 轴倾斜）。
• 3D 转换：在 2D 基础上增加 Z 轴（深度），需配合透视效果：
  • perspective: npx：定义 3D 空间的透视距离（值越小，立体感越强）；
  • rotateX(deg) / rotateY(deg) / rotateZ(deg)：沿 X/Y/Z 轴旋转（如 rotateY(180deg) 实现翻转）；
  • translateZ(z)：沿 Z 轴平移（控制 “远近”）；
  • transform-style: preserve-3d：让子元素保持 3D 空间（默认扁平化）；
  • backface-visibility: hidden：隐藏元素背面（翻转时避免显示反面）。

六、动画与过渡：元素的动态效果

• 过渡（transition）：实现元素从一个状态到另一个状态的平滑变化（如 hover 时的样式过渡），无需 JS：

动画（animation）：通过 @keyframes 定义关键帧，实现更复杂的自定义动画（支持循环、暂停等）：

七、其他实用特性

• 颜色模式扩展：支持 rgba()（红 - 绿 - 蓝 - 透明度）和 hsla()（色相 - 饱和度 - 明度 - 透明度），例如 rgba(255,0,0,0.5) 表示半透明红色。
• calc() 函数：动态计算长度值（支持加减乘除），例如 width: calc(100% - 50px)（容器宽度 = 父元素 100% - 50px）。
• 媒体查询（Media Queries）：响应式设计核心，根据设备特性（如屏幕宽度、分辨率）应用不同样式：

总结