CSS3 简介

CSS3 简介

CSS3 是 Cascading Style Sheets (层叠样式表) 的第3个主要版本，是对 CSS2 的扩展和增强。

现代浏览器对 CSS3 的支持已经相当完善，但某些特性可能需要厂商前缀。

• -webkit-(Chrome, Safari)
• -moz-(Firefox)
• -ms-(Internet Explorer)
• -o-(Opera)

CSS 主要特点

• 模块化开发：CSS3 被划分为多个独立模块，每个模块可以独立开发和更新。
• 向后兼容：CSS3 完全兼容 CSS2 的语法和特性。
• 丰富的选择器：新增了多种选择器，可以更精确地选择元素。
• 视觉效果增强：支持圆角、阴影、渐变、透明度等。
• 动画与过渡：原生支持动画效果，减少对 JavaScript 的依赖。
• 多列布局：简化复杂布局的实现。
• 媒体查询：为响应式设计提供基础。
• 模块化开发：CSS3 被划分为多个独立模块，每个模块可以独立开发和更新。

CSS 主要新特性

1. 选择器增强

• 属性选择器：[attribute^=value], [attribute$=value], [attribute*=value]
• 伪类选择器：:nth-child(), :nth-of-type(), :not()
• 伪元素：::before, ::after, ::selection

2. 边框与背景

• 圆角边框：border-radius
• 盒阴影：box-shadow
• 边框图片：border-image
• 多重背景：background-image支持多个背景图

3. 颜色与透明度

• RGBA 和 HSLA 颜色模式
• opacity属性
• 渐变：线性渐变(linear-gradient)和径向渐变(radial-gradient)

4. 文字效果

• 文字阴影：text-shadow
• 文字溢出：text-overflow
• 自定义字体：@font-face

5. 2D/3D 转换

• 2D 转换：transform: translate(), rotate(), scale(), skew()
• 3D 转换：transform: rotateX(), rotateY(), translate3d()

6. 过渡与动画

• 过渡效果：transition
• 关键帧动画：@keyframes和animation

7. 弹性盒子布局 (Flexbox)

• 灵活的布局方式：display: flex
• 容器属性：flex-direction, flex-wrap, justify-content, align-items
• 项目属性：order, flex-grow, flex-shrink, flex-basis

8. 网格布局 (Grid)

• 二维布局系统：display: grid
• 网格模板：grid-template-columns, grid-template-rows
• 网格项目放置：grid-column, grid-row

9. 媒体查询

• 响应式设计基础：@media规则
• 根据设备特性应用不同样式