CSS3 新增
什么是 CSS3
CSS3是CSS（层叠样式表）技术的升级版本，
于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，
主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块
浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，
CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性
但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂
渐进增强和优雅降级（面试题）
渐进增强（Progressive Enhancement）：
一开始就针对低版本浏览器进行构建页面，完成基本的功能，
然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验
渐进增强相当于向上兼容
优雅降级（Graceful Degradation）：
一开始就构建站点的完整功能，然后针对浏览器测试和修复
比如一开始使用 CSS3 的特性构建了一个应用
然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览
优雅降级相当于向下兼容
区别
优雅降级是从复杂的现状开始，并试图减少用户体验的供给
而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
降级（功能衰减）意味着往回看
而渐进增强则意味着朝前看，同时保证其根基处于安全地带
CSS3 中的选择器
1、层级选择器
使用大于号（>）表示 E > F
子选择器 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
使用波浪线（+）表示 E + F
相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
使用波浪线（~）表示 E ~ F
相邻选择器类似，选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
2、属性选择器
E[attr]：只使用属性名，但没有确定任何属性值
E[attr="value"]：指定属性名和属性值(值完整)
E[attr~="value"]：指定属性名，并且具有属性值，
此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词
E[attr^="value"]：属性值是以value开头的(一部分也可以)
E[attr$="value"]：属性值是以value结束的(一部分也可以)
E[attr*="value"]：属性值中包含了value(一部分也可以)
E[attr|="value"]：属性值是value或者以“value-”开头的值
3、结构伪类选择器
(el):first-child 匹配属于任意元素的第一个子元素的 el 元素
(el):first-of-type 选择父元素中的第一个 el 元素
(el):last-child 选择所有 el 元素的最后一个子元素
(el):last-of-type 选择父元素中最后一个 el 元素
(el):empty 匹配没有子元素（包括文本节点）的 el 元素
(el):nth-child(n) 选择所有 el 元素的父元素的第 n 个子元素
(el):nth-of-type(n) 选择所有p元素第 n 个为 el 的子元素
(el):nth-last-child(n) 选择所有 el 元素倒数的第 n 个子元素
(el):nth-last-of-type(n) 选择所有p元素倒数的第 n 个为 el 的子元素
odd even numN
(el):only-child 选择所有仅有一个子元素，并且子元素是 el 元素
(el):only-of-type 选择所有仅有一个子元素中为 el 的元素
4、否定伪类选择器
:not(el) 选择所有 el 以外的元素
5、状态（表单元素）伪类选择器
:focus 选择元素输入后具有焦点
:enabled 匹配每个已启用的元素
:disabled 匹配每个被禁用的元素
:checked 匹配每个已被选中的 元素
:required 选择有"required"属性指定的元素属性
:optional 选择没有"required"的元素属性
:read-only 选择只读属性的元素属性
:read-write 选择没有只读属性的元素属性
:valid 选择所有有效值的属性
:invalid 在表单元素中的值是非法时设置指定样式
:in-range 用于标签的值在指定区间值时显示的样式
:out-of-range 选择指定范围以外的值的元素属性
6、目标伪类选择器
E:target
用来匹配文档中url中某个标志符的目标元素
url中的标志通常会包含一个#，后面带有一个标志符名称
target 实现 tab 切换的案例
CSS3 中的背景
background-clip 规定背景的绘制区域
content-box
padding-box
border-box
background-origin 规定背景图片的定位区域
content-box
padding-box
border-box
background-size 规定背景图片的尺寸 !!!
length 第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage 第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
cover 完全覆盖背景定位区域的最小尺寸
contain 完全覆盖背景定位区域的最大尺寸
多背景
background:url(),url();
CSS3 中的边框
border-radius 设置 圆角边框
每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。
如果省略左下角，右上角是相同的
如果省略右下角，左上角是相同的
如果省略右上角，左上角是相同的
border-radius: 1-4 length|% / 1-4 length|%;
按顺时针的顺序，斜杠/左边是四个圆角的水平半径，右边是四个圆角的垂直半径
但是通常我们很少写右边的参数，那就是默认右边等于左边的值
div { border-radius:10px 20px 30px 40px/40px 30px 20px 10px }
https://9elements.github.io/fancy-border-radius/ === 绘制网站
border-image
border-image-source 路径
border-image-slice 图片边框向内偏移 没有单位 一个数值
border-image-width 图像边界的宽度
border-image-repeat 平铺(repeat)铺满(round)拉伸(stretch)
border-image-outset 边框图像区域超出边框的量
border-image: source slice width outset repeat|initial|inherit;
box-shadow 设置一个或多个下拉阴影的框
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
box-shadow: h-shadow v-shadow blur spread color inset;
多个
box-shadow: h-shadow v-shadow blur spread color inset，
h-shadow v-shadow blur spread color inset;
/* 像素点阴影---- */
filter: drop-shadow(4px 4px 1px #ccc);
CSS3 中的文本效果
text-shadow 向文本添加阴影
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色。参阅 CSS 颜色值
text-shadow: h-shadow v-shadow blur color;
word-break 规定非中日韩文本的换行规则
normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行
word-break: normal|break-all|keep-all;
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行
normal 只在允许的断字点换行（浏览器保持默认处理）
break-word 在长单词或 URL 地址内部进行换行
word-wrap: normal|break-word;
text-overflow 规定当文本溢出包含元素时发生的事情
clip 修剪文本
ellipsis 显示省略符号来代表被修剪的文本
string 使用给定的字符串来代表被修剪的文本
text-overflow: clip|ellipsis|string;
CSS3 中的字体 @font-face
使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体
使用 CSS3，网页设计师可以使用他/她喜欢的任何字体
当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户
Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则
font-family 必需，规定字体的名称
src URL 必需，定义字体文件的 URL
font-stretch 可选，定义如何拉伸字体
font-style 可选，定义字体的样式
font-weight 可选，定义字体的粗细。
unicode-range 可选，定义字体支持的 UNICODE 字符范围
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff); /* IE9+ */
}
div
{
font-family: myFirstFont;
}
</style>
结合 阿里巴巴矢量图标库 iconfont 实现小图标效果
