12-CSS3新增

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 实现小图标效果