CSS3课程

1

第一章：Css3属性选择器

1.1 - E[attr]：只使用属性名，但没有确定任何属性值

1.1.1 - 例：[target] 选择所有带有target属性元素 1

1.2 - E[attr="value"]：指定属性名，并指定了该属性的属性值

1.2.1 - 例：[target=_blank] 选择 target="_blank" 的所有元素。 1

1.3 - E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的"~"不能不写

1.3.1 - 例：[title~=flower] 选择title属性包含单词"flower"的所有元素 1

1.4 - E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的

1.4.1 - 例：a[src^="https"] 选择每一个src属性的值以"https"开头的元素 1

1.5 - E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的

1.5.1 - 例：a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 a 元素。 1

1.6 - E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value

1.6.1 - 例：a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 a 元素。 1 2

1.7 - E[attr|="value"]：指定了属性名，并且属性值是value或者以"value-"开头的值（比如说zh-cn）

1.7.1 - 例：[lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 1

1.7 - 【备注：支持IE7及以上浏览器 】

其它平台手册： CSS 选择器演示 W3School手册 runoob手册

2

第二章：Css3结构性伪类

2.1 - E:nth-child(n)：表示E父元素中的第n个子节点 1

2.1.1 - p:nth-child(odd){background:red}/*匹配奇数行*/ 1

2.1.2 - p:nth-child(even){background:red}/*匹配偶数行*/ 1

2.1.3 - p:nth-child(2n){background:red} 1

2.1.4 - 例：p:nth-child(2) 选择每个p元素是其父级的第二个子元素 1

2.2 - E:nth-last-child(n)：表示E父元素中的第n个字节点，从后向前计算

2.2.1 - 例：p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 1

2.3 - E:nth-of-type(n)：表示E父元素中的第n个字节点，且类型为E

2.3.1 - 例：p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素 1

2.4 - E:nth-last-of-type(n)：表示E父元素中的第n个字节点，且类型为E,从后向前计算

2.4.1 - 例：p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 1

2.5 - E:first-child：表示E元素中的第一个子节点

2.5.1 - 例：p:first-child 指定只有当p元素是其父级的第一个子级的样式。 1

2.6 - E:last-child ：表示E元素中的最后一个子节点

2.6.1 - 例：p:last-child 选择每个p元素是其父级的最后一个子级。 1

2.7 - E:first-of-type：表示E父元素中的第一个子节点且节点类型是E的

2.7.1 - 例：p:first-of-type 选择每个p元素是其父级的第一个p元素 1

2.8 - E:last-of-type：表示E父元素中的最后一个子节点且节点类型是E的

2.8.1 - 例：p:last-of-type 选择每个p元素是其父级的最后一个p元素 1

2.9 - E:only-child：表示E元素中只有一个子节点。注意：子节点不包含文本节点

2.9.1 - 例：p:only-child 选择每个p元素是其父级的唯一子元素 1

2.10 - E:only-of-type ：表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

2.10.1 - 例：p:only-of-type 选择每个p元素是其父级的唯一p元素 1

支持浏览器

3

第三章：伪类和伪元素

3.1 - E:target：表示当前的URL片段的元素类型，这个元素必须是E

3.1.1 - 例：#news:target 选择当前活动的#news元素（包含该锚名称的点击的URL） R 1

3.2 - E:disabled：表示不可点击的表单控件

3.2.1 - 例：input:disabled 选择每一个禁用的输入元素 1

3.3 - E:enabled：表示可点击的表单控件

3.3.1 - 例：input:enabled 选择每一个已启用的输入元素 1

3.4 - E:checked：表示已选中的checkbox或radio

3.4.1 - 例：input:checked 选择每个选中的输入元素 1

3.6 - E:not(s)：表示E元素不被匹配

3.6.1 - 例：:not(p) 选择每个并非p元素的元素 1

3.7 - E~F：表示E元素毗邻的F元素

3.7.1 - 例：p~ul 选择p元素之后的每一个ul元素 1

3.7.2 - 例：模拟单选框 1

3.8 - E:first-line：表示E元素中的第一行

3.8.1 - 例：p:first-line 选择每一个P元素的第一行

3.9 - E:first-letter：表示E元素中的第一个字符

3.9.1 - 例：p:first-letter 选择每一个P元素的第一个字母

2.10 - E:empty：表示E元素中没有子节点。注意：子节点包含文本节点

2.10.1 - 例：p:empty 选择每个没有任何子级的p元素（包括文本节点） 1

3.5 - E::selection：表示E元素在用户选中文字时

3.5.1 - 例：::selection 匹配元素中被用户选中或处于高亮状态的部分

3.11 - E::before：生成内容在E元素前

3.11.1 - 例：p:before 在每个p元素之前插入内容

3.12 - E::after：生成内容在E元素后

3.12.1 - 例：p:after 在每个P元素之后插入内容

3.12.2 - Content 属性：设置伪元素的内容

3.12.2 - 例：文本新增伪类综合实例 1

4

第四章：文本新增属性——新增颜色模式、文字阴影、文字描边、其它文本功能

4.1 - 新增颜色模式

4.1.1 - RGBA（红，绿，蓝，alpha）

4.1.1.1 - Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

4.1.1.2 - 例： background-color:rgba(255,0,0,0.5); 1 2 3

4.1.1.3 - 支持浏览器：IE9, Firefox3+, Chrome, Safari,和Opera10+

4.1.2 - HSL（色调，饱和度，亮度）

4.1.2.1 - HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。

4.1.2.2 - 色相：是在色轮上的程度（从0到360）。0（或360）是红色的，120是绿色的，240是蓝色的。

4.1.2.3 - 饱和度：是一个百分比值。0％意味着灰色和100％的阴影，是全彩。

4.1.2.4 - 亮度： 也是一个百分点。0％是黑色的，100％是白色的。

4.1.2.5 - 例：background-color:hsl(120,65%,75%);

4.1.2.5 - 支持浏览器：IE9, Firefox, Chrome, Safari,和Opera 10+

4.1.3 - HSLA（色调，饱和度，亮度，alpha）

4.1.3.1 - 其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

4.1.3.2 - 例：background-color:hsla(120,65%,75%,0.3);

4.1.3.3 - 支持浏览器：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+

4.2 - 文字阴影

4.2.1 - text-shadow：x y blur color, …

4.2.1.1- x：横向偏移

4.2.1.2- y：纵向偏移

4.2.1.3- blur：模糊距离

4.2.1.4- color：阴影颜色

4.2.1.5- 文本阴影如果加很多层，会很卡很卡很卡

4.2.2 - 文字阴影应用

4.2.2.1- 最简单用法

4.2.2.1.1- text-shadow:2px 2px 4px black 1 2

4.2.2.2- 阴影叠加

4.2.2.2.1- text-shadow:2px 2px 0px red, 2px 2px 4px green; 1

4.2.2.2.2- 先渲染后面的，再渲染前面的

4.2.2.3- 几个好玩的例子

4.2.2.3.1- 层叠1

4.2.2.3.2- 光晕1

4.2.2.3.3- 火焰文字1

4.2.2.3.4- 文字模糊1

4.3 - 文字描边

4.3.1 - -webkit-text-stroke:宽度 颜色（只支持-webkit-） 1

4.4 - 特殊文本功能【以下属性兼容所有主流浏览器】

4.4.1 - Direction 定义文字排列方式(全兼容) 1

4.4.1.1 - Rtl 从右向左排列

4.4.1.2 - Ltr 从右向左排列

4.4.1.3 - 注意要配合unicode-bidi 一块使用

4.4.2 - Text-overflow 定义省略文本的处理方式

4.4.2.1 - clip 无省略号

4.4.2.2 - Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用) 1

