CSS3新特性面试题汇总与解析

在面试或实际项目中，提及CSS3新特性时，许多人第一反应是罗列属性名称。然而，真正的技术能力从不在于记忆名词，而在于如何精准、稳定地运用这些工具解决样式问题。一旦疏忽，例如语法错误或忽略兼容性，页面在旧版浏览器中就可能直接崩溃。本文将探讨几个最常用也最容易出错的CSS3特性，分享如何优雅且稳妥地使用它们。

border-radius 与 box-shadow：语法细节决定成败

这两个属性堪称CSS3的“门面”，但也是最常出现书写错误的区域。例如，将圆角值写为 border-radius: 5（缺少单位），或将阴影写为 box-shadow: 0 0 10 #000（缺少模糊半径后的参数），都会导致样式完全失效。

• border-radius的灵活写法：它不仅支持单值，还支持双值、四值，甚至可用斜杠定义椭圆角，例如 border-radius: 10px / 20px 表示水平半径为10px、垂直半径为20px的椭圆角。
• box-shadow的参数顺序是铁律：必须遵循水平偏移、垂直偏移、模糊半径、扩散半径、颜色的顺序。扩散半径可省略，但模糊半径不能为0后直接接颜色。因此，box-shadow: 0 0 0 #000 是合法的（无模糊、无扩散的纯色阴影），而 box-shadow: 0 0 #000 则是非法的。
• 兼容性红线：这两个属性在IE9及以上版本才得到原生支持。若项目仍需兼容IE8及以下浏览器，切勿依赖它们实现关键视觉效果，否则在这些浏览器上将显示为空白。

transition 与 animation：并非简版与完整版的关系

许多人将 transition 视为简化版的 animation，这其实是一种误解。两者的定位完全不同：transition 是“状态变化的补间动画”，而 animation 是“时间轴驱动的关键帧序列”。

• transition的触发机制：它必须依赖属性变化来触发，例如鼠标悬停（:hover）或JavaScript修改class。它只能定义起始和结束两个状态，无法实现循环、暂停，也不能定义中间停顿点。
• animation的完整控制：通过 @keyframes 定义完整的动画时间线，可实现无限循环（infinite）、暂停播放（paused），还能使用 animation-fill-mode 精确控制动画开始前和结束后的元素样式状态。
• 性能关键点：若追求流畅动画，尽量仅对 transform 和 opacity 属性使用 transition 或 animation，以触发GPU硬件加速。若对 width、height、background-color 等属性进行持续动画，会频繁触发浏览器重排与重绘，严重消耗性能。

flex 布局：看似简单，暗藏陷阱

Flex布局易于上手，但在复杂的实际项目中，常因细节处理不当导致布局错乱或内容溢出。

• 父容器需有明确约束：父容器（flex container）必须具有明确的宽度或高度，否则子项的 flex: 1 在某些嵌套场景下可能失效，无法按预期分配空间。
• 警惕内容被压缩：子项默认的 flex-shrink 值为1，这意味着空间不足时内容会被压缩。若某些子项（如固定宽度的按钮）不希望被压扁，务必显式设置 flex-shrink: 0。
• 分清主轴与交叉轴：justify-content 控制主轴（默认水平方向）的对齐，而 align-items 控制交叉轴（默认垂直方向）的对齐。新手常犯的错误是，仅使用 justify-content: center 实现水平居中，却忘了交叉轴也需要 align-items: center 来实现垂直居中。
• 多行布局的兼容性：在Safari的某些旧版本（如iOS 9.3）中，对 flex-wrap: wrap 结合 align-content 属性的支持存在问题。若需实现多行内容的复杂对齐，有时使用传统的 margin: auto 或额外添加包裹层反而更可靠。

rgba、hsla 与渐变：兼容性的隐形断层

透明色与渐变听起来很现代，但它们的兼容性边界比想象中更陡峭，尤其在一些老旧的移动端WebView和特定国产浏览器内核中。

• 透明色的降级方案：rgba() 或 hsla() 在IE9+、Android 4.4+、iOS 7+ 上基本无碍。但对于IE8，只能退而求其次使用 filter: alpha(opacity=50) 滤镜，且该滤镜针对整个元素透明，无法实现仅背景透明的效果。
• 渐变的写法与兼容：标准的 linear-gradient() 在较新浏览器中已无需前缀。但在Android 4.3及更早版本中，必须使用 -webkit-linear-gradient 前缀写法。更棘手的是，这些老旧版本在渐变颜色断点（color-stop）中不支持 rgba() 透明度，会将透明色直接渲染为黑色。
• 务必准备降级底色：一个实用技巧是，使用渐变作为背景时，务必同时设置一个纯色的 background-color。这样，当浏览器不支持渐变时，至少能显示一个底色，而非一片空白，从而保证最基本的可读性。

归根结底，掌握CSS3的难点从不在于记住属性名称，而在于真正厘清：每个特性从哪个浏览器版本开始稳定可用；哪些属性组合会触发意外的渲染错误；以及当现代写法与降级方案并存时，CSS的层叠顺序是否仍能如预期工作。这些细节，往往只有在真机调试与灰度发布过程中才会真正暴露。