目录
一、选择器的扩展
1. 属性选择器
2. 伪类选择器
3. 伪元素选择器
二、盒子模型的增强
1. box-sizing属性
2. 边框圆角（border-radius）
3. 盒阴影（box-shadow）
三、过渡和动画效果
1. 过渡效果
2. 动画效果
四、响应式布局
1. 媒体查询（media query）
2. 弹性布局（Flexbox）
CSS3 是 CSS (Cascading Style Sheets) 的第三个主要版本，引入了许多令人兴奋的新特性和功能。在本文中，我们将介绍 CSS3 中一些重要的新增特性，并提供相应的代码示例。
一、选择器的扩展
CSS3 引入了一些新的选择器，使得选择元素更加便捷和灵活。
1. 属性选择器
属性选择器允许按照元素的某个属性来选择元素。例如，可以根据元素的属性值选择特定的元素。
/* 选择所有带有 target 属性的链接 */
a[target] {
color: blue;
}
2. 伪类选择器
CSS3 引入了更多的伪类选择器，可以选择元素的特殊状态或位置。例如，可以选择第一个子元素、鼠标悬停的元素等。
/* 选择第一个段落元素 */
p:first-child {
font-weight: bold;
}
/* 当鼠标悬停在链接上时改变样式 */
a:hover {
color: red;
}
3. 伪元素选择器
可以用于选择元素的特定部分，例如元素的第一个字、第一个字母、之前的空白等。
p::first-letter {
/* 第一个字母的样式规则 */
}
二、盒子模型的增强
CSS3对盒子模型进行了一些改进，使得我们能够更加灵活地控制元素的布局和尺寸。
1. box-sizing属性
可以用于更改元素的盒子模型算法，使得元素的宽度和高度包括边框和内边距。
默认值是content-b