图解CSS3:核心技术与案例实战
本书是国内著名的Web前端专家历时两载的心血之作。它依据最新的CSS3标准撰写，融入了作者在CSS领域多年的使用经验，旨在成为CSS3领域最权威、实用的专业著作，既可供零基础的读者系统学习，也能为有经验的读者提供参考。
一、内容概述
本书的理论知识系统全面，详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应式Web设计、Web字体等主题下涵盖的所有CSS3新特性。这些知识并非以枯燥的理论形式呈现，而是巧妙地融入到案例中。讲解方式直观易懂，采用图解的方式展示新特性。同时，本书实战性强，不仅为每个知识点精心设计了小案例，还有综合性的大案例。所有案例都有详尽的功能需求分析、设计思路、完整代码以及最终的效果展示。
二、大纲
前言
第1章 揭开CSS3的面纱
- 什么是CSS3
- CSS3的新特性：CSS3在CSS2.1基础上增加了众多强大功能，如圆角、多背景、透明度、阴影等，且被划分为多个模块组，各模块有独立规范，有利于规范的推进。
- CSS3的发展状况：介绍CSS3从发展至今的大致历程。
- 现在能使用CSS3吗：探讨在当前技术环境下使用CSS3的可行性。
- 使用CSS3有什么好处：阐述使用CSS3能为开发带来的优势，如简化开发流程等。
- 浏览器对CSS3的支持状况
- 经典回顾：图说浏览器大战：回顾浏览器发展历程中的竞争情况。
- 浏览器的市场份额：分析不同浏览器在市场中的占比。
- 主流浏览器对CSS3支持状况：具体介绍各大主流浏览器对CSS3特性的支持程度。
- 渐进增强
- 渐进增强与优雅降级：解释这两种开发理念的区别。
- 渐进增强的优点：说明采用渐进增强开发方式的益处。
- CSS3的现状及未来
- 谁在使用CSS3：列举使用CSS3的用户群体。
- CSS3的未来：对CSS3的发展前景进行展望。
- 本章小结
第2章 CSS3选择器
展开阅读
三、前言：为什么要写这本书
CSS3是在CSS2.1基础上扩展而来，目前尚未完全成熟。有些专家认为CSS3现在还无法使用，甚至几年后都不会有成熟的规范发布。当前，CSS3没有一套成熟的规范，其模块不断更新，浏览器对CSS3特性的支持也在持续变化，而且开发者没有足够时间学习和研究W3C官方文档和规范，这使得学习CSS3变得更加复杂。
然而，对于Web应用开发者而言，CSS3是众望所归，也是技术变更的硬性需求。在实际Web应用中，新标准的采纳速度极快，众多浏览器厂商也在加速对CSS3新特性的支持。在编写本书的过程中，作者不断更新书中的浏览器支持表格。
大多数用户并不了解自己使用的浏览器功能有多强大，即使浏览器自动更新后有细微界面变化，他们也可能不知道新版浏览器对哪些CSS3特性有所支持。本书的目标是帮助开发者更好地掌握CSS3特性，并将其运用到实际开发中，提高Web程序开发水平。
本书面向的读者
- 有一定CSS3开发经验的前端工程师：本书能帮助他们系统掌握CSS3的各项知识，提升技术水平和业务能力。
- 从事CSS3开发的前端工程师：由于CSS3涵盖的新特性众多，开发过程中可将本书作为速查手册，提高开发效率。
- 前端开发爱好者：即使不是专业的前端工程师，本书也能让他们对最新的CSS标准和规范有系统、全面的认识，为学习前端知识打下基础。
本书的特色
- 内容全面、丰富、翔实：由浅到深讲解CSS3新特性的语法、特性和使用技巧，涵盖CSS3选择器特性、边框模块、文本模块、颜色模块、UI界面模块、CSS3动画模块、CSS新型盒模型以及CSS媒体查询、响应式设计等众多功能模块。
- 图解方式，直观易懂：图解是本书的最大特色之一。在描述每个CSS3特性时，都配有生动的实战效果，甚至每一步骤都有相应的效果图。即使对文字或代码理解有误差，实战效果图也能辅助更好地理解CSS3特性。
- 案例丰富，实战性强：每个CSS3特性都有实战体验，部分案例来自实际开发。每个知识点后还提供综合案例，通过实践加强动手能力，帮助读者更好地掌握CSS3知识点。
书摘
第1章 揭开CSS3的面纱
如果关注前端技术，对CSS一定不陌生，也肯定听说过CSS3。在使用CSS3之前，需要对这个新一代样式表语言的来龙去脉有基本了解。
本章将介绍CSS3与CSS2.1的区别，以及当前主流浏览器、移动端浏览器对CSS3的支持情况。对于不完全支持CSS3的浏览器，会引入渐进增强的概念，介绍用CSS方法模拟CSS3的实现方式。最后，简单介绍CSS3引入的新特性及其未来前景。
1.1 什么是CSS3
CSS并非一门新语言，是创建网页的重要组成部分，是一种层叠样式表，用于告诉浏览器如何渲染Web页面。
CSS3是CSS规范的最新版本，在CSS2.1基础上增加了许多强大新功能，如圆角、多背景、透明度、阴影等，开发人员无需使用非语义标签、复杂的JavaScript脚本和图片。CSS2.1是单一规范，而CSS3被划分为多个模块组，各模块有独立规范，避免部分模块影响整体规范的发布。
下面来了解CSS3激动人心的新特性。
1.1.1 CSS3的新特性
CSS3规范并非独立，重复了CSS部分内容并进行了增补与修改。与之前版本相比，CSS3的变化是革命性的，虽部分属性浏览器支持不完善，但展现了网页样式的发展前景。
CSS3新特性众多，这里介绍一些浏览器支持较好、实用性强的新特性。
- 强大的CSS3选择器：使用过jQuery的人知道其选择器功能强大、使用方便，CSS3选择器与之类似。它允许设计师直接指定HTML元素，无需添加不必要的类名、ID等，能更好地实现结构与表现分离，设计出简洁、轻量级的Web页面，便于样式的维护和修改。
- 抛弃图片的视觉效果：Web中常见的圆角、阴影、渐变背景、半透明、图片边框等视觉效果，以往依赖图片或JavaScript脚本实现。CSS3的新特性可直接创建这些效果，后续章节将进行展示。
- 背景的变革：CSS中的背景有诸多限制，而CSS3带来了革命性变化。它增加了background - origin、background - clip、background - size等新属性，还支持在一个元素上设置多个背景图片，无需多余标签即可实现复杂的Web页面效果，如滑动门效果。
- 盒模型变化：盒模型在CSS中至关重要，CSS中的盒模型功能有限，特殊功能需借助JavaScript实现。CSS3对此进行了改善，如弹性盒子属性引入了全新的布局概念，在移动端布局中功能强大，相关内容将在第7章、第8章介绍。
- 阴影效果：后续会详细介绍CSS3实现阴影效果的方法和应用场景。