CSS3 的新特性
1.选择器：
（1）属性选择器：
[属性名]
[属性名=属性值]
[属性名^=属性值]
[属性名$=属性值]
[属性名*=属性值]（2）伪类选择器：为特定状态的元素添加样式，例如 :hover、:active、:visited。
（3）伪元素选择器：选择特定部分的元素，例如 ::before、::after。
（4）多重选择器：使用逗号分隔来同时选择多个元素，例如 element1, element2。
2.盒模型：
2.1.边框圆角（border-radius）：可以设置元素的边框圆角。
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
复合属性：border-radius：
四个值：左上角 右上角 右下角 左下角
三个值：左上角 右上角和左下角 右下角
两个值：左上角和右下角 右上角和左下角
一个值：4个角都生效
当拿50%时，宽等于高为圆形，宽不等于高为椭圆形（百分比，参照的是元素本身的高度与宽度）。
2.2.阴影效果（box-shadow）：可以为元素添加阴影效果。
参数：
1.X轴偏移量：必需。水平阴影的位置，允许负值。
2.Y轴偏移量：必需。垂直阴影的位置，允许负值。
3.阴影模糊半径：可选。模糊距离，其值只能是正值，如果值为0，表示阴影没有模糊效果。
4.阴影扩展半径：可选。阴影的尺寸。
5.阴影颜色：可选。阴影的颜色。省略默认会黑色。
6.是否具有内阴影：可选。设置为inset时为内部阴影方式，若省略为外阴影方式。
3.颜色：
3.1.CSS3 增加了对透明度的支持，使用 rgba()、hsla() 或 opacity 来设置。
rgba(R,G,B,A)
R,G,B三个参数，正整数的取值范围为：0-255。百分数值的取值范围为0.0%-100%。A为透明度参数，取值在0-1之间，不可为负值。
例如：background-color:rgba(255,255,255,0.5);/*透明度为0.5的白色*/
3.2.CSS3增加了渐变色彩。
liner-gradient(to bottom,#fff,#999)/*to bottom渐变方向，后面两个参数表示颜色的起始点和结束点*/
第一个参数为渐变方向，可以用角度的关键词或英文来表示。
（1）0deg to top 从下向上
（2）90deg to right 从左向右
（3）180deg to bottom 从上向下
（4）270deg to left 从右向左
（5）to top left 从右下角到左上角
（6）to top right 从左下角到右上角
第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。
4.背景：
4.1.background-image
语法：
background-image:url('1.jpg),url('2.jpg')
使用逗号把图片分开
注意：元素引入多个背景图片，前面图片会覆盖后面的图片。
4.2.background-size：更改背景图像的大小。
4.3.background-repeat：更改背景图像的重复行为。
属性值：
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
4.4background-position：在水平和垂直方向上移动背景图像。
6.文字效果：
text-shadow：为文本添加阴影效果。
text-overflow：处理溢出文本的显示方式。
属性有两个值选择：
clip：修剪文本
ellipsis：显示省略符号来代表被修剪的文本
7.布局和流式布局：
Flexbox：用于一维布局的 CSS3 新布局模型。
Grid：用于二维布局的 CSS3 新布局模型。
8.多列布局（Multi-column Layout）：CSS3 提供了一种创建多列文本或布局的方法，类似于报纸的排版。
9.动画和过渡（Animations and Transitions）：CSS3 支持关键帧动画和过渡效果，用于在 CSS 中创建动态效果。动画可以通过 transition 和 animation 属性进行控制。
10.响应式设计（Responsive Design）：CSS3 提供了一些特性，如媒体查询（Media Queries），允许开发人员创建在不同设备和屏幕尺寸上都能良好显示的响应式网页设计。
CSS3动画
定义: 使元素从一种样式逐渐变化到另外一种样式的效果。
@keyframes
定义：keyframes译为关键帧，也叫关键帧动画，用来决定动画变化的关键位置。
注意：keyframes 控制关键位置，并不是所有的位置。
语法：@keyframes animationname{
keyframes-selector{
样式代码；
}
}animationname：必写项，定义动画的名称
keyframes-selector：必写项，动画持续时间的百分比 0% - 100%之间， 或者使用form和to关键字也可以设置，form代表0%，to代表100%
示例:
@keyframes abc {
from{transform: rotate(0)}
50%{transform:rotate(90deg)}
to{transform: rotate(360deg)}
}
Animation(执行动画) 属性是以下属性的简写形式：
animation-name：必须的。规定 @keyframes 动画的名称。
animation-duration：必须的。指定一个动画周期的时长。默认是 0s，表示无动画。
animation-timing-function：可选的。规定动画的速度曲线。
animation-delay：可选的。规定动画何时开始，值可以是所有的整数。默认是 0。
animation-iteration-count：可选的。规定动画被播放的次数。默认是 1。
animation-direction：可选的。指示动画是否反向播放。
animation-fill-mode：可选的。规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state：可选的。规定动画是否运行或暂停。默认是 “running”。