把之前学习的CSS3现在做了一个总结，加深印象。
1.CSS3表框 圆角 border-radius
>
border-radius:4px 3px 2px 1px;
左上角4px，右上角3px，右下角2px，左下角1px
2.CSS3边框 阴影 box-shadow
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
X轴偏移量：必需，水平阴影的位置，允许负值。
Y轴偏移量：必需，垂直阴影的位置，允许负值。
阴影模糊半径： 可选，模糊距离。
阴影扩展半径： 可选，阴影的尺寸。
阴影颜色：可选，阴影的颜色，省略默认为黑色。
投影方式：可选。（设置inset时为内部阴影方式，如果省略为外阴影方式）。
对于外阴影而言：开始坐标点是以左上为原点，x，y都为正，则像右下偏移，x正，y负，
则像右上偏移，x负，y为正，则像坐下偏移，x,y都为负则像左上偏移 ,也可以理解为x的值是：右正,左负 y的值是：下正,上负；
对于内阴影则是开始坐标点是以右下为原点。
3.CSS3边框 为边框应用图片 border-image
与background属性相似
border-image:路径 切割图片的宽度 图片延伸的方式
图片延伸的方式分为：round(平铺)、repeat(重复)、stretch(拉伸)
4.CSS3颜色 颜色之RGBA
RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。
语法：color：rgba(R,G,B,A)
以上R、G、B三个参数，正整数值的取值范围为：0 - 255。
百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。
并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。
5.CSS3颜色 渐变
线性渐变：background-image:linear-gradient(angle, color-stop1, color-stop2); ==》 角度
background: linear-gradient(direction, color-stop1, color-stop2, …); ==》 方向
angle ==》 表示渐变角度
direction ==》（to top （0deg 从下向上)）、（to right （90deg 从左向右））、（to bottom （180deg 从上向下））、（to left （270deg 从右向左））、（to top left （右下角到左下角））、（to top right （左下角到右上角））
color-stop1,color-stop2,… ==》 表示颜色的起始点和结束点，可以有多个色值
径向渐变：background-image:radial-gradientradial-gradient(center, shape, size, start-color, …, last-color);
center ==》 渐变起点的位置，可以为百分比，默认时圆形的正中心。
shape ==》 渐变的形状，elipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
size ==》 渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角；
farthest-corner：最远角
6.CSS3文字与字体 text-overflow 与 word-wrap
text-overflow:用来设置是否使用一个省略标记（…）标示对象内文本的溢出
text-overflow:clip(表示剪切) | ellipsis（表示显示省略标记）
text-overflow只是用来说明文字益出时的方式显示，要实现溢出产生的省略号的效果，还需定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）,只有这样才能实现溢出文本显示省略好的效果，代码如下：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
同时word-wrap：可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。
word-wrap:normal(控制连续文本换行)|break-word（两边内容在边界内换行）
7.CSS3文字与字体 嵌入字体@font-face
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
语法：
@font-face{
font-family:”字体名称:;
src:url(字体文件在服务器上的相对或绝对路径);
}
设置后，就可以使用普通字体一样在（font-*）中设置字体样式，与@font-face设置的名称相同
8.CSS3文字与字体 文本阴影text-shadow
text-shadow可以用来设置文本的阴影效果。
语法：text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color：是指阴影的颜色，其可以使用rgba色。
9.CSS3背景 background-origin
background-origin:设置元素背景图片的原始起始位置
语法：background-origin: border-box(背景图从边框开始显示) | padding-box(内边距开始显示-默认值) | content-box (内容区域开始显示)
注意：如果背景不是no-repeat,这个属性无效，会从边框开始显示
10.CSS3背景 background-clip
background-clip:用来将背景图片做适当的裁剪以适当实际需要
语法：background-clip: border-box(从边框向外裁剪背景-默认值) | padding-box(内填充向外裁剪背景) | content-box(内容区域向外裁剪背景) | no-clip(表示不裁切，和参数border-box显示同样的效果)
11.CSS3背景 background-size
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
语法：background-size: auto | <长度值> | <百分比> | cover | contain
取值说明：
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
12.CSS3背景 multiple backgrounds
多重背景，也就是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-image:url1,url2,…,urlN;
background-repeat : repeat1,repeat2,…,repeatN;
backround-position : position1,position2,…,positionN;
background-size : size1,size2,…,sizeN;
background-attachment : attachment1,attachment2,…,attachmentN;
background-clip : clip1,clip2,…,clipN;
background-origin : origin1,origin2,…,originN;
background-color : color;
注意：
用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 “/“ 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。
例子：
13.CSS3选择器 属性选择器
E[att^=val] ==>匹配元素E，且E定义了属性 att，其属性以 val”开头”的任何字符串
E[att$=val] ==>匹配元素E，且E定义了属性 att，其属性以 val”结束”的任何字符串
E[att*=val] ==>匹配元素E，且E定义了属性 att，其属性”包含”了val的任何位置相匹配
14.CSS3 结构性伪类选择器–root
:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。
“:root”选择器等同于元素
:root{background:green;} == html{background:orange;}
建议使用:root方法
另外在IE９以下还可以借助“:root”实现hack功能。
15.CSS3 结构性伪类选择器–not
:not选择器称为否定选择器
语法：input:not([type=”submit”]){….}
注意not有括号包含。
16.CSS3 结构性伪类选择器–empty
:empty选择器表示的就是空。
用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
17.CSS3 结构性伪类选择器–target
:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素
a标签的路径链接名称要与id的名称相对应
点击此链接显示或添加此段落的样式
例子：
|
|
18.CSS3 结构性伪类选择器
:first-child 选择器表示的是选择父元素的“第一个”子元素的元素E。
:last-child 选择器表示的是选择父元素的“最后一个”子元素的元素E。
:nth-child(n) 选择器用来定位某个父元素的一个或多个特定的子元素。
其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
:nth-last-child(n) 从某父元素的最后一个子元素开始计算，来选择特定的元素。
:first-of-type 选择器，指定了元素的类型，其主要用来定位一个父元素下的某个类型的第一个子元素
例如： .wrapper > div:first-of-type{…}
.wrapper下面的第一个div
:last-of-type 选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。
:nth-of-type(n) 选择器用来定位于父元素中某种类型的子元素
:nth-last-of-type(n) 选择器和“:nth-of-type(n)” 选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始
:only-child 选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
:only-of-type 是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
19.CSS3选择器
:enabled ==> 可用
:disabled ==> 不可用
::selection 伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。
火狐模式下需要使用兼容
::selection{background:orange;color:white;}
::-moz-selection{background:orange;color:white;}
:read-write ==> 文本框为非只读
:read-only ==> 文本框为只读
::before和::after这两个主要用来给元素的前面或后面插入内容
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
作用是一样的，如果网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全