HTML面试题CSS3新特性_html面试题CSS3新特性汇总干货

border-radius与box-shadow需严格遵循语法规范才能生效：border-radius支持px/%/em及斜杠椭圆写法（如10px/20px），box-shadow参数顺序固定且模糊半径不可省略（0 0 0 #000合法，0 0 #000非法），IE9+才原生支持。

CSS3 新特性不是“一堆名词列表”，而是解决具体样式问题的工具集；用错地方或忽略兼容性，反而会让页面在旧浏览器里直接崩掉。

border-radius 和 box-shadow 怎么用才不翻车

这两个是最常被误写的属性：圆角值写成 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 及以下会完全忽略——如果项目还要兼容 IE8，别指望靠它做关键视觉效果

transition 和 animation 的核心区别在哪

很多人把 transition 当成简版 animation，其实它们定位完全不同：前者是“状态变化的补间”，后者是“时间轴驱动的关键帧序列”。

• transition 必须依赖属性变化触发（如 :hover 或 JS 改 class），且只能定义起始→结束两个状态；没有循环、无暂停控制、不能定义中间停顿点
• animation 由 @keyframes 定义完整时间线，支持 animation-iteration-count: infinite、animation-play-state: paused，还能用 animation-fill-mode 控制动画前后样式保持
• 性能上，只对 transform 和 opacity 做 transition 才能触发硬件加速；其他属性（如 width、height、background-color）会频繁触发重排/重绘

flex 布局在真实项目里最常踩的坑

Flex 看似简单，但实际布局中经常因为父容器没设高度、子项没设 flex-shrink、或混淆 align-items 与 justify-content 导致内容溢出或错位。

立即学习“前端免费学习笔记（深入）”；

• 父容器必须有明确宽度/高度约束，否则 flex: 1 在某些场景下会失效（尤其嵌套 flex 容器时）
• 子项默认 flex-shrink: 1，内容超长时会被压缩；若不想压缩，显式写 flex-shrink: 0
• align-items 控制交叉轴对齐（对 row 主轴就是垂直方向），justify-content 控制主轴对齐；新手常把居中逻辑全堆在 justify-content: center 上，忘了交叉轴也要配 align-items: center
• Safari 旧版本（iOS 9.3、macOS 10.11）对 flex-wrap: wrap + align-content 支持有问题，真要多行居中，优先考虑用 margin: auto 或额外 wrapper

rgba、hsla 和渐变的实际兼容边界

透明色和渐变不是“写了就能用”，它们的兼容性断层比想象中更陡——尤其是移动端 WebView 和部分国产浏览器内核。

• rgba(0,0,0,0.5) 在 IE9+、Android 4.4+、iOS 7+ 可用；IE8 只能退到 filter: alpha(opacity=50)（仅支持整块元素透明，不支持背景透明）
• linear-gradient 在 Chrome 26+/Firefox 16+/Safari 6.1+ 支持无前缀写法；但 Android 4.3 及更早需 -webkit-linear-gradient，且不支持 color-stop 里的透明度写法（rgba() 会当黑处理）
• 使用渐变做按钮背景时，务必加一层纯色 background-color 作为降级：浏览器不识别渐变时至少显示底色，而不是空白

真正难的不是记住哪些属性叫什么，而是清楚每个特性在哪个浏览器版本开始稳定、哪些组合会触发渲染 bug、以及当降级方案和现代写法共存时，CSS 层叠顺序是否仍符合预期。这些细节往往只在真机调试和灰度发布时才暴露出来。