4.4.3 - white-space (white-space属性指定元素内的空白怎样处理) R

4.4.3.1 - normal：默认。空白会被浏览器忽略。

4.4.3.2 - pre：空白会被浏览器保留。其行为方式类似 HTML 中的<pre>标签。

4.4.3.3 - nowrap：文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止

4.4.3.4 - pre-wrap：保留空白符序列，但是正常地进行换行。

4.4.3.5 - pre-line：合并空白符序列，但是保留换行符。

4.4.3.6 - inherit：规定应该从父元素继承 white-space 属性的值。

4.4.3.7 - 例：white-space:nowrap; 文本不进行换行

4.4.4 - word-wrap (word-wrap属性允许长单词或 URL 地址可以自动换行) R

4.4.4.1 - normal：只在允许的断字点换行（浏览器保持默认处理）。

4.4.4.2 - break-word：在长单词或 URL 地址内部进行换行。

4.4.5 - word-break (word-break属性指定非CJK脚本的断行规则) R

提示:CJK脚本是中国，日本和韩国（"中日韩"）脚本。

4.4.5.1 - normal：使用浏览器默认的换行规则。

4.4.5.2 - break-all：允许在单词内换行。

4.4.5.3 - keep-all：只能在半角空格或连字符处换行。

4.4.5 - word-wrap、white-space和word break的区别 R

4.5 - 自定义字体 @font-face 规则 R

4.5.1 - 实例：指定名为"myFirstFont"的字体，并指定在哪里可以找到它的URL：

    @font-face{
        font-family: myFirstFont;
        src: url('Sansation_Light.ttf'),
        url('Sansation_Light.eot'); /* IE9 */
    }
    

