CSS3学习手册
什么是CSS3？
CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。
目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。
在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。
| 前缀 | 浏览器 |
| -webkit | chrome和safari |
| -moz | firefox |
| -ms | IE |
| -o | opera |
边框
圆角效果 border-radius
语法：
border-radius: 5px 4px 3px 2px; (四个半径值分别是左上角、右上角、右下角和左下角，顺时针)
阴影 box-shadow
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
投影方式：insert(内投影)，默认为外投影
例：box-shadow:4px 2px 6px #333333 inset;
为边框应用图片 border-image
语法：
background:url(xx.jpg) 10px 20px 30px 40px repeat(round/stretch/no-repeat); 颜色之RGBA
color：rgba(R,G,B,A) A表示透明度，取值在0-1之间
background-color:rgba(100,120,60,0.5);
渐变色彩 Gradient
分为线性渐变(linear)和径向渐变(radial)。 linear-gradient(to bottom,#fff,#999); (#fff #999表示颜色的起终点，可以有多个) 第一个参数是渐变方向：
| 参数名称 | 意义 |
| to top | 下往上 |
| to right | 左往右 |
| to bottom | 上往下 |
| to top left | 右下到左上 |
| 类推 |
文本
text-overflow 与 word-wrap
text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。
语法：
text-overflow:clip(剪切)/ellipsis(显示省略标记) 但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）
word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行
语法：word-wrap:normal(表示连续文本换行)/break-word(表示内容将在边界内换行)；
normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可
嵌入字体@font-face
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
语法：
@font-face{
font-family:字体名称
src: 字体文件在服务器上的相对或绝对路径；
} 这样设置之后即可像普通字体一样使用该字体。
文本阴影 text-shadow
text-shadow: X-Offset Y-Offset blur color; X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color：是指阴影的颜色，其可以使用rgba色。
背景相关
background-origin
语法：
background-origin:border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示
background-clip
语法：
background-clip: border-box | padding-box| content-box; | no-clip; 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。 no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
背景图片的大小 background-size
语法：
background-size: auto | <长度值> | <百分比>| cover | contain 1、auto：默认值，不改变背景图片的原始高度和宽度；
2、 <长度值> ：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放； 3、 <百分比> :0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
多重背景
多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
语法缩写如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 background-color 只能设置一个
各种各样的 选择器
属性选择器
结构性伪类选择器 :root
:root选择器，根选择器，匹配元素E所在文档的根元素。在HTML文档中，根元素始终是 。“:root”选择器等同于 元素
结构性伪类选择器 :not
:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说
结构性伪类选择器 :empty
:empty用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格
结构性伪类选择器 :target
:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。（url中通常会包含#） 如：#abc:target{} 表示匹配id="abc"的元素，
结构性伪类选择器 :first-child :last-child :nth-child(n) :nth-last-child(n)
1.:first-child 选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，是子元素，而不是后代元素。
2.:last-child 选择器选择的是元素的最后一个子元素。
3.:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素；
当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素
如：
ol > li:nth-child(2n){
background: orange;
} 表示将无序列表中偶数行背景色变为橙色
4.:nth-last-child(n) 选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，表示从某父元素的最后一个子元素开始计算，来选择特定的元素
结构性选择器:first-of-type :last-of-type :nth-of-type(n) :nth-last-of-type
:first-of-type 选择器类似于:first-child 选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。如：
div>img:first-of-type{} 表示选择div下的第一个类型为img的元素
选择器 :only-child :only-of-type
:only-child 选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。 如：
ol:only-child{} 表示选择只有一个列表项的列表的列表项
:only-of-type 选择拥有很多类型子元素中类型唯一的子元素
选择器 :enabled :disabled
在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。
选择器 :checked
选择状态为checked的标签
选择器 ::selection
::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的
选择器 :read-only :read-write
:read-only 伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”
:read-write 选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。
::before ::after
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。
变形与动画
变形--旋转 rotate()
旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
变形--扭曲 skew()
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。
Skew()具有三种情况：
1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）;第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。如：
skew(45deg) 2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）;
3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）。
变形--缩放 scale()
1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）;注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。
2、scaleX(x)元素仅水平方向缩放（X轴缩放）
3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）
变形--位移 translate()
translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
2、translateX(x)仅水平方向移动（X轴移动）
3、translateY(y)仅垂直方向移动（Y轴移动）
变形--矩阵 matrix()
matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵
变形--原点 transform-origin
任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处,在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置
transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：
动画--过渡属性 transition-property
通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
- CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：
- transition-property:指定过渡或动态模拟的CSS属性
- transition-duration:指定完成过渡所需的时间
- transition-timing-function:指定过渡函数
- transition-delay:指定开始出现的延迟时间
transition-property属性:
transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：
有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。
例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}