共计 2637 个字符，预计需要花费 7 分钟才能阅读完成。
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”。