4.5.2 - 实例：指定名为"miaov"的字体，详细字体文件引用

    @font-face {
        font-family: 'miaov';
        src:url(../fonts/glyphicons.eot);
        src:url(../fonts/glyphicons.eot?#iefix) format('embedded-opentype'), 			
        url(../fonts/glyphicons.woff2) format('woff2'), 
        url(../fonts/glyphicons.woff) format('woff'), 
        url(../fonts/glyphicons.ttf) format('truetype'), 
        url(../fonts/glyphicons.svg#glyphicons_halflingsregular) format('svg')
    }
    

4.5.3 - 浏览器支持情况

Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 规则.

但是, Internet Explorer 9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体.

注意： Internet Explorer 8 及更早IE版本不支持@font-face 规则.

4.5.4 - 转换字体格式生成兼容代码网站链接-> url

5

第五章：弹性盒模型

5.1 - 弹性盒模型[display:box]（2009年草案命名）

5.1.1 - 注意：在使用弹性盒模型的时候 父元素必须要加display:box 或 display:inline-box 1

5.1.2 - Box-orient 定义盒模型的布局方向 1

5.1.2.1 - Horizontal 水平显示

5.1.2.2 - vertical 垂直方向

5.1.3 - box-direction 元素排列顺序1

5.1.3.1 - Normal 正序

5.1.3.2 - Reverse 反序

5.1.4 - box-ordinal-group 设置元素的具体位置 1

5.1.5 - Box-flex 定义盒子的弹性空间 1

5.1.5.1 - 子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和

5.1.6 - box-pack 对盒子富裕的空间进行管理 1

5.1.6.1 - Start 所有子元素在盒子左侧显示，富裕空间在右侧

5.1.6.2 - End 所有子元素在盒子右侧显示，富裕空间在左侧

5.1.6.3 - Center 所有子元素居中

5.1.6.4 - Justify 富余空间在子元素之间平均分布

5.1.7 - box-align 在垂直方向上对元素的位置进行管理 1

5.1.7.1 - Star 所有子元素在据顶

5.1.7.2 - End 所有子元素在据底

5.1.7.3 - Center 所有子元素居中

5.2 - CSS3 弹性盒子[Flex Box]（2012年草案命名 [推荐标准]） R

5.2.1 - CSS3 弹性盒子内容

5.2.1.1 - 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

5.2.1.2 - 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

5.2.1.3 - 弹性容器内包含了一个或多个弹性子元素

5.2.2 - flex-direction属性

5.2.2.1 - flex-direction 顺序指定了弹性子元素在父容器中的位置。

5.2.2.2 - 语法：flex-direction: row | row-reverse | column | column-reverse

5.2.2.3 - flex-direction的值有:

5.2.2.3.1 - row：横向从左到右排列（左对齐），默认的排列方式。:

5.2.2.3.2 - row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

5.2.2.3.3 - column：纵向排列。

5.2.2.3.4 - column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

5.2.3 - justify-content 属性

5.2.3.1 - 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

5.2.3.2 - 语法：justify-content: flex-start | flex-end | center | space-between | space-around

5.2.3.3 - 各个值解析:

5.2.3.3.1 - flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

5.2.3.3.2 - flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

5.2.3.3.3 - center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

5.2.3.3.4 - space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

5.2.3.3.5 - space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

5.2.4 - align-items 属性

5.2.4.1 - align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

5.2.4.2 - 语法：align-items: flex-start | flex-end | center | baseline | stretch

5.2.4.3 - 各个值解析:

5.2.4.3.1 - flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

5.2.4.3.2 - flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

5.2.4.3.3 - center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

5.2.4.3.4 - baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

5.2.4.3.5 - stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

5.2.5 - flex-wrap 属性

5.2.5.1 - flex-wrap 属性用于指定弹性盒子的子元素换行方式。

5.2.5.2 - 语法：flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

5.2.5.3 - 各个值解析:

5.2.5.3.1 - nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。

5.2.5.3.2 - wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行

5.2.5.3.3 - wrap-reverse -反转 wrap 排列。

5.2.6 - align-content 属性

5.2.6.1 - align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

5.2.6.2 - 语法：align-content: flex-start | flex-end | center | space-between | space-around | stretch

5.2.6.3 - 各个值解析:

5.2.6.3.1 - stretch - 默认。各行将会伸展以占用剩余的空间。

5.2.6.3.2 - flex-start - 各行向弹性盒容器的起始位置堆叠。

5.2.6.3.3 - flex-end - 各行向弹性盒容器的结束位置堆叠。

5.2.6.3.4 - center -各行向弹性盒容器的中间位置堆叠。

5.2.6.3.5 - space-between -各行在弹性盒容器中平均分布。

5.2.6.3.6 - cspace-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

5.3 - 【弹性子元素属性】

5.3.1 - order：排序

5.3.1.1 - 语法：order:

5.3.1.2 - 各个值解析:

5.3.1.2.1 - ：用整数值来定义排列顺序，数值小的排在前面。可以为负值。

5.3.2 - 对齐

5.3.2.1 - 设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。

5.3.3 - 完美的居中

5.3.3.1 - 使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:

5.3.4 - align-self

5.3.4.1 - align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

5.3.4.2 - 语法：align-self: auto | flex-start | flex-end | center | baseline | stretch

5.3.4.3 - 各个值解析:

5.3.4.3.1 - auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

5.3.4.3.2 - flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

5.3.4.3.3 - flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

5.3.4.3.4 - center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

5.3.4.3.5 - baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

5.3.4.3.6 - stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

5.3.5 - flex

5.3.5.1 - flex 属性用于指定弹性子元素如何分配空间。

5.3.5.2 - 语法：flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

5.3.5.3 - 各个值解析:

5.3.5.3.1 - auto: 计算值为 1 1 auto

5.3.5.3.2 - initial: 计算值为 0 1 auto

5.3.5.3.3 - none：计算值为 0 0 auto

5.3.5.3.4 - inherit：从父元素继承

5.3.5.3.5 - [ flex-grow ]：定义弹性盒子元素的扩展比率。

5.3.5.3.6 - [ flex-shrink ]：定义弹性盒子元素的收缩比率。

5.3.5.3.6 - [ flex-basis ]：定义弹性盒子元素的默认基准值。

5.4 - 支持浏览器

5.5 - 各阶段草案命名

5.5.1 - W3C 2009年第1次草案：[display:box;]

5.5.2 - W3C 2011年第2次草案：[display:flexbox | inline-flexbox;]

5.5.3 - W3C 2012年第5次草案及以后的候选推荐标准：[display:flex | inline-flex;]

5.6 - 各个写法的兼容性如下：

.foo{
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}
            

6

第六章：盒模型属性 阴影、倒影、自由缩放、box-sizing盒模型

6.1 - 盒模型阴影 R

6.1.1 - 用法：box-shadow:[inset] x y blur [spread] color (可层叠多个) 1

6.1.2 - 参数

6.1.2.1 - inset：投影方式（inset：内投影；不给：外投影） 1 2

6.1.2.2- x、y：阴影偏移

6.1.2.3 - blur：模糊半径

6.1.2.4 - spread：扩展阴影半径（先扩展原有形状，再开始画阴影）

6.1.2.4 - color：阴影颜色

6.1.3 - 实例

6.1.3.1 - 用阴影实现多边框效果 1

6.2 - box-reflect 倒影

6.2.1 - 用法：box-reflect:direction offset mask-box-image

6.2.2 - 参数

6.2.2.1 - direction：投影方向，取值包括above（上边）、below（下边）、left（左边）、right（右边）。 1

6.2.2.2- offset：反射偏移的距离，取值包括数值或百分比 1

6.2.2.3 - mask-box-image：定义遮罩图像（可使用渐变定义渐变倒影） 1

6.3 - Eresize 自由缩放 1

6.3.1 - 参数

6.3.1.1 - Both：水平垂直都可以缩放

6.3.1.2 - Horizontal：只有水平方向可以缩放

6.3.1.3 - Vertical：只有垂直方向可以缩放

6.3.2 - 注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放

6.4 - box-sizing 盒模型解析模式 1

6.4.1 - Content-box：标准盒模型

6.4.1.1 - 计算方式：width/height=border+padding+content

6.4.2 - Border-box：怪异盒模型

6.4.2.1 - 计算方式：width/height=content

7

第七章：Css3分栏布局、Css3响应式布局、移动端meta

7.1 - Css3分栏布局 R

7.1.1 - column-count 属性指定了需要分割的列数 1

7.1.2 - column-gap 属性指定了列与列间的间隙 1

7.1.3 - column-rule 属性指定了列与列间的边框样式（是 column-rule-* 所有属性的简写） 1

7.1.3.1 - column-rule-style 属性指定了列与列间的边框样式

7.1.3.2 - column-rule-width 属性指定了两列的边框厚度

7.1.3.3 - column-rule-color 属性指定了两列的边框颜色

7.1.4 - column-width 属性指定了列的宽度 1

7.1.5 - column-span 属性指定元素要跨越多少列 R

7.2 - 多媒体查询（响应式布局） R

7.2.1 - 多媒体查询语法：

7.2.1.1 - 多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

            @media not|only mediatype and (expressions) {
            	CSS 代码...;
            }
            

7.2.2 - 媒体类型

7.2.2.1 - all 所有媒体

7.2.2.2 - print 打印机

7.2.2.3 - screen 电脑屏幕，平板，智能手机等。

7.2.2.4 - speech 屏幕阅读器

7.2.3 - 关键字

7.2.3.1 - and 连接多个条件

7.2.3.2 - not not关键字是用来排除某种制定的媒体类型

7.2.3.3 - only only用来定某种特定的媒体类型

7.2.4 - 媒体特性

7.2.4.1 - (max-width:600px) 显示区域的宽度，比如浏览器的显示区域宽度

7.2.4.2 - (max-device-width:480px) 设备输出宽度

7.2.4.3 - (orientation:portrait) 竖屏

7.2.4.4 - (orientation:landscape) 横屏

7.2.4.5 - (-webkit-min-device-pixel-ratio:2) 像素比

7.2.4.5.1 - devicePixelRatio(设备像素比)
window.devicePixelRatio = 物理像素 / dips

7.2.5 - 样式引入 1

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

@media screen{
    选择器{
        属性：属性值；
    }
}

@import url("css/reset.css") screen;

7.2.6 - 实例

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" /> 1

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" /> 1

@media screen and (min-width:400px) and (max-width:500px) {
    .box {margin: 0 auto;}
}

<link rel="stylesheet" media="screen and (min-width: 800px)" href="styleA.css" /> 1

7.2.7 - 浏览器支持

7.2.8 - 移动端meta

7.2.8.1 - <meta name="viewport" content="" />

7.2.8.2 - width：可设定数值，或者指定为device-width（设备宽度）

7.2.8.3 - height：可设定数值，或者指定为device-height（设备高度）

7.2.8.4 - user-scalable：是否用户手动允许缩放 （no||yes）

7.2.8.5 - initial-scale：第一次进入页面的初始比例

7.2.8.6 - minimum-scale：允许缩放的最小比例

7.2.8.7 - maximum-scale：允许缩放的最大比例

7.2.8.7 - target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

7.2.7.8 - 移动端常用写法

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1, maximum-scale=1,user-scalable=no" >

8

第八章：新UI方案：圆角、边框图片、渐变、背景、遮罩

8.1 - 圆角

8.1.1 - border-radius: 1-4个数字 / 1-4个数字

8.1.1.1 - 前面是水平，后面是垂直

8.1.1.2 - 不给"/"则水平和垂直一样

8.1.1.3 - 例：border-radius: 10px/5px; 1 1

8.1.1.4 - 例：border-radius: 10px 5px 10px 5px;

8.1.2 - 参数

8.1.2.1 - 各种长度单位都可以：px，%，…

8.1.2.2 - %有时很方便（但宽高不一致时不太好） 1

8.1.3 - 用法

8.1.3.1 - 1个：都一样 1

border-radius: 一样

8.1.3.2 - 2个：对角 1

border-radius: 左上&右下 右上&左下

8.1.3.3 - 3个：斜对角 1

border-radius: 左上 右上&左下 右下

8.1.3.4 - 4个：全部，顺时针 1

border-radius: 左上 右上 右下 左下

8.1.4 - 例子：风车 1

8.2 - 边框

8.2.1 - 边框图片 border-image R

8.2.1.1 - 语法：border-image: source slice width outset repeat|initial|inherit;

[主要结构] 语法：border-image: source slice repeat;

8.2.1.2 - 参数说明：

8.2.1.2.1 - border-image-sourceg 引入图片 R

8.2.1.2.2 - border-image-slice 图像边界向内偏移 R

8.2.1.2.3 - border-image-width 图像边界的宽度 R

8.2.1.2.4 - border-image-outset 用于指定在边框外部绘制 border-image-area 的量 R

8.2.1.2.5 - border-image-repeat 图片的排列方式(round铺满,repeat 重复,stretch拉伸) R

8.2.1.2.6 - 例：border-image:url(border.png) 30 30 round; 1 2

8.2.2 - 边框颜色 border-colors (只有火狐不可以用) 1

8.3 - 线性渐变 R

8.3.1 - 线性渐变格式

8.3.1.1 - linear-gradient([<起点> || <角度>,]? <点>, <点>…)

8.3.1.2 - 只能用在背景上

8.3.1.3 - IE兼容代码 1

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');

8.3.2 - 参数

8.3.2.1 - 起点：从什么方向开始渐变（默认：top） [left、top、left top]

8.3.2.2 - 角度：从什么角度开始渐变 [xxx deg的形式]

8.3.2.3 - 点：渐变点的颜色和位置 [black 50%，位置可选]

8.3.3 - 线性渐变实例

8.3.3.1 - 从上到下由红变蓝

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */

8.3.3.2 - 起点位置

left top, red, green（左上角开始）

30deg, red, green（逆时针30度） 1 2

8.3.3.3 - 重复的线性渐变 repeating-linear-gradient 1

/* Safari 5.1 - 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 - 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 标准的语法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);

8.3.3.3.1 - 例：进度条 1

8.3.3.4 - 加入点的位置（也可以用px）

top, red 40%, green 60% 1

top, red 50%, green 50%（同一个位置两个点——直接跳变）

8.3.3.5 - 使用透明度（rgba）

top, rgba(255,255,255,1), rgba(255,255,255,0)

8.3.3.5 - 加入背景图片

background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)

8.3.3.6 - 实例：百度音乐图片光影效果 1

8.4 - 径向渐变 1

8.4.1 - 径向渐变格式

radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);

8.4.2 - 参数

8.4.2.1 - 起点：可以是关键字（left,top,right,bottom），具体数值或百分比 1

8.4.2.2 - 形状： ellipse（椭圆形）、circle（圆形），默认值是 ellipse 1

8.4.2.3 - 大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）; 1 2

注意firefox目前只支持关键字

8.4.2.4 - 点：渐变点的颜色和位置 [black 50%，位置可选]

8.4.3 - 实例

8.4.3.1 - 使用径向渐变实现圆形“多边框” 1

8.5 - CSS3背景 R

8.5.1 - 多背景 -- background-image

逗号分开 -- background-image: url(a.jpg) 0 0, url(b.jpg) 0 100%; 1

8.5.2 - 背景尺寸 -- background-size:x y

8.5.2.1 - background-size:100% 100%; 1

8.5.2.2 - Cover 放大 覆盖

8.5.2.3 - Contain 缩小 包含 1

8.5.3 - background-origin：border-box|padding-box|content-box

指定背景图像的位置区域

8.5.3.1 - border-box：从border区域开始显示背景。

8.5.3.2 - padding-box：从padding区域开始显示背景。

8.5.3.3 - content-box：从content区域开始显示背景。 1

8.5.4 - background-clip: border-box|padding-box|content-box;

指定背景绘制区域

8.5.4.1 - border-box：从border区域向外裁剪背景。

8.5.4.2 - padding-box：从padding区域向外裁剪背景。

8.5.4.3 - content-box：从content区域向外裁剪背景。 1

8.5.4.4 - no-clip： 从border区域向外裁剪背景。

8.5.4.5 - text：只有文字有背景（只支持-webkit-） 1

实例：iphone开机动画 1

8.6 - 遮罩 详

8.6.1 - Mask-image

8.6.2 - Mask-position 1

8.6.3 - Mask-repeat

8.6.4 - 只在webkit支持

8.6.5 - 实例：特殊形状的幻灯片效果 1

9

第九章：CSS3过渡

9.1 - Transition过渡 R

9.1.1 - 语法：transition: property duration timing-function delay; R

9.1.1.1 - transition-property：指定CSS属性的name、transition效果；（all || [attr] || transition || none） 1 2

9.1.1.2 - transition-duration：transition效果需要指定多少秒或毫秒才能完成(运动时间) 1

9.1.1.3 - transition-timing-function：指定transition效果的转速曲线(运动形式)

9.1.1.3.1 - ease：（逐渐变慢）默认值

9.1.1.3.2 - linear：（匀速）

9.1.1.3.3 - ease-in：(加速)

9.1.1.3.4 - ease-out：（减速）

9.1.1.3.5 - ease-in-out：（先加速后减速）

9.1.1.3.6 - cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ） url 1

9.1.1.3 - transition-delay：定义transition效果开始的时候(延迟时间) 1

9.2 - 过渡完成事件 1 2 3 4

9.2.1 - Webkit内核：

obj.addEventListener('webkitTransitionEnd',function(){},false);

9.2.2 - firefox：

obj.addEventListener('transitionend',function(){},false);

9.2.3 - 实例

9.2.3.1 - 苹果产品展示

9.2.3.2 - 360浏览器 ipad 版导航

9.3 - 浏览器支持

10

第十章：2D转换

10.1 - transform R

10.1.1 - rotate() 旋转函数(顺时针旋转) 取值度数(允许负值) 1

10.1.1.1 - deg 度数

10.1.1.2 - Transform-origin 旋转的基点 详解

10.1.2 - skew() 倾斜函数 取值度数 1

10.1.2.1 - 如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

10.1.2.2 - skewX() 只在X轴(水平方向)倾斜 1

10.1.2.3 - skewY() 只在Y轴(垂直方向)倾斜 1

10.1.3 - scale() 缩放函数 取值 正数、负数和小数 1

10.1.3.1 - 如果是两个值，分别指X、Y方向缩放；如果是一个值，则是两个方向同时缩放

10.1.3.2 - scaleX() 只在X轴(水平方向)缩放

10.1.3.3 - scaleY() 只在Y轴(垂直方向)缩放

10.1.4 - translate() 位移函数 1

10.1.4.1 - 如果第二个参数为空，则默认为0，参数为负表示向相反方向位移

10.1.4.2 - translateX() 只在X轴(水平方向)位移

10.1.4.3 - translateY() 只在Y轴(垂直方向)位移

10.1.5 - Transform 执行顺序问题 — 从后往前解析，从前往后执行。 1

10.1.6 - 实例

10.1.6.1 - 钟表效果 1 2

10.1.6.2 - 倾斜的导航 1

10.1.6.3 - 360导航(扇形导航) 1 2 3 4

10.2 - matrix(a,b,c,d,e,f)（矩阵函数）默认值：matrix(1,0,0,1,0,0) 1

10.2.1 - 通过矩阵实现【缩放】 1

10.2.1.1 - x轴缩放 a=x*a　c=x*c　e=x*e;

10.2.1.2 - y轴缩放 b=y*b　d=y*d　f=y*f;

10.2.2 - 通过矩阵实现【位移】 1

10.2.2.1 - x轴缩放 x轴位移: e=e+x

10.2.2.2 - y轴缩放 y轴位移: f=f+y

10.2.3 - 通过矩阵实现【倾斜】 1 1

10.2.3.1 - x轴倾斜: c=Math.tan(xDeg/180*Math.PI)

10.2.3.2 - y轴倾斜: b=Math.tan(yDeg/180*Math.PI)

10.2.4 - 通过矩阵实现【旋转】 1

10.2.4.1 - a=Math.cos(deg/180*Math.PI);

10.2.4.2 - b=Math.sin(deg/180*Math.PI);

10.2.4.3 - c=-Math.sin(deg/180*Math.PI);

10.2.4.4 - d=Math.cos(deg/180*Math.PI);

10.2.5 - 变换兼容IE9以下IE版本只能通过矩阵来实现 1

10.2.5.1 - filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');

10.2.5.2 - IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d

10.2.6 - 浏览器支持

10.3 - Transform-origin 旋转的基点 R 1 1 1

10.3.1 - 语法：transform-origin: x-axis y-axis z-axis;

10.3.2 - 各值解析

10.3.2.1 - x-axis：定义视图被置于 X 轴的何处。可能的值：left center right length %

10.3.2.2 - y-axis：定义视图被置于 Y 轴的何处。可能的值：top center bottom length %

10.3.2.3 - z-axis：定义视图被置于 Z 轴的何处。可能的值：length

10.3.3 - 默认值：50% 50% 0

10.3.4 - 2D转换元素可以改变元素的X和Y轴。3D转换元素，还可以更改元素的Z轴。;

10.3.5 - 浏览器支持

11

第十一章：3D转换

11.1 - 常规3D效果——翻转 R

11.1.1 - rotateX()方法：围绕X轴旋转一个给定的度数。 1

11.1.2 - rotateY()方法：围绕Y轴旋转一个给定的度。 1

11.2 - 转换属性 R

11.2.1 - transform-style 指定嵌套元素是怎样在三维空间中呈现。 R

11.2.1.1 - 语法：transform-style: flat|preserve-3d;

11.2.1.1.1 - flat 表示所有“子元素”在2D平面呈现（默认）。

11.2.1.1.2 - preserve-3d 表示所有“子元素”在3D空间中呈现。(定义了该属性的元素，opactity值不能少小1)

11.2.2 - Perspective 元素距离视图的距离（景深），以像素计。定义在3D元素的父级上。 R

11.2.2.1 - 默认值为none，与 0 相同。不设置透视。

11.2.2.2 - 它是一个元素的子元素，透视图，而不是元素本身。

11.2.3 - Perspective- origin 规定3D元素的底部位置（景深基点） R

11.2.4 - transform-origin 旋转的基点 详解

11.2.5 - backface-visibility 定义元素在不面对屏幕时是否可见。

11.3 - 其它3D 转换方法 R

11.3.1 - rotateZ()方法：围绕Z轴旋转一个给定的度。[效果类似2D的rotate()方法]。 1

11.3.2 - rotate3d(x,y,z,angle) 定义3D旋转,同时多个方向旋转给定度数 [x,y,z的值为0或1，angle为度数] 1

11.3.3 - translateX() 沿X轴位移，与2D同用。 1

11.3.4 - translateY() 沿Y轴位移，与2D同用。 1

11.3.5 - translateZ() 沿Z轴位移，仅3D有，近大远小。 1

11.3.6 - translate3d(x,y,z) 定义3D转化，分别沿三个轴位移。 1

11.3.7 - scaleX() 沿X轴缩放，与2D同用。 1

11.3.8 - scaleY() 沿Y轴缩放，与2D同用。 1

11.3.9 - scaleZ() 沿Z轴缩放，仅3D有，实际看不到效果。 1

11.3.10 - scale3d(x,y,z) 定义3D转化，分别沿三个轴位移，z轴看不到效果，实际效果和2D的scale(x,y)一样。 1

11.4 - 实例

11.4.1 - 3D盒子(模仿纸盒折叠方式) 1 2 3

11.4.2 - 3D盒子(另一种方式) 1

11.4.3 - 神奇魔方 1

11.4.4 - 3D图片翻转切换 1 2 3

11.4.3 - 3D小盒子图片切换 1 2

11.5 - 浏览器支持

12

第十二章：CSS3动画

12.1 - 关键帧——keyFrames R

12.1.1 - 类似于flash，只需指明两个状态，之间的过程由计算机自动计算

12.1.2 - 关键帧的时间单位

12.1.2.1 - 数字：0%、25%、100%等

12.1.2.2 - 字符：from(0%)、to(100%)

12.1.3 - 格式

@keyframes 动画名称
{
	动画状态
}

例：

@keyframes  miaov_test
{
	from { background:red; }
	to { background:green; }
}

可以只有to 1

12.2 - animate——调用动画 R

12.2.0 - animation 所有动画属性的简写属性，除了 animation-play-state 属性。 R

12.2.0.1 - 语法

animation: name duration timing-function delay iteration-count direction;

12.2.1 - 必要属性

12.2.1.1 - animation-name 动画名称（关键帧名称）

12.2.1.2 - animation-duration 动画完成一个周期所花费的时间

12.2.1.3 - 例： 1

-webkit-animation-name: 'miaov';
-webkit-animation-duration: 4s;

12.2.2 - 可选属性

12.2.2.1 - animation-timing-function 动画运动形式，默认是 "ease"。 R

12.2.2.1.1 - linear 匀速。

12.2.2.1.2 - ease 缓冲。

12.2.2.1.3 - ease-in 由慢到快。 1

12.2.2.1.4 - ease-out 由快到慢。

12.2.2.1.5 - ease-in-out 由慢到快再到慢。

12.2.2.1.5 - cubic-bezier(number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内 url

12.2.2.2 - animation-delay 动画延迟(只是第一次) R

12.2.2.2.1 - 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

12.2.2.3 - animation-iteration-count 重复次数(infinite为无限次) 1

12.2.2.4 - animation-direction 播放前重置。默认是 "normal"。 R

12.2.2.4.1 - normal 默认值。动画按正常播放。 1

12.2.2.4.2 - reverse 动画反向播放。

12.2.2.4.3 - alternate 动画在奇数次正向播放，在偶数次反向播放。 1

12.2.2.4.4 - alternate-reverse 动画在奇数次正向播放，在偶数次反向播放。

12.2.2.5 - animation-play-state 播放状态（ running 播放 和paused 暂停 ） 1

12.2.2.6 - animation-fill-mode 规定动画在播放之前或之后，其动画效果是否可见。 W 详解

12.2.2.6.1 - 语法： animation-fill-mode : none | forwards | backwards | both;

12.2.2.6.2 - none 不改变默认行为。 1

12.2.2.6.3 - forwards 当动画完成后，保持最后一个属性值（即：最后一个关键帧的样子）。 1

12.2.2.6.4 - backwards 在 animation-delay 所指定的一段时间时，在动画显示之前，应用开始属性值（即：第一个关键帧的样子）。 1 2

12.2.2.6.4 - both 向前和向后填充模式都被应用。 1

12.2.3 - animate和JS结合 1

12.2.3.1 - JS添加动画的方式

12.2.3.1.1 - 在class里加入animation的各种属性，直接元素增加class

12.2.3.1.2 - 直接给元素加-webkit-animation-xxx样式

12.2.3.2 - 动画完成事件 1

12.2.3.2.1 - Webkit内核：

obj.addEventListener('webkitAnimationEnd', function (){}, false);

12.2.3.2.2 - firefox：

obj.addEventListener('nimationEnd', function (){}, false);

12.3 - 实例

12.3.1 - 无缝滚动 1

12.3.2 - 折纸 1

12.3.2.1 - 解析过程：布局 1 1 动画效果 1 1

12.4 - 收集动画效果

12.4.1 - Animate.css 一款强大的预设css3动画库 1

12.5 - 浏览器支持