CSS3

简介

CSS3 是 CSS（层叠样式表）的第三代主要标准，它并不是一个单一的整体更新，而是以模块化方式逐步演进的一系列新特性和功能集合。相比 CSS2，CSS3 极大地增强了网页的表现力、交互性和布局能力，使开发者能用纯 CSS 实现许多过去需要 JavaScript 或图片才能完成的效果。

选择器增强

• 属性选择器：如 [type="text"]、[href $ =".pdf"]
• 伪类：如:nth-child(n)、:nth-of-type(n)、:first-child、:last-child、:not(selector)

盒模型与边框/背景增强

• 盒模型与边框: 如 box-sizing border-radius box-shadow border-image

• 背景增强：如 background-size background-clip background-origin 背景渐变

文本与字体增强

• 文本属性：如 text-overflow word-wrap overflow-wrap text-decoration等

• 自定义字体：如 @font-face

过渡与动画

• 变形：如 transform

• 过渡：如 transition

• 动画：如 @keyframes animation

新型布局系统

• flex布局：如 flex flex-direction flex-wrap justify-content align-items align-content

• grid布局：如 grid grid-template-columns grid-template-rows grid-gap grid-area

• 多列布局（Multi-column Layout）：如 column-count column-gap column-rule