面试题：CSS3 中有哪些新特性？

CSS3 是 CSS 技术的一次重大升级，它将 CSS 拆分为多个独立的模块，逐步推进，引入了大量新特性，极大地增强了网页的视觉表现力和布局能力。以下是 CSS3 中一些最重要的新特性，按类别进行归纳：

---

一、选择器增强

CSS3 提供了更强大、更灵活的选择器，使样式定义更精确。

• 属性选择器增强：
  • [attr^="value"]：属性值以指定值开头。
  • [attr$="value"]：属性值以指定值结尾。
  • [attr*="value"]：属性值包含指定值。
  • 例：a[href^="https"] 选择所有 HTTPS 链接。
• 结构伪类：
  • :nth-child(n)、:nth-last-child(n)：选择第 n 个子元素。
  • :first-child、:last-child、:only-child
  • :nth-of-type(n)：选择同类型中的第 n 个元素。
  • :not(selector)：排除匹配指定选择器的元素。
• UI 伪类：
  • :checked、:enabled、:disabled：用于表单元素状态。

---

二、盒模型与背景

• 圆角：
  • border-radius：轻松创建圆角边框。
  • 支持单个值、多个值（如 border-radius: 10px 5px;）。
• 阴影：
  • box-shadow：为元素添加投影。css编辑box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  • text-shadow：为文字添加阴影。
• 多背景图：
  • 支持为一个元素设置多个背景图像，用逗号分隔。css编辑background: url(bg1.png), url(bg2.png); background-position: top left, bottom right;
• 背景控制：
  • background-size：控制背景图大小（如 cover, contain）。
  • background-origin：定义背景图的起始位置。
  • background-clip：定义背景的绘制区域。

---

三、渐变与色彩

• 渐变（Gradients）：
  • linear-gradient()：线性渐变。
  • radial-gradient()：径向渐变。
  • conic-gradient()（CSS3 后续扩展）：锥形渐变。
  • 可作为 background-image 使用，替代图片。
• 色彩模式：
  • rgba()：支持透明度的 RGB 颜色。
  • hsla()：基于色相、饱和度、亮度的颜色，支持透明度。
  • transparent：明确的透明色。

---

四、变换、过渡与动画

• 2D/3D 变换（Transform）：
  • transform: translate(), rotate(), scale(), skew()。
  • 支持 3D 变换：translate3d(), perspective 等。
• 过渡（Transition）：
  • transition：定义属性变化的过渡效果。css编辑.btn { transition: background-color 0.3s ease; }
• 动画（Animation）：
  • @keyframes 定义关键帧动画。
  • animation 属性控制动画播放。css编辑@keyframes slide { from { transform: translateX(0); } to { transform: translateX(100px); } } .box { animation: slide 2s infinite; }

---

五、布局模型

• Flexbox（弹性盒子）：
  • 一维布局模型，用于对齐、分布空间。
  • 核心属性：display: flex, flex-direction, justify-content, align-items, flex-grow 等。
  • 解决了传统布局在对齐和自适应上的痛点。
• Grid（网格布局）：
  • 二维布局模型，可以同时控制行和列。
  • 核心属性：display: grid, grid-template-columns, grid-template-rows, grid-gap 等。
  • 适合复杂页面布局。

---

六、字体与文本

• 自定义字体（Web Fonts）：
  • @font-face：允许使用服务器上的自定义字体。css编辑@font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'); }
• 文本效果：
  • text-overflow: ellipsis：文本溢出显示省略号。
  • word-wrap / overflow-wrap：控制长单词换行。
  • white-space 增强控制。

---

七、其他重要特性

• 媒体查询（Media Queries）：
  • 实现响应式设计的基础。
  • 根据设备特性（如屏幕宽度、分辨率）应用不同样式。css编辑@media (max-width: 768px) { ... }
• 多列布局（Multi-column Layout）：
  • column-count, column-gap：将文本分成多列，类似报纸排版。
• 用户界面（UI）增强：
  • resize：允许用户调整元素大小。
  • outline-offset：控制轮廓的偏移。
• 滤镜（Filter）：
  • filter: blur(), brightness(), grayscale() 等，直接对元素进行视觉处理。
• 混合模式（Blend Modes）：
  • mix-blend-mode, background-blend-mode：类似 Photoshop 的图层混合效果。

---

总结

CSS3 极大地丰富了前端的视觉表现和布局能力，主要体现在：

• 选择器：更精准地定位元素。
• 视觉效果：圆角、阴影、渐变、动画等让页面更生动。
• 布局：Flexbox 和 Grid 革命性地改变了布局方式。
• 响应式：媒体查询 + 弹性单位（%, em, rem）实现跨设备适配。
• 字体：@font-face 打破了字体限制。

这些特性共同推动了现代 Web 设计的发展，使开发者能够创建出更美观、更交互、更适应各种设备的网页应用。