一， CSS3 盒子 阴影 属性 box- shadow 也是 CSS3 新增 的 一个 重要 属性， 用来 定义 元素 的 盒子 阴影。
- inset： 阴影 类型， 可选 值。 如果不 设置， 其 默认 的 投影 方式 是 外 阴影； 如果 取其 唯一 值“ inset”， 就是 给 元素 设置 内 阴影。
- x- offset： 阴影水平偏移量， 其值可以是正负值。 如果取正值， 则 阴影 在 元素 的 右边， 反之 取 负值， 阴影 在 元素 的 左边。
- y- offset： 阴影垂直偏移量， 其值可以是正负值。 如果取正值， 则 阴影 在 元素 的 底部， 反之 取 负值， 阴影 在 元素 的 顶部。
- blur- radius： 阴影模糊半径， 可选参数。 其值只能是正值， 如果 取值 为“ 0” 时， 表示 阴影 不具 有 模糊 效果， 如果 取值 越大， 阴影 的 边缘 就 越 模糊。
- spread- radius： 阴影 扩展 半径， 可选参数。 其值可以是正负值， 如果 取值 为 正值， 则 整个 阴影 都 延展 扩大， 反之 取值 为 负值， 则 整个 阴影 都 缩小。
- color： 阴影 颜色， 可选 参数， 如果不设定任何颜色 时， 浏览器会取默认色， 但 各浏览器 默认色不一样，
- 在图片上加内阴影，先给图片添加一个容器，如：div等，
二， border-radius 圆角
http:/ /www.iis7.com/b/wzjk/
- 圆形 border- radius 制作 圆角 有两 点 技巧。 ·元素 的 宽度 和 高度 相同。 ·圆角 的 半径 值 为 元素 宽度 或 宽度 的 一半 或者 直接 设置 圆角 半径 值 为 50%。
- 半圆 border- radius 制作半圆与制作圆形的方法是一样 的， 只是元素的 宽度与圆角方位要配合一致， 不同的宽度和高度比例， 以及圆角方位， 可以制作上半圆、下半圆、 左半圆 和 右半圆 效果。
- 扇形 border- radius 制作 扇形， 其实 就是 使用 border- radius 属性 制作 四分之一 圆形。 遵循“ 三 同， 一 不同” 原则， 其中“ 三 同” 是指 元素 的 宽度、 高度 和 圆角 半径 值 相同， 而“ 一 不同” 指的 是 圆角 位置 不同。 根据 圆角 取值 位置 不一样， 可以分 左上、 右上、 右下 和 左下 四种 扇形 效果。
- 椭圆 椭圆 其实 就是 一个 圆形 受到 挤压 而成 的 一种 形状， border- radius 制作 椭圆 也非 常 方便， 只 受限 于 元素 的 宽度 或 高度， 然后 就是 圆角 半径， 制作 椭圆 的 圆角 半径 和 其他 图形 有所 不一样， 需要 设置 圆角 的 水平 和 垂直 方向 的 半径 值。 椭圆 有 两种， 一种 是 水平 的， 另外 一种 是 垂直 的。 它们 之间 的 差别 只是 方向 性的 区别， 其 制作 方法 是 一样 的。 制作 水平 椭圆， 元素 宽度 是 高度 的 2 倍， 而且 border- radius 的 水平 半径 等于 元素 宽度， 垂直 半径 等于 元素 高度； 而 垂直 椭圆 刚好 与水 平 椭圆 的 参数 相反。
。。。。。。
三， CSS3 背景
背景主要包括五个属性：
1· background- color（ 背景 颜色）
2· background- image（ 背景 图片）
3· background- repeat（ 背景 图片 展示 方式）
4· background- attachment（ 背景 图片 是 固定 还是 滚动）
5· background- position（ 背景 图片 位置）
可以单独写， 也可以将这些属性串在 一起使用。
- background- color 属性，用来设置元素的背景颜色， 其默认值为“ transparent”， 不设置任何颜×××况下是透明色，
- background- image 属性，用来设置元素的背景图片， 默认值为“ none”，< url> 是指背景图片的地址， 这个地址可以是相对地址， 也可以是绝对地址。
- background- repeat 属性，用来设置元素背景图片在元素的盒模型中的铺放格式， 其默认为“ repeat”， 也就是背景图片沿元素的X轴和Y轴同时平铺，“ repeat- x”表示的是元素背景图片沿元素 的X轴平铺， Y轴不进行任何铺 放；“ repeat- Y” 刚好相反， 元素背景图片沿元素的Y轴平铺， X轴不进行任何铺 放；“ no- repeat”和 默认值“ repeat” 相反， 表示背景图片不做任何铺 放。
- background- attachment 属性，用来设置元素背景图片是否固定或者随着页面的其余部分滚动， 其默认值为“ scroll”， 表示背景图片会随着浏览器滚动条一起滚动， 而取值为“ fixed” 时， 背景图片 固定不动。 background- attachment 取值为“ fixed” 时， 一般运用在html或 body标签 上， 使用在其他标签上不能达到固定效果。
- background- position 属性，用来设置元素背景图片的位置， 其默认值为（ 0，0）||（ 0%， 0%）||（ lefttop）， 其值可以是具体的百分数或数值设置（ 可以 是 负值）， 也可以使用关键词 left、 center、 top、 right、 top、 bottom 配合设置，
三，*与背景相关的新增属关于 background属性的用法相信很多读者都已经熟悉了。 在CSS3中， background 属性 依然保持以前的用法， 只是追加了一些与背景相关的属性。
1· background- origin： 指定绘制背景图片的起点。
2· background- clip： 指定背景图片的显示范围。
3· background- size： 指定背景图片的尺寸大小，在CSS3中， 可以使用background- size属性来指定背景图片的尺寸， 可以控制背景图片在水平和垂直两个方向的缩放， 也可以控制图片拉伸覆盖 背景区域的方式， 甚至还可以截取背景图片。 背景图片能够自适应元素盒子的大小， 实现与模块大小完全适应的背景图片， 避免了因区块尺寸不同而需要设计不同的背景图片。
background- size共有五种属性值，每一种属性值的作用如下：
·auto： 默认值。 将保持背景片的原始高度和宽度。
·<length>： 取具体的整数值（ 例如 px 值）， 将改变背景图片的大小。
·<percentage>： 取值为百分值， 可以是 0% ～ 100%。 此时， 同样改变背景图片的大小， 但 此值是相对于元素的宽度来进行计算， 并不是根据背景图片的宽度来进行计算。
·cover： 将背景图片放大， 以适合铺满整个容器。 但这种方法会致使背景图片失真。
·contain： 保持背景图像本身的宽和高比例， 将背景图像缩放到宽度或高度正好适应所定义背景容器的区域。 当 background- size 取值为固定数值（ length） 和百分比值（ percentage） 时可以 设置两个值， 也可以设置一个值。 只取一个值时， 指定了背景图片的宽度， 第二个值相当于auto， 也就是指定了高度。 在这种情况下， auto值设定 之后能够让背景图片的高度自动地按照比例缩放。
4· background- break： 指定内联元素的背景图片进行平铺时的循环方式。
。。。。。。
四， CSS3 文本
在 Web 页面或者Web应用程序中设置文本样式是CSS最基本的要求， 早期的CSS文本功能就是给Web页面设置文本的 字体、 字号、 颜色、 样式、 粗细、 间距 等。 随着 CSS3 的 出现， 文本 功能 不仅仅 局限于 这些 基本 的 运用， 它 给 文本 功能 添加 了 一些 高级的 属性 设置， 如 文本 阴影 属性 text- shadow、 文本 自动 换行 属性 word- break、 长 单词 与 URL 地址 自动 换行 属性 word- wrap 和 文本 溢出 属性 text- overflow 等，
在 CSS文本功能上主要分为三大类： 字体、 颜色 和 文本，
text- shadow 属性 一共 包含 4 个 属性 参数， 每个 属性 参数 都 具有 自己的 作用。
·color： 阴影 颜色， 定义绘制阴影时所使用的颜色， 这个参数可以放在第一 也可以放在最后， 是一 个可选参数， 如果没有显式设置阴影颜色， 会使用文本的颜色作为阴影颜色。 阴影颜色可以是颜色 关键词、 十六进制 颜色、 RGB 颜色、 RGBA 透明 色 等。
·x- offset： X 轴 位移， 用来 指定 阴影 水平 位移 量， 其 值 可以 是 正 负值， 如果 为 正值， 阴影 在 对象 的 右边， 反之 阴影 在 对象 的 左边。
·y- offset： Y 轴 位移， 用来 指定 阴影 垂直 方向 偏移量， 其 值 可以 是 正 负值， 如果 为 正值， 阴影 在 对象 的 底部， 反之 阴影 在 对象 的 顶部。
·blur- radius： 阴影 模糊 半径， 可选 参数， 用来 设置 阴影 的 模糊 半径， 代表 阴影 向外 模糊 的 模糊 范围。 这个 值 越大， 阴影 向外 模糊 的 范围 越大， 阴影 的 边缘 就 越 模糊。 不过 这个 值 只能 是 正值， 其 值 为 0 时， 表示阴影 不具 有 模糊 效果。
可以 使用 text- shadow 属性来给文本指定多个阴影， 并且针对每个阴影使用不同颜色。 指定多个阴影时使用逗号将多个阴影进行分隔。 text- shadow 多阴影效果按照给定的顺序应用， 因此前面的 阴影有可能会覆盖后面的， 但是它们永远会覆盖文本本身。
- CSS3 溢出文本属性平时在网页制作中一定碰到过内容溢出的问题， 如文章列表标题很长， 而其宽度又受到限制， 此时超出宽度的内容就会以省略 标记（…） 显示。 以前实现这样的效果都是由后台 程序截取一定的字符数在前台输出， 另外一种方法就是使用 JavaScript 截取 一定 的 字符 数 实现。 可是 这 两种 方法 都有 其 不足之处， 如 中文 和 英文 的 计算 字符 宽度 的 问题， 这个 值 不好 计算， 所以 造成 截取 字符 数 不好 控制， 从而其通用性也差。 CSS3 新增 了 text- overflow 属性， 使得 这个 问题 迎刃而解。
text- overflow 属性 参数 比较 简单， 只有两个属性值。
·clip： 不显 示 省略 标记（…）， 只是 简单 的 裁 切。
·ellipsis： 文本 溢出 时 显示 省略 标记（…）， 省略 标记 插入 的 位置 是最 后 一个 字符。
强制 文本 在 一行 显示（ white- space: nowrap） 和 溢出 内容 隐藏（ overflow: hidden）， 并且 需要 定义 容器 的 宽度。
text-overflow: ellipsis; overflow: hidden; 有省略号，需要这两个属性配合才有效，
text-overflow: clip; overflow: hidden; 直接隐藏，需要这两个属性配合才有效，
- CSS3 文本 换行
在 CSS3 中， 使用 word- wrap：break- word属性 实现 长 单词 与 URL 地址 的 自动 换行。
·break- all： 可以 强行 截断 英文 单词， 达到 词 内 换行 效果。
·keep- all： 不允许字断开。 如果是中文把前后标点符号内的一个汉字短语整个换行， 英文单词整个换行； 如果出现某个英文字符长度超过容器边界， 后面的部分将撑破容器； 如果边框为固定属性， 则后面部分无法显示。
white- space 属性主要用来声明建立布局过程中如何处理元素中的空白符。
white- space 属性 取值 简单 说明 如下：
·normal： 默认值。 空白处会被浏览器忽略。 可以通过这个值恢复到属性的默认值。
·pre： 文本空白处会被浏览器扣留， 其行为方式类似于 HTML 中的< pre> 标签 效果。
·nowrap： 文本不会换行， 文本会在同一行上， 直到碰到换行标签< br />为止。
·pre- line： 合并空白符序列， 但保留换行符， 此属性不支持 IE 7. 0-、 Firefox 3. 0- 和 Opera 9. 2- 以下版本浏览器。
·pre- wrap： 保留空白符序列， 但是正常进行换行， 此属性值不支持 IE 7. 0 和 Firefox 3. 0 以下 版本浏览器。
·inherit： 继承父元素的 white- space 属性值， 此属性值在所有的 IE浏览器都不支持。
。。。。。。
五， CSS3 颜色特性 “佛 靠 金 装， 人 靠 衣装”， 网页也是如此。 随着互联网的 迅速发展， 一个网页给人们留下的第一印象， 既不是它的内容， 也不是它的设计， 而是整体颜色。 为了能够达到 人们的需求， Web设计师除了需要掌握网站制作的技术之外， 还必须能够很好地应用 Web 颜色。 换句话说， 网站颜色的使用好坏， 直接影响网站的生存力。
网页色彩的表现原理
我们知道有256种Web安全颜色， 其实这256种颜色 是指8位颜色的表现能力， 随着科技的发展， 现在颜色不局限于8位， 16位色彩的总数是65536 色， 也就是2的16次方， 而新增了24位元色彩， 也就是2的24次方， 即16777216种颜色。 32位色就是2的32次方的发色数， 即16777216种颜色， 不过它增加了256阶颜色的灰度。 32位色和16位色肉眼分辨不出来吗？ 如果用两台品×××型号都一样 的显示器， 分别调不同的颜色， 就能看出区别。 而在Web页面的设计中， 颜色主要运用16 进制数值的表示方法， 为了用HTML表现RGB颜色， 使用十六进制数 0 ～ 255， 改为十六进制就是 00 ～ FF， 用RGB的顺序罗列就成为HTML颜色编码。 例如， 在 HTML 编码中“ 000000” 就是指红色（ R）、 绿色（ G） 和蓝色（ B） 都没有， 就是0状态， 也就是黑色。 相反“ FFFFFF” 就是就是 红色（ R）、 绿色（ G） 和蓝色（ B）都是 255， 也就是白色。 显示器是由 一个个像素构成， 利用电子束来表现色彩。 像素把光的三原色： 红色（ R）、 绿色（ G）、 蓝色（ B） 组合成的色彩 按照科学原理表现出来。 一 像素包含 8 位元色彩的信息量， 有 从 0 ～ 255 的256个单元， 其中 0 是 完全 无光 状态， 255 是最 亮 状态。
- RGB色彩模式，RGB色彩模式是光的三原色 红、 绿、 蓝 混合产生的。 Web页面中使用的图片在大多数是在RGB色彩模式中制作的。 RGB色彩是颜色相加混合产生的， 这样的混合称为 加色混合。 加色混合中， 补色是指相关的两个颜色混合时， 成为白色的情况。
- CMYK色彩模式，CMYK色彩模式是指颜料的三原色 青色、 洋红、 ××× 加上 黑色， 这四种颜色减色混合表现出的色彩是主要用于出版印刷时制作图像的一种模式。 减色混合是指是指颜色混合后出现 的色彩比原来的颜色暗淡， 这样与补色相关的两种颜色混合就会出现彩色的情况。
- 索引色彩模式，索引色彩模式是已经被限定在256种颜色以内的模式， 主要用于Web页面安全色彩和制作透明 GIF 图片。 在 Photoshop 中制作透明GIF图片时， 一定要使用索引色彩模式。
- 灰度模式，灰度模式是无色彩模式， 在制作黑白图片时使用， 主要用于处理 黑、白、灰色 图片。
- 双色调模式，双色调模式是在黑白图片中加入颜色， 使色调更加丰富的模式。 RGB、 CMYK 等颜色模式都不可以直接转换为双色调模式， 必须将色彩模式先转换为灰度模式后， 才能够转换为双色调 模式。 用双色调模式可以用很小的空间制作出漂亮的图片。
- 位图模式，位图模式是 用白色和黑色共同处理图片的模式。 与双色调一样， 除双色调模式和灰度模式外， 其他色彩模式都需要转换为灰度模式后， 再转换为位图模式。 位图模式可以选定5种图片 处理 方法：
1） 50% 阈值， 是在 256 种 颜色 中， 当 颜色 值 大于 129 就 处理 为 白色， 反之则处理为黑色。
2） 图案仿色， 是按一定的模式处理图片。
3） 扩散仿色为最常用的选项， 是按黑色和白色的阴影使其分布。
4） 半调网屏与自定图案， 是利用盲点的各种形态和密度与用户自己设置样式的处理方式。
CSS3 颜色模式在 CSS2. 的基础 CSS3上 新增了 RGBA、 HSL 和 HSLA，
- RGBA 在 RGB 基础上 增加 了控制 alpha 透明度的参数， 其中 RGB 颜色 模式（ 也称 为 三原色） 是工业界 的 一种 颜色标准， 通过对 红（ R）、 绿（ G）、 蓝（ B） 三个 颜色 通道 的 变化 以及 它们 相互 之间 的 叠加 得到 各种 颜色，RGB几乎包括人类视力所能感知的所有颜色， 是目前运用最广的颜色系统之一。 而RGBA 仅在 RGB 的 基础上 增加 了 alpha 通道， 用来 设置 颜色 的 透明度。
RGBA 的 属性 参数 很 简单， 分别 代表 红绿 蓝 以及 透明度 的 值。
·R： 红色 值， 其 取值 可以 是 正 整数 或者 百 分值。
·G： 绿色 值， 其 取值 可以 是 正 整数 或者 百 分值。
·B： 蓝色 值， 其 取值 可以 是 正 整数 或者 百 分值。
·A： alpha 透明 值， 其 取值 在 0 ～ 1 范围 之间。
这几个参数值都不可以取负值。
- HSL 颜色 模式 HSL 和 RGB 一样， 同 属于 工业界 的 一种 颜色 标准， 通过 对 色调（ H）、 饱和度（ S）、 亮度（ L） 三个 颜色 通道 的 变化 以及 它们 相互 之间 的 叠加 得到 各式各样 的 颜色 的。 HSL 标准 几乎 包括 人类 视力 所能 感知 的 所有 颜色， 是 目前 运用 最 广 的 颜色 系统 之一。 使用 HSL 模型 为 图像 中 每一个 像素 的 HSL 分量 分配 一个 0 ～ 255 范围内 的 强度 值。 HSL 图像 只用 三种 通道 按照 不同 的 比例 混合， 在 屏幕 上 呈现 16777216 种 颜色。 前面 也 说过， 色调（ H） 是在 色 盘 上 的 颜色（ 如图 6- 4 所示）， 颜色 的 选择 是 使用 饱和度（ S）， 0 度 是 红色， 120 度 为 绿色， 240 度 为 蓝色。 同时 可以 使用 不同 的 亮度（ L） 来 控制 这个 颜色， 其中 0 表示 的 是一 个 灰度， 不使 用 任何 的 色彩， 而 100% 是指 在 充分 使用 一个 颜色。
·H： 色调（ Hue）。 取整 数值（< length>）， 可以 为 任意 整数， 其中 0（ 或 360 或- 360） 表示 红色， 60 表示 ×××， 120 表示 绿色， 180 表示 青色， 240 表示 蓝色， 300 表示 洋红。 当 它们 的 值 大于 360 时， 实际 的 值 等于 该 值 除 360 之后 的 余数。 例如， 如果 色调 的 值 是 480， 则 实际 的 颜色 值 为 480 除以 360 之后 得到 的 余数 120。
·S： 饱和度（ Saturation）。就是颜色的深浅度和鲜艳程序， 取百分数（< percentage>）， 可以取值 0 ～ 100%之间的任意值， 其中0表示灰度（ 没有 该 颜色）， 100%表示饱和度最高（ 该 颜色 最 鲜艳）。
·L： 亮度（ Lightness）。 取值和饱和度（ S） 一样， 可以 取值 0 ～ 100% 之间的任意值， 其中0最暗（ 黑色）， 100% 最亮（ 白色）。
- HSLA 颜色模式 HSLA 是 HSL 的 扩展 模式， 在 HSL 的 基础上 增加 一个 透明 通道 alpha 来 设置 不透明 参数。
。。。。。。
六， CSS3盒模型 CSS 有 一种基础设计模式叫盒模型， 定义了Web页面中的元素是如何看做盒子来解析的。 每一个盒子有不同的展示界面，
在 CSS 中 主要有以下几种盒模型： inline、 inline- block、 block、 table、 absolute position、 float。 浏览器把每个元素看 一个盒模型， 每一个盒模型是由以下几个 属性 组合 所 决定 的： display、 position、 float、 width、 height、 margin、 padding 和 border 等， 不同 类型 的 盒 模型 会 产生 不同 的 布局。
什么是盒模型CSS 中 每一个 元素 都是 一个 盒 模型， 包括 HTML 和 body 标签 元素。 在平时设计中， 大家对 content、 padding、 margin、 background 和 border 来说一定不会陌生了， 因为 盒模型都具备这些属性。 其中 width、 height、 border、 background、 padding 和 margin 之间的层次关系和相互影响，
可以 看出 padding、 content、 background- image、 background- color， 它们 四 者 构成 了 Z 轴（ 垂直 屏幕 的 坐标） 多重 层叠 关系。 但是 border 与 margin、 padding 三 者 之间 应该 是 平 面上 的 并 级 关系， 并不能 构成 Z 轴 的 层叠 关系。
在 CSS 中 盒 模型 被 分为 两种，
第 一种 是 W3C 的 标准 模型，
另一种 是 IE 的 传统 模型，
它们 相同之处 都是 对 元素 计算尺 寸 的 模型， 具体 说 就是 对 元素 的 width、 height、 padding 和 border 以及 元素 实际 尺寸 的 计算 关系， 不同 之处 是 两者 的 计算 方法 不一致。
1） W3C 的 标准 盒 模型。 外 盒尺 寸 计算（ 元素 空间 尺寸） element 空间 高度 ＝ 内容 高度 ＋ 内 距 ＋ 边框 ＋ 外 距 element 空间 宽度 ＝ 内容 宽度 ＋ 内 距 ＋ 边框 ＋ 外 距 内 盒尺 寸 计算（ 元素 大小） element 高度 ＝ 内容 高度 ＋ 内 距 ＋ 边框 （height 为 内容 高度） element 宽度 ＝ 内容 宽度 ＋ 内 距 ＋ 边框 （width 为 内容 宽度）
2） IE 传统 下 盒 模型（ IE 6 以下， 不 包含 IE 6 版本 或 QuirksMode 下 IE 5. 5+）。 外 盒尺 寸 计算（ 元素 空间 尺寸） element 空间 高度＝ 内容 高度 ＋ 外 距 （height 包含 了 元素 内容 宽度、 边框、 内 距） element 宽 间 宽度 ＝ 内容 宽度 ＋ 外 距 （width 包含 了 元素 内容 宽度、 边框、 内 距） 内 盒尺 寸 计算（ 元素 大小） element 高度 ＝ 内容 高度（ height 包含 了 元素 内容 宽度、 边框、 内 距） element 宽度 ＝ 内容 宽度（ width 包含 了 元素 内容 宽度、 边框、 内 距）
为了 解决 这种 问题， CSS3 增添 了 一个 盒 模型 属性 box- sizing， 能够 事先 定义 盒 模型 的 尺寸 解析 方式，
box- sizing 的 属性 值 主要 有 以下 三个：
1· content- box： 默认值， 让 元素 维持 W3C 的 标准 盒 模型。 元素 的 宽度 和 高度（ width/ height） 等于 元素 边框 宽度（ border） 加上 元素 内 距（ padding） 加上 元素 内容 宽度 或 高度（ content width/ height）， 也就是 element width/ height= border+ padding+ content width/ height。
2· border- box： 此 值 会 重新 定义 CSS2. 1 中 盒 模型 组成 的 模式， 让 元素 维持 IE 传统 的 盒 模型（ IE 6 以下 版本 和 IE6 ～ 7 怪异 模式）。 元素 的 宽度 或 高度 等于 元素 内容 的 宽度 或 高度。 从 盒 模型 介绍 可知， 这里 的 内容 宽度 或 高度 包含 了 元素 的 border、 padding、 内容 的 宽度 或 高度（ 此处 的 内容 宽度 或 高度 ＝ 盒子 的 宽度 或 高度- 边框- 内 距）。
3· inherit：此 值 使 元素 继承 父 元素 的 盒 模型 模式。 box- sizing 属性 主要 用来 控制 元素 的 盒 模型 的 解析 模式， 其 主要 目的 是 控制 元素 的 总 宽度。 在 W3C 规范 中， 元素 的 box- sizing 默认 属性 值 是 content- box 值， 如果不 显 式 重置 box- sizing 属性 值 为 border- box， 才能 明确 对 元素 设置 一个 总 宽度。 在这 种 情况 之下 会使 页面 布局 更加 方便。
。。。。。。
七， CSS3内容溢出属性在CSS中的每一个元素都视为一个盒子， 这个盒子就是一个容器。 容器就有大小之分， 如果在样式中指定盒子的宽度与高度， 可能某些内容在盒子中就会容不下， 此时 就可以 使用 overflow 属性 来 指定 如何 显示 盒中 容纳 不下 的 内容。 overflow 属性 是 CSS2. 1 规范 中的 特性， 而在 CSS3 中 增加 了 overflow- x 和 overflow- y 属性。
overflow- x主要是用来定义对水平方向内容溢出的剪切， 而 overflow- y主要用来定义对垂直方向内容溢出的剪切。
和 overflow属性参数一样， overflow- x和overflow- y属性值取不同的值所起的作用 不一样。
·visible： 默认值。 表示不剪切容器中的任何内容、 不添加滚动条， 元素将被剪切为包含对象的窗口大小， 而且clip属性设置将失效。
·auto： 在需要时剪切内容并添加滚动条。 也就是说也就是说当内容超过容器的宽度或者高度时， 溢出的内容将会隐藏在容器中， 并且会添加滚动条， 用户可以拖动滚动条查看隐藏在容器中的内容。
·hidden： 内容溢出容器时， 所有内容都将隐藏， 而且不显示滚动条。
·scroll： 不管内容有没有溢出容器， overflow- x 都会显示横向的滚动条， 而overflow- y 会显示纵向的滚动条。
·no- display： 当内容溢出容器时不显示元素， 此时类似于元素添加了 display: none 声明 一样。
·no- content： 当内容溢出容器时不显示内容， 此时类似于添加了 visibility: hidden 声明 一样。
。。。。。。
八， CSS3 自由缩放属性为了增强用户体验， CSS3增加了很多新的属性， 其中 resize 就是 一个重要的属性， 也是一个非常实用的属性， 它允许用户通过拖动的方式来修改元素的尺寸来改变元素的 大小。 到目前为止， 可以使用 overflow属性的任何容器元素。 在此之前， Web设计师为了要实现这样的UI 效果， 需要使用大量的脚本代码才能实现， 这样费时费力， 效率极低。
resize 属性主要是用来改变元素尺寸大小的， 其主要目的是增强用户体验。 使用方法极其的简单。
在 CSS3 中 resize 属性 指 定的 值 分为 以下 几种：
·none： 用户不能拖动元素修改尺寸大小。
·both： 用户可以拖动元素， 同时修改元素的宽度和高度。
·horizontal： 用户可以拖动元素， 仅可以修改元素的宽度， 但不能修改元素的高度。
·vertical： 用户可以拖动元素， 仅可以修改元素的高度， 但不能修改元素的宽度。
·inherit： 继承父元素的 resize 属性值。
。。。。。。
九，CSS3 外轮廓属性外轮廓 outline 在页面中呈现的效果和边框border呈现的效果极其相似， 但和元素边框 border完全不同， 外轮廓线不占用网页布局空间， 不一定是矩形， 外轮廓是属于一种 动态样式， 只有元素获取到焦点或者被激活时呈现。
·outline- color： 定义轮廓线的颜色， 属性值为CSS 中定义的颜色值。 在实际应用中， 省略时此参数的默认值为黑色。
·outline- style： 定义 轮廓线的样式， 属性为CSS中定义线的样式。 在实际应用中， 省略时此参数的默认值为 none， 省略后不对该轮廓线进行任何绘制。
·outline- width： 定义轮廓线的宽度， 属性值可以为 一个宽度值。 在实际应用中， 省略时此参数的默认值为 medium， 表示绘制中等宽度的轮廓线。
·outline- offset： 定义轮廓边框的偏移位置的数值， 此值可以取负数值。 当此参数的值为正数值， 表示轮廓边框向外偏离多少个像素； 当此参数的值为负数值， 表示轮廓边框向内偏移多少个像素。
·inherit： 元素继承父元素的 outline效果。
轮廓和边框的对比
outline 和 border 的 对比 outline 属性 创建 的 外轮 廓 线外 表上 和 border 极其 相似， 但 实际 上有 明显 的 不同。
·border 属于 盒 模型 的 一部分， 直接影响 元素 盒子 的 大小， 而 outline 创建 的 外 轮廓 线 是 画 在 一个 框 的“ 上面”， 不会 影响 该 框 或 任何 其他 框 大小， 因此 outline 创建 的 轮廓 线 不会 影响 文档 流， 也不 会破 坏 网页 布局。
·outline 创建的轮廓线表面上和border 一样， 可以创建轮廓线的颜色、 线型样式、 线型粗细大小， 但 和 border 有 一点 完全 不一样。 outline 创建 的 外 轮廓 线 在 元素 各 边 都 一样， 这 和 border 不一样， 不能 像 border 边框 一样， 设置 outline- top 或 outline- left 之类。
·border 创建 的 元素 边框 可以 单边 设置， 而 outline 创建 的 外 轮廓 线 始终 是 闭合 的。
·outline 创建 的 外 轮廓 线 可能 是非 矩形 的， 如果 元素 是 多 行， 外 轮廓 线 就 至少 是 能够 包含 该 元素 所有 框 的 外 轮廓。 可 border 不一样， 他将 使用 一个 边框 包括 整个 元素。
·border 仅可以设置元素的边框， 只能向外扩展， 而outline创建的外轮廓线， 可以通过 outline- offset 的值， 向元素外部（ outline- offset 值 为 正值） 或向元素内部（ outline- offset 值 为 负值） 创建封闭的轮廓。
。。。。。。
十， CSS3伸缩布局盒模型
早期的布局主要依赖于表格， 从 CSS2. 1中有关于布局的机制有所改变， 但还是并不多。 开发者通常不愿意使用绝对定位， 因为太不灵活； 浮动 定位 常用于页面的 布局， 但 对于全页多列布局来说， 它总是存在一些小毛病， 功能上也有很多限制。 CSS3 中引入了许多的布局机制， 使构建一个多列布局变得更加轻松， 同时， CSS2. 1 规则是比较难实现的一些 复杂布局表现， 如今也变得更加容易。
- 弹性盒模型 Flexbox模型基础知识CSS3 引入 一种新的布局模式—— Flexbox 布局， 即伸缩布局盒（ Flexible Box）模型， 用来提供 一个更加有效的方式制定、 调整和分布一个容器里的项目布局， 即使它们的大小是未知或者动态的， 这里简称 Flex。
CSS 中的布局模式
谈到布局， CSS2. 1 中 定义 了四种布局模式，由一个盒与其 弟、 祖先盒的关系决定其尺寸与位置的算法。
·块布局： 呈现文档的布局模式。
·行内布局： 呈现文本的布局模式。
·表格布局： 用格子呈现2D数据的布局模式。
·定位布局： 能够直接地定位元素的布局模式， 定位元素基本与其他元素没有任何关系。
CSS3 引入的布局模式 Flexbox 布局， 主要思想是让容器有能力让其子项目能够改变其宽度、 高度（ 甚至 顺序）， 以最佳方式填充可用空间（ 主要是为了适应所有类型的显示设备和屏幕大小）。 Flex容器会使子项目（ 伸缩 项目）扩展来填满可用空间， 或缩小它们以防止溢出容器。
最重要的是， Flexbox布局方向不可预知， 不像常规的布局（ 块就是从上到下， 内联就 从左到右）， 而那些常规的适合页面布局， 但对于支持大型或者复杂的应用程序（ 特别是涉及取向改变、缩放 和收缩等） 就缺乏灵活性。
：Flexbox 模型的功能
Flexbox 布局对于设计比较复杂的页面非常有用。 可以轻松地实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变。 同时减少了依赖于 浮动 布局 实现 元素 位置 的 定义 以及 重置 元素的大小。 Flexbox 布局在定义伸缩项目大小时 伸缩容器会预留一些可用空间， 可以调节伸缩项目的相对大小和位置。 例如， 可以确保伸缩容器中的多余空间平均分配多个伸缩项目。 当然， 如果 伸缩容器没有足够大的空间放置伸缩项目时， 浏览器会根据 一定的比例减少伸缩项目的大小， 使其不溢出伸缩容器。 综合而言， Flexbox 布局功能主要具有以下几点：
1· 屏幕和浏览器窗口大小发生改变也可以灵活调整布局。
2· 指定伸缩项目沿着主轴或侧轴按比例分配额外空间（ 伸缩 容器 额外 空间）， 从而调整伸缩项目的大小。
3· 指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间， 分配到伸缩项目之前、 之后或之间。
4· 指定如何将垂直于元素布局轴的额外空间分布到该元素的周围。
5· 控制元素在页面上的布局方向。
6· 按照不同于文档对象模型（ DOM） 所指定排序方式对屏幕上的元素重新排序。 也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
：Flexbox 模型 中的术语
Flexbox 模型中的术语和 CSS3 其他 属性不一样， Flexbox 并不是一个属性， 而是一个模块， 包括多个 CSS3属性， 涉及很多东西， 包括整个组属性。 虽然现在对Flexbox有 一定的了解， 如果想 更好地使用 Flexbox， 新的术语和概念可能是一个障碍， 所以首先了解基本概念。
- 主轴和侧轴在 Flexbox 模型中与布局计算偏向使用书写模式方向的块布局与行内布局不同， 伸缩 布局 偏向 使用 伸缩 流的 方向。一个 row伸缩容器中各种方向与大小术语
·主轴、主轴方向： 用户代理沿着一个伸缩容的主轴配置伸缩项目， 主轴是主轴方向的延伸。 伸缩容器的主轴， 伸缩项目主要沿着这条轴进行布局。 小心， 它不一定是水平的， 这主要取决于 justify- content 属性。 如果 其 取值 为 column， 主轴的方向为纵向的。
·主轴起点、主轴终点： 伸缩项目的配置从容器的主轴起点边开始， 往主轴终点边结束。 也就是说， 伸缩项目放置在伸缩容器内从主轴起点（ main- start） 向主轴终点（ main- end）方向。
·主轴长度、主轴长度属性： 伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度， 伸缩项目的主轴长度属性是 width 或 height 属性， 由哪一个对着主轴方向决定。
·侧轴、侧轴方向： 与主轴垂直的轴称做侧轴， 侧轴是侧轴方向的延伸。 主要取决于主轴方向。
·侧轴起点、侧轴终点： 填满项目的伸缩行的配置配置从容器的侧轴起点边开始， 往侧轴终点边结束。
·侧轴长度、 侧轴长度属性： 伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度， 伸缩项目的侧轴长度属性是 width 或 height 属性， 由 一个 对着 侧 轴 方向 决定。
- 伸缩容器和伸缩项目通过 display 属性显式地给 一个元素 设置为 flex或者inline- flex， 这个容器就是一个伸缩容器。 伸缩容器会为其内容创立新的伸缩 格式化上下文， 其中设置为 flex 的容器 被 渲染为 一个块级元素， 而设置 为inline- flex 的容器则渲染 为 一个行内元素。 若 元素 display 的 指定 值 是 inline- flex 且元素 是一 个浮动或绝对定位元素， 则 display 的计算值是flex。 一个伸缩容器的内容具有零个以上的伸缩项目—— 伸缩容器的每个子元素（ 除了 需要 盒 修复 的 元素 之外） 都会成为 一个伸缩项目， 且用户代理会将任何直接在伸缩容器里的连续文字块包起来 成为 匿名伸缩项目。
- 伸缩容器的属性Flexbox伸缩布局中伸缩容器和伸缩项目是伸缩布局模块中的重要部分， 其中每一部分都具有各自的属性。 伸缩容器的属性包括以下几个：
1） 伸缩流方向。 是指伸缩容器的主轴方向， 其决定了伸缩项目放置在伸缩容器的方向。 伸缩流方向主要通过flex- direction属性来设置， 其默认值为row。 伸缩流方向和书写模式有关系， 换句话说， 伸缩项目根据书写模式的方向布局。
2） 伸缩行换行。 伸缩项目在伸缩容器中有时候也会溢出伸缩容器。 与传统的盒模型一样， CSS允许使用overflow属性来处理溢出内容的显示方式。 在伸缩容器中有一个伸缩换行属性， 主要用来 设置伸缩容器的伸缩项目是单行显示还是多行显示， 以及决定侧轴的方向。 使用此属性来启用溢出的伸缩容器的伸缩项目自动换行到下一行以及控制流动方向。 在伸缩容器属性中， 主要通过 flex- wrap 属性来设置伸缩项目是否换行， 默认值为 nowrap。
3） 伸缩方向与换行。 是 伸缩 流 方向 与 伸缩 换行 的 结 合物， 换句话说， 伸缩 方向 与 换行 属性 flex- flow 同时 设定 了 伸缩 流 方向 flex- direction 和 伸缩 换行 flex- wrap 两个 属性， 简而言之 是 这 两个 属性 的 缩写， 这 两个 属性 决定了 伸缩 容器 的 主轴 与 侧 轴。
4） 主轴对齐。 用来设置伸缩容器当前行伸缩项目在主轴方向的对齐方式， 指定 如何 在 伸缩 项目 之间 分布 伸缩 容器 额外 空间。 当 一 行上 的 所 伸缩 项目 不能 伸缩 或 可伸缩 但 已达 到 最大 长度 时， 这一 属性 才会 对 伸缩 容器 额外 空间 进行 分配。 当 伸缩 项目 溢出 某 一行 时， 这一 属性 也会 在 项目 的 对齐 上 施加 一些 控制。
5） 侧轴对齐。 伸缩 项目 可以 在 伸缩 容器 当前 行的 侧 轴上 进行 对齐， 这类 似于 主轴 对齐 方式， 只是 另一个 方向。 也就是说 侧 轴 对齐 主要 用来 指定 伸缩 项目 在 伸缩 容器 中 如何 放置 和 对齐 的 方式。 换句话说， 用来 定义 伸缩 项目 在 伸缩 容器 的 当前 行的 侧 轴上 对齐 方式。
6） 堆栈伸缩行。 用来 定义 伸缩 容器 中 伸缩 项目 行在 侧 轴 的 对齐 方式， 类似于 侧 轴 对齐， 只不过 这是 用来 控制 伸缩 项目 行在 布局 轴 的 堆放 方式。
- 伸缩项目的属性一个伸缩项目是一 个伸缩容器的子元素。 伸缩容器中的文本也被视为一个 伸缩项目。 伸缩 项目 中 内容 与 普通 流 一样。 比如说， 当 一个 伸缩 项目 被 设置 为 浮动， 依然 可以 在这 个 伸缩 项目 中 放置 一个 浮动 元素。 伸缩 项目 都有 一个 主轴 长度 和 一个 侧 轴 长度。 主轴 长度 是 伸缩 项目 在 主 轴上 的 尺寸， 侧 轴 长度 是 伸缩 项目 在 侧 轴上 的 尺寸。 或者说，一个 伸缩 项目 的 宽度 或 高 取决于 伸缩 容器 的 轴， 可能 就是 它的 主轴 长度 或侧 轴 长度。 下面 的 几个 属性 可以 调整 伸缩 项目 的 行为：
1） 显示顺序。 伸缩 容器 中的 伸缩 项目 默认 显示 顺序 是 遵循 文档 在 源 码 中的 出现 的 先后 顺序（ HTML 文档 的 DOM 结构 中的 先后 顺序）。 可以 通过 伸缩 项目 的 显示 顺序 修改 伸缩 项目 在 页面 中 显示 顺序， 也可以 通过 这个 属性 对 伸缩 项目 进行 排序 组合。
2） 侧轴对齐。 包括 两种， 一种 是 align- items 属性， 可以 用来 设置 伸缩 容器 中 包括 匿名 伸缩 项目 的 所有 项目 的 对齐 方式； 另一种 是 align- self 属性， 主要 用来 在 单独 的 伸缩 项 目上 覆 写 默认 的 对齐 方式。 对于 匿名 伸缩 项目， align- self 的 值 永远 与其 关联 的 伸缩 容器 的 align- items 的 值 相同。
3） 伸缩性。 定义 伸缩 项目 可改变 它们 的 宽度 或 高度 填补 可用 的 空间。 可以 将 伸缩 容器 的 额外 空间 分 发给 其 伸缩 项目（ 与 伸缩 项 目的 正 弹性 成正比） 或将 它们 缩小 以防 止 伸缩 项目 溢出（ 与 伸缩 项 目的 负 弹性 成正比）。
- 伸缩行伸缩项目 沿着 伸缩 容器 内 的 一个 伸缩 行 定位。 伸缩 容器 可以 是 单行 的， 也可以 是 多 行的。 其 主 要由 flex- warp 属性 决定。 单行 的 伸缩 容器 会 将其 所有 子 元素 在 单独 的 一行 上进 行 布局， 这种 情况 之下 有可能 导致 内容 溢出 伸缩 容器； 多 行的 伸缩 窗口 会 将其 伸缩 项目 配置 在 多个 伸缩 行上， 这类 似于 文本 的 排列。 当 文本 过宽 导致 一行 无法 容纳 时， 内容 会 断开 并 移至 新的 一行。 当 用户 代理 创建 新的 伸缩 行 时， 这些 伸缩 行会 根据 flex- wrap 属性 沿着 侧 轴 进行 堆叠。 除非 伸缩 容器 本身 是 空的， 每一个 伸缩 行 至少 包含 一个 伸缩 项目。
：Flexbox 模型规范状态
Flexbox布局的语法规范经过几年发生了很大的变化，也给 Flexbox 的使用带来一定的局限性， 因为语法规范版本众多， 浏览器支持不一致， 致使 Flexbox 布局使用不多。 Flexbox 语法规范主要经历 了以下阶段。
1） 2009 年 07 月 工作 草案（ display: box）
2） 2011 年 03 月 工作 草案（ display: flexbox）
3） 2011 年 11 月 工作 草案（ display: flexbox）
4） 2012 年 03 月 工作 草案（ display: flexbox）
5） 2012 年 06 月 工作 草案（ display: flex）
6） 2012 年 09 月 候选 推荐（ display: flex）
把 Flexbox 布局 语法 规范 主要 分成 三种。
·旧版本（ Old），2009年版本， 使用 display: box 或者display: inline- box。
·混合版本（ Hybrid），2011年版本，使用display: flexbox 或者display: inline- flexbox。
·最新版本（ Modern），使用display: flex或者display: inline- flex。
：如何辨别旧Flexbox和新Flexbox
·看到“ display: box”或者“ box-{}” 属性， 说明 是 2009 年 版本 的 Flexbox。
·看到“ display: flexbox” 或者“ flex()”函数， 说明 是 2011 年 版本， 也称 为 Flexbox 混合 版本。
·看到“ display: flex” 或者“ flex-{}”属性， 说明 是 当前 规范， 也就是 W3C 标准 规范 版本 的 Flexbox。
：伸缩容器设置display要改变元素的模式， 需要使用display属性， 如果在让一个元素变成伸缩容器， 也离不开display属性。
属性值主要有两种。
·box： 设置为块伸缩容器。
·inline- box： 设置为内联级伸缩容器。
：伸缩流方向 box- orient伸缩 流 方向 box- orient 属性 主要用来创建主轴， 从而定义了伸缩项目在伸缩容器中的流动布方向。 换句话说主要用来指定伸缩项目如何放置在伸缩容器的主轴上。
伸缩流方向 box- orient主要适用于伸缩容器。 伸缩流方向主要是用来确定伸缩项目在伸缩容器中的流动布局方向，该属性主要有四个属性值， 其取值说明如下：
·horizontal： 伸缩项目在伸缩容器中从左到右在一条不平线上排列显示。
·vertical： 伸缩项目在伸缩容器中从上到下在一条垂直线上排列显示。
·inline- axis： 伸缩项目沿着内联轴排列显示。
·block- axis： 伸缩项目沿着块轴排列显示。
伸缩流方向和文本书写模式也有关系， 如果书写模式是ltr， 表示排版本方向从左向右， 如果书写模式是rtl表示排版方向从右向左排列。 伸缩流的取值为 horizontal 和 inline- axis 时， 确认伸缩项目的 伸缩流方向和书写模式的方向关连性非常的强。 可以说书写模式直接影响了它们的排列方向。
。。。。。。
十一， CSS3 渐变，渐变是两种或多种颜色之间的平滑过渡。
- CSS3线性渐变在线性渐变过程中， 颜色沿着一条直线过渡： 从左侧到右侧、 从右侧到左侧、 从顶部到底部、 从底部到顶部或沿任意轴。 如果使用过制作 Photoshop 等软件， 对线性渐变并不会 陌生。 CSS3制作渐变效果， 其实和使用制作软件中的渐变工具没有什么差别。 首先指定一个渐变的方向、 起始颜色、 结束颜色。 具有这三个 数就可以制作 一个最简单、 最普通的渐变效果。 如果 制作一个复杂的多色渐变效果， 就需要在同一个渐变方向增添多个色 标。 具备这些渐变参数（ 至少三个）， 各浏览器就会绘制与渐变线垂直的颜色结来填充整个容器。 浏览器渲染出来的效果就 类似于制作软件设计出来的渐变图像。
：CSS3线性渐变，(linear-gradient)
1：颜色从顶部向底部渐变 简单的方法直接使用“ to top”关键词， 表示第一颜色向第二颜色渐变。 实现类似于“ to top”效果还可以使用角度值“ 0deg”、“ 360deg” 和“- 360deg”。
2：颜色从底部向顶部渐变 关键词“ to bottom” 刚好 与“ to top” 相反， 从底部向顶部实现渐变效果。 也可以使用角度值“ 180deg” 和“- 180deg” 实现同等效果。
3：颜色从左向右渐变“to left”关键词实现了从左向右颜色渐变， 也可以通过角度值“ 90deg” 和“ 270deg”实现。
4：颜色从右向左渐变 “to right” 正好与“ to left” 效果相反。 实现了颜色从右向左直线渐变， 也可以使用角度值“ 90deg” 和“- 270deg”。
5：从右下角向左上角线性渐变 “to top left” 实现从右下角向左角线性渐变。
6：从左下角到右上角线性渐变 “to top right” 关键词实现左下角到右上角的线性渐变。
7：从右上角到左下角线性渐变 “to bottom left” 关键词实现了右上角向左下角直线渐变。
8：从左上角向右下角线性渐变 “to bottom right” 关键词实现了左上角向右下角直线渐变。
CSS3 制作 渐变 按钮
Web页面或者说Web程序应用中， 按钮是设计中的一个重要元素， 也是设计师非常重视的一个设计元素。 设计师借助Photoshop等软件实现按钮效果， 然后通过图片的方式转用到Web页面中或者 Web应用程序中。 这种方法安全、 兼容性较强， 实现方法也简单， 但适应能力比较弱、 重用性、 可扩展性、 维护性差。 例如， 修改一个按钮的颜色， 必须先从制作软件中修改好， 再次切 图， 最后替换 Web页面中的图片。 CSS3 的渐变出现后， Web设计师可以摆脱Photoshop的束缚， 特别是在配合CSS3的阴影、 圆角和@font- face等属性， 可以直接脱离制图软件， 直接使用CSS快速 设计各种精巧、靓丽、 细腻的按钮（ 几乎可以和设计软件制作出来的效果一模一样）。 通过CSS3属性制作的按钮与设计软件制作的按钮相比， 有以下几大优势：
·灵活性、 可扩展性强： 可以通过CSS3的属性可以直接修改按钮的大小、 背景等效 果。
·可以减少http请求， 提高页面的加载性能。
·可以应用到任何的HTML标签元素， 如 a、 input、 button、 span 和 div 等。 ·可以支持按钮多种状态效果， 比如当前状态、 悬停状态和点击状态。
·完全兼容不支持 CSS3 的浏览器， 如果不兼容CSS3， 则显示没有渐变和阴影的普通效果。
：CSS3径向渐变，(radial-gradient)
CSS3径向渐变是圆形或椭圆形渐变。 颜色不再沿着一条直线轴变化， 而是从一个起点朝所有方向混合。 但相对线 渐变要比径向渐变复杂得多。
CSS3 径向渐变的属性参数
CSS3的径向渐变相对于线性渐变要复杂得多， 属性参数也繁多复杂。 CSS3径向变中新旧语法中的属性参数定义如下:
1.< position>主要用来定义径向渐变的圆心位置。 此值类似于CSS中background- position属性， 用于确定元素渐变的中心位置。 如果这个参数省略了， 其默认值为 center。 其值主要有以下几种： ·<length>： 用长度值指定径向渐变圆心的横坐标或纵坐标， 可以为负值。
·<percentage>： 用百分比指定径向渐变圆心的横坐标或纵坐标， 可以为负值。
·center： 设置中间为径向渐变圆心的横坐标值或纵坐标。
·top： 设置顶部为径向渐变圆心的纵标值。
·right： 设置右边为径向渐变圆心的横坐标值。
·bottom： 设置底部为径向渐变圆心的纵标值。
·left： 设置左边为径向渐圆心的横坐标值。
2.< shape> 主要用来定义径向渐变的形状。 其主要包括两个值circle 和ellipse：
·circle： 如果< size> 和< length> 大小相等， 径向渐变是一 个圆形， 也就是用来指定圆形的径向渐变。
·ellipse： 如果< size> 和< length> 大小不相等， 径向渐变是一个椭圆形， 也就是用来指定椭圆形的径向渐变。
3.< size>用来确定径向渐变的结束形状大小。 如果省略， 其默认值为 farthest- corner。 可以给其显式地设置一些关键词。
·closest- side： 指定径向渐变的半径长度为从圆心到离圆心最近的边。
·closest- corner： 指定径向渐变的半径长度为从圆心到圆心 最近的角。
·farthest- side： 指定径向渐变的半径长度为从圆心到离圆心最远的边。
·farthest- corner： 指定径向渐变的半径长度为从圆心到离圆心最远的角。 如果< shape>设置 为circle或者省略，< size> 可能显式设置为< length>。 表示用长度值指定径向渐变的横向或纵向直径 长度， 并根据横向和纵向的直径来确定径向渐变的形状是圆或者是椭圆， 不能为负值。
4.< color- stop> 径向渐变线上的停止颜色， 类似于线性渐变的< color- stop>， 渐变线从中心点向右扩散。 其中0%表示渐变线的起始点， 100%表示渐变线的与渐变容器相交结束的位置， 而且其 颜色停止可以定义一个负值。
：CSS3重复线性渐变
可以使用重复线性渐变repeating-linear-gradient 属性代替线性渐变linear-gradient。 它们采取相同的值， 但色标在两个方向上都无限重复。 不过使用百分比设置色标的位置没有多大的意义， 但 使用像素和其他的单位重复线性渐变可以创建一些很酷的效果，
：CSS3重复径向渐变
以同样的方式， 使用相关的属性创建重复的径向渐变， 其语法和radial- gradient 类似， 只是以一个径向渐变为基础进行重复渐变，
在CSS3中渐变特性主要包括
线性渐变（ linear- gradient）、
径向渐变（ radial- gradient）、
重复线性渐变（ repeating- linear- gradient）
重复径向渐变（ repeating- radial- gradient） 四种。其中线性渐变和重复线性渐变语法相同， 而径向渐变和重复径向渐变的语法相同。
从本质上说， 渐变就是背景属性中的background-image， 浏览器直接将渐变生成图片， 可以直接使用 CSS 背景属性来控制它们。
。。。。。。
十二，CSS3变形
CSS2. 1 中的页面都是静态的， 网页设计师也习惯把它作为页面效果的设计工具。 多年来， Web设计师依赖于图片、 Flash或 JavaScript才能完成修改页面的外观。 CSS3将改变设计师这种思维，借助 CSS3可以轻松 倾斜、 缩放、 移动 以及翻转元素。
2012年9月， W3C组织发布了CSS3变形工作草案。 允许CSS把元素转变为2D或3D空间， 这个草案包括了CSS32D变形和CSS33D变形。 CSS3变形是一 些效果的集合， 比如 平移、 旋转、 缩放 和 倾斜效果， 每个效果都称为变形函数（ Transform Function）， 它们可以操控元素发生旋转、 缩放、 平移 等 变化。 这些效果在之前都需要依赖图片、 Flash或 JavaScript才能完成。 而使用纯 CSS 来完成 这些变形无须加载这些额外的文件， 再一次提升了开发效率， 提高了页面的执行效率。
CSS 变形属性及函数
CSS 变形允许动态的控制元素， 可以在屏幕周围移动它们， 缩小或扩大、 旋转， 或结合所有这些产生复杂的动画效果。 通过CSS变形， 可以让元素生成静态视觉效果， 也可以很容易结合CSS3的 transition和动画的keyframe产生 一些动画效果：
·CSS3变形中具有 X/ Y可用的函数： translateX()、 translateY()、 scaleX()、 scaleY()、 skewX() 和 skewY()。
·CSS32D变形函数包括： translate()、 scale()、 rotate() 和 skew()。 translate()函数接受CSS的标准度量单位； scale()函数接受 一个 0 ～ 1 之间的十进制值； rotate() 和 skew() 两个函数都接受 一个径向的度量单位值deg。 除了rotate()函数之外， 每个函数都接受X轴和Y轴的参数。 2D变形中还有一个矩阵matrix()函数， 包括6个参数。
·CSS3 3D变形函数包括： rotateX()、 rotateY()、 rotate3d()、 translateZ()、 translate3d()、 scaleZ() 和scale3d()。 3D变形中也包括一个矩阵matrix3d()函数， 包括16 个参数。
CSS 变形属性详解
transform属性指一组转换函数， transform-origin属性指定元素的中心点在哪， 新增加了第三个数transform-origin-z， 控制元素三维空间中心点。 transform- style的值设置为 preserve- 3d， 建立 一个3D渲染环境。
：CSS3 2D变形
在二维或三维空间， 元素可以被扭曲、 移位或旋转。 只不过2D变形工作在X轴和Y轴， 也就是大家常说的水平轴和垂直轴； 而3D变形工作在X轴和Y轴之外， 还有一个Z 轴， 这些3D变换不仅可以 定义元素的长度和宽度， 还有深度。 首先讨论元素在2D平面如何变换， 然后在进入3D变换的讨论。 CSS3 2D变换让Web设计师有了更多的自由来装饰和变形HTML组件， 同时有更多的功能装饰文本 和更多的动画选项来装饰div元素。
2D 位移
在这里 translate是一种方法， 将元素向指定的方向移动， 类似于position中的relative。 可以简单理解为， 使用translate()函数可以把元素从原来的位置移动， 而不影响在 X、 Y 轴上任何组件。
translate() 函数可以取一个值tx，也可以取两个值tx和 ty，
·tx：代表X轴（ 横坐标）移动的向量长度， 当其值为正值时， 元素向X轴右方向移动， 反之其值为负值时， 元素向X轴左方向移动。
·ty：代表Y轴（ 纵坐标） 移动的向量长度，当其值为正值时， 元素向Y轴下方向移动， 反之其值为负值时， 元素向Y轴上方向移动。 如果ty没有显式设置时， 相当于ty=0。
结合起来， translate()函数移动元素主要有以下三种移动。
·水平移动： 向右移动 translate( tx, 0) 和向左移动 translate(- tx, 0)。
·垂直移动：向上移动 translate( 0,- ty) 和向下移动 translate( 0, ty)。
·对角移动：右下角移动 translate( tx, ty)、右上角移动translate( tx,- ty)、 左上角移动translate(- tx,- ty) 和左下角移动translate(- tx, ty)。
如果要将对象沿着一个方向移动， 如沿着水平轴或者纵轴移动， 可以使用translate( tx, 0) 和translate( 0, ty)来实现。 其实在变形中还为单独一个方向移动对象提供了更简单的方法。
·translateX()：水平方向移动一个对象。 通过给定一个X轴方向的数值指定对象沿水平轴方向的位移。简单点说，对象只向X轴进行移动， 如果值为正值， 对象向右移动； 如果值为负值， 对象向左 移动。
·translateY()：纵轴方向移动一个对象。 通过给定一个Y轴方向的数值指定对象沿纵轴方向的位移。 简单点说，对象只向Y轴进行移动，如果值为正值，对象向下移动； 如果值为负值，对象 向上 移动。 这两个函数和前面介绍的 translate()函数不同的是每个方法只接受一个值。
·transform: translate(- 100px, 0) 实际上 等于 transform: translateX(- 100px)。
·transform: translate( 0,- 100px) 实际上 等于 transform: translateY(- 100px)。
2D缩放
缩放函数scale()让元素根据中心原点对对象进行缩放， 默认值为 1。 因此0. 01到 0. 99之间的任何值， 使一个元素缩小； 而任何大于或等于 1. 01的值， 让元素显得更大。
缩放scale()函数和translate()函数的语法非常相似， 可以接受一个值， 也可以接受两个值， 只有一个值时， 其第二个值默认与第一个值相等。
其 取值 简单 说明 如下：
·sx：指定横向坐标（ X 轴）方向的缩放向量， 如果值为0. 01 ～ 0. 99之间， 会让对象在X 轴方向缩小， 如果值大于或等于1. 01， 对象在X 轴方向放大。
·sy：指定纵向坐标（ Y 轴）方向的缩放量， 如果值为 0. 01 ～ 0. 99 之间， 会让对象在Y轴方向缩小， 如果值大于或等于1. 01， 对象在Y 轴方向放大。
·scaleX()：相当于 scale( sx, 1)。 表示元素只在X轴（ 水平 方向） 缩放元素， 默认值是 1。
·scaleY()：相当于 scale( 1, sy)。 表示元素只在Y轴（ 纵横 方向） 缩放元素， 默认值是 1。
2D旋转
旋转函数rotate()通过指定的角度参数对元素根据对象原点指定 一个2D旋转。 主要在二维空间内进行操作，接受一个角度值， 用来指定旋转的幅度。 如果这个值为正值， 元素相对原点中心顺时针 旋转； 如果这个值为负值， 元素相对原点中心逆时针旋转。
rotate() 函数只接受一个值a， 代表旋转的角度值。 其取值可以是正的， 也可以是负的。
·取值为正值时， 元素默认相对元素中心点顺时针旋转。
·取值为负值时， 元素默认相对元素中心点逆时针旋转。
2D倾斜
倾斜函数skew()能够让元素倾斜显示， 可以将一个对象以其中心位置围绕着X轴和Y轴 按照一定的角度倾斜。 与rotate()函数的旋转不同， rotate()函数只是旋转， 而不会改变元素的形状。 skew() 函数 不会旋转， 而只会改变元素的形状。
·ax： 指定元素水平方向（ X 轴 方向） 倾斜的角度。
·ay： 指定元素垂直方向（ Y 轴 方向） 倾斜的角度。
skew() 函数和CSS3变形中的 translate()、 scale()函数一样， 除了可以使用 skew( tx, ty)函数让元素相于元素中心为原点在X轴和Y轴倾斜之外， 还可以使用使用 skewX() 和 skewY() 函数让元素只在 水平或垂直方向倾斜。
·skewX()：相当于skew( ax, 0) 和 skew( ax)。按给定的角度沿X轴指定一个倾斜变形。 skewX()使元素以其中心为基点， 并在水平方向（ X 轴）进行倾斜变形。
·skewY()：相当于skew( 0, ay)。按给定的角度沿Y轴指定一个倾斜变形。 skewY()用来设置元素以其中心为基点并按给定的角度在垂直方向（ Y 轴） 倾斜变形。
在默认情况下，skew()函数都是以元素的原中心点对元素进行倾斜变形，但是同样可以根据 transform- origin 属性， 重新设置元素基点对元素进行倾斜变形。另外，skew()函数和制图软件中的变形 工具所起作用类似，
2D矩阵
CSS3中Transform让操作变形变得很简单， 如位移函数translate()、 缩放函数scale()、 旋转函数rotate() 和倾斜函数skew()。 这几个函数很简单， 也很方便， 但是变形中的矩阵函数matrix()不常用。 当然， Web 设计师可以使用 rotate()、 skew()、 scale() 和 translate() 函数来满足它们的变形需要， 那为什么要使用矩阵matrix() 呢？ 在CSS3中的变形函数都可以使用matrix()函数来代替。
：CSS3 3D变形
使用二维变形能够改变元素在水平和垂直轴线， 然而还有一个轴沿着它， 可以改变元素。 使用三维变形， 可以改变元素在Z 轴位置。 三维变换使用基于二维变换的相同属性， 如果熟悉二维变换会 发现， 3D变形的功能和2D变换的功能类似。 CSS3中的3D变换主要包括以下几种功能函数：
·3D 位移： 包括 translateZ() 和 translate3d() 两个功能函数。
·3D 旋转： 包括 rotateX()、 rotateY()、 rotateZ() 和 rotate3d() 四个功能函数。
·3D 缩放： 包括 scaleZ() 和 scale3d() 两个功能函数。
·3D 矩阵： 和 2D 变形一样， 也有 一个 3D矩阵功能函数 matrix3d()。
CSS3中3D 位移
主要包括两种函数 translateZ() 和 translate3d()。
- translate3d()函数的语法translate3d()函数使一个元素在三维空间移动。 这种变形的特点是， 使用三维向量的坐标定义元素在每个方向移动多少。
translate3d( tx, ty, tz)
其属性值取值说明如下：
·tx：代表横向坐标位移向量的长度；
·ty：代表纵向坐标位移向量的长度；
·tz：代表Z轴位移向量的长度。 此值不能是一个百分比值， 如果取值为百分比值， 将会认为无效值。
- translateZ()函数，功能是让元素在3D空间沿Z轴进行位移，
translate( t)
取值t指的是Z轴的向量位移长度。使用 translateZ()函数可以让元素在Z 轴进行位移，当其值为负值时，元素在Z 轴越移越 远，导致元素变得较小。反之，当其值为正值时，元素在Z轴越移越近， 导致 元素变得较大。
translateZ() 函数在实际使用中等同于translate3d( 0, 0, tz)。仅从视觉效果上看， translateZ() 和 translate3d( 0, 0, tz) 函数功能非常类似于二维空间的 scale() 缩放 函数， 但实际上完全不同。 translateZ() 和 translate3d( 0, 0, tz) 变形是发生在Z轴上， 而不是X轴和Y轴。 当使用3D变形， 能够在Z轴上移动一个元素确实有很大的好处， 比如说在创建一个3D立方体的盒子之时。
CSS3中3D 缩放
scaleZ() 和 scale3d() 函数单独使用时没有任何效果， 需要配合其他的变形函数一起使用才会有效果。
CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数， 当scale3d()中X轴和Y轴同时为1， 即scale3d( 1, 1, sz)，其效果等同于scaleZ( sz)。
- scaleZ()3D缩放函数， 可以让元素在Z轴上按比例缩放。 默认值为1， 当值大于1 时， 元素放大， 小于1大于0. 01时， 元素缩小。
scale3d( sx, sy, sz)
sx： 横向缩放比例
sy： 纵向缩放比例
sz： Z轴缩放比例。
CSS3中 3D 旋转
在三维变形中， 可以让元素在任何轴旋转。 为此， CSS3新增三个旋转函数 rotateX()、 rotateY() 和 rotateZ()。
在 三维空间 里， 使用 rotateX()、 rotateY() 和 rotateZ() 函数 让 一个 元素 围绕 X、 Y、 Z 轴 旋转， 其 基本 语法 如下：
rotateX( a)
rotateY( a)
rotateZ( a)
其中 a 指的是一 个旋转角度值， 其值可以是正值也可以是负值。 如果值为正值， 元素顺时针旋转； 反之， 值为负， 元素围绕逆时针旋转。
rotateZ() 函数 指定 元素 围绕 Z 轴 旋转， 如果 仅 从 视觉 角度 上看， rotateZ() 函数 让 元素 顺时针 或 逆时针 旋转， 并且 效果 和 rotate() 效果 等同， 但不 是在 2D 平面 旋转。 在 三维空间 里， 除了 rotateX()、 rotateY() 和 rotateZ() 函数 可以 让 一个 元素 在 三维空间 中 旋转 之外， 还有 一个 属性 函数 rotate3d()。 在 3D 空间， 旋转 有 三个 角度 来 描述 一个 转动 轴。 轴 的 旋转 是由 一个[ x, y, z] 向量 并经 过 元素 原点。 其 基本 语法 如下：
rotate3d( x, y, z, a) rotate3d() 中 取值 说明。
·x： 0 ～ 1 的 数值， 用来 描述 元素 围绕 X 轴 旋转 的 矢量 值。
·y： 0 ～ 1 的 数值， 用来 描述 元素 围绕 Y 轴 旋转 的 矢量 值。
·z： 0 ～ 1 的 数值， 用来 描述 元素 围绕 Z 轴 旋转 的矢量 值。
·a： 角度 值， 用来 指定 元素 在 3D 空间 旋转 的 角度， 如果 其 值 为 正值， 元素 顺时针 旋转， 反之 元素 逆时针 旋转。 当 x、 y、 z 三个 值 同时 为 0 时， 元素 在 3D 空间 不做 任何 旋转。 当 x、 y、 z 取 不同 值 时， 和 前面 介绍 的 三个 旋转 函数 功能 等同。
·rotateX( a) 函数 功能 等 同于 rotate3d( 1, 0, 0, a)。
·rotateY( a) 函数 功能 等 同于 rotate3d( 0, 1, 0, a)。
·rotateZ( a) 函数 功能 等 同于 rotate3d( 0, 0, 1, a)。
。。。。。。
十三，CSS3 过渡，多年来， Web前端开发人员一直在寻求通过HTML和CSS实现一些动画交互效果， 而不再使用JavaScript 或Flash。 现在他们的愿望实现了。 CSS3除了给我们带来前面介绍的一些 特殊功能模块之外， 还为Web设计师添加了 一些动画功能模块。 可以通过: hover、: focus、: active、: checked 或者JavaScript 触发一个元素， 这样， 外观变化会显得更细腻， 而不会让人感觉“ 一触即发”。 例如 悬浮 修改 链接色， 在 CSS2. 1 中鼠标悬浮时， 立刻从一个颜色变成另一个颜色。 而在CSS3 中使用过渡功能， 鼠标悬浮时， 颜色在一定的时间内， 从一个颜色过渡到另一个 颜色， 给用户更好、 更细腻的体验。
CSS3的过渡功能像是一种黄油， 通过一些CSS的简单动作触发样式平滑过渡。 W3C标准中描述的transition功能很简单： CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种 效果可以在鼠标单击、 获得焦点、 被点击或对元素任何改变中触发， 并平滑地以动画效果改变CSS的属性值。
以往Web中的动画都是依赖于JavaScript和Flash实现， 但原生CSS过渡在客户端上需要处理的资源少得多， 从而显得更加平滑。 CSS3过渡与元素上的常规样式一起声明。 只要目标属性更改， 浏览器 就会应用过渡。 除了使用JavaScript 触发动作外， 在CSS中也可以通过一些伪类来触发， 如： hover、: focus、: active、: target 和: checked 等。 这很重要： 无须在 JavaScript 中编写动画， 只需 要更改一个属性值并依赖浏览器来执行所有重要工作。 以下 是 使用 CSS 创建 简单 过渡 的 步骤：
1） 在默认样式中声明元素的初始状态样式。
2） 声明过渡元素最终状态样式， 比如悬浮状态。
3） 在默认样式中通过添加过渡函数， 添加一些不同的样式。
transition属性是一个复合属性， 出于简洁性和便于维护考虑， 过渡语法通常以简化的形式表达。
transition 属性主要包含四个属性值：
·transition- property： 指定过渡或动态模拟的CSS属性。
·transition- duration： 指定完成过渡所需的时间。
·transition- timing- function： 指定过渡函数。
·transition- delay： 指定过渡开始出现的延迟时间。
指定过渡函数 transition- timing- function transition- timing- function 属性指定某种指代过渡“ 缓动函数” 的属性。 此属性可指定浏览器的过渡速度， 以及过渡期间的操作进展情况， 可以将某个 值指定为预定义函数、 阶梯函数 或者 三次贝塞尔曲线。
到目前为止， 看到的 ease、 linear、 ease- in、 ease- out 和 ease- in- out 等曲线函数非常一般， 用于过渡动画中也不是十分精确。而现在制作一些动画需求越来越精确，需要定义一些更精确的 函数。
CSS3 的transition 中， 定义三次贝塞尔曲线的语法如右所示： cubic-bezier( P0, P1, P2, P3)
一个三次贝塞尔曲线由四个点控制曲线形状。每个点由水平和垂直两个值来确定， 也就是常说的由X和Y值确定。
这些点的值是小数或者百分比， 不过很少看到使用百分比来设置一个三次贝塞尔曲线点。而且它们的值都是一个0 ～ 1 的小数。 不过有一点需要特别注意， 三次贝塞尔曲线中的P0 和 P 两个点是无法 设置的， 因为它们总是存在HTML中， 也就是说它们总会是（ 0， 0）和（ 1， 1）。
注意，三次贝塞尔曲线中的每个点值只允许 0 ～ 1 的值。
step() 函数 step()函数用于把整个操作领域划成同样大小的间隔， 每个间隔都是都是相等的。 该函数还指定发生在开始或结束的时间间隔是否另外输出百分比（ 换句话说， 如果输出的百分比为 0% 表示输入变化的初始点）。
step() 函数非常独特， 它允许在固定的间隔播放动画。 例如， 在 step() 函数图上可以看出， 动画属性比在 0% 处开始，涨到50%， 动画结束时， 属性值达到100%（ 也就是结束状态属性）。 并且 在各个 step() 函数中 每个步骤在过渡动画中不够平滑
step(< integer>[,[ start| end]]?) step() 函数主要包括两个参数。
·第一个参数是一 个数值< integer>， 主要用来指定step()函数间隔的数量， 此值必须是一个大于0的正整数。
·第二个参数是可选的， 是start或end， 如果第二个参数忽略， 则默认为end值。 其中step( 1, start)相当于step- start； step( 1, end)相当于step- end。
伪元素触发
使用 transition 时， 常用鼠标悬浮（: hover） 来触发过渡。
为说明这与触发过渡的实际事件毫无关联， 也为强调状态变化的重要性， 下面提供了 一些触发过渡的其他方法。
- 使用: active “:active”伪类表示用户单击某个元素并按住鼠标按钮时显示的状态。
- 使用: focus“:focus”伪类通常会在元素接收键盘焦点时出现。文本输入框元素上将发生过渡， 且该元素得到焦点时会执行文本输入框元素宽度和背景色过渡。
此处作为一个边点， 当对“: hover”伪类应用过渡时， 最好将“: focus”添加到选择器堆栈。 这样将能够丰富鼠标用户和键盘用户的体验。
- 使用: checked “:checked”伪类在发生以下状况时触发过渡。 文本框选中时，
- 媒体查询触发 触发元素状态变化的另一种方法是使用CSS3媒体查询（ Media Queries）。
- JavaScript 触发 如果可以基于CSS的状态更改触发过渡， 自然可以通过 JavaScript做到这一点。
隐式过渡 “隐式过渡”指的是 当 一个属性改变时引起另一个属性到一个属性的过渡。
。。。。。。
十四，CSS3 动画
虽然transition在一定的时间内可以实现元素的初始状态在指定的时间范围过渡最终状态， 模拟一种过渡动画效果， 但它的功能是非常有限的。 因此， CSS3 新增了 一个动画属性 animation。 与过渡 属性 transition 属性不同的是， CSS3 的 animation 属性可以像Flash制作动画一样， 通过关键帧控制动画的每一步， 实现更为复杂的动画效果。
CSS3中通过animation实现动画和transition实现动画非常类似， 都是通过改变元素的属性值来实现动画效果的。
它们的区别主要在于： 使用 transition属性只能通过指定属性的初始状态和结束状态， 然后在两个状态之间进行平滑过渡的方式来实现动画。
而animation实现动画效果主要由两个部分组成：
1） 通过类似Flash动画中的关键帧来声明一个动画；
2） 在animation属性中调用关键帧声明的动画，从而实现一个更为复杂的动画效果。
CSS3 动画属性animation和CSS3的transition属性一样是一个复合属性，它包含了8个属性：
animation-name、主要用来指定一个关键帧动画的名字， 这个动画名必须对应一个@keyframes规则。 CSS加载时会应用animation-name指定的动画， 从而执行动画。
animation-duration、主要用来设置动画播放所需时间， 一般以秒为单位。
animation-timing- function、 主要用来设置动画的播放方式， 与transition-timing-function类似。
animation-delay、 主要用来指定动画开始时间， 一般以秒为单位。
animation-iteration- count、 主要用来指定动画播放的循环次数。
animation-direction、 主要用来指定动画的播放方向。
animation-play- state，主要用来控制动画的播放状态。
animation-fill- mode，主要用来设置动画的时间外属性。
：关键帧
在CSS3中， 把@keyframes称为关键帧，
@keyframes 的作用
transition制作一个简单的动画效果时， 包括了元素的初始属性和最终属性， 一个开始执行动作时间和一个延迟动作时间以及一个动作变换速率， 其实这些值都是一个中间值， 如果要控制得更细一些， 比如说 要第一个时间段执行什么动作， 第二个时间段执行什么动作（ 换到Flash制作动画中来说，就是第一帧要执行什么动作，第二帧执行什么动作）， 这样用 transition 就很难实现了， 此时也需要一个“ 关键 帧”来控制。 在CSS3中就是通过@keyframes属性来实现这样的效果的。
@keyframes的语法
@keyframes具有其自己的语法规则， 命名是由@keyframes开头， 后面紧跟着是“ 动画的名称” 加上一对花括号“{...}”，括号中就不同时间段样式规则，有点像CSS的样式写法。一个@ keyframes 中的样式规则是由多个百分比构成的， 如 0% ～100%， 可以在这个规则中创建更多个百分比， 分别给每个百分比中需要有动画效果的元素加上不同的属性， 从而让元素达到一种不断变化的效果， 比如说移动，再比如改变元素颜色、位置、大小和形状等。 不过有一点需要注意， 可以使用“ frome”“ to”代表一个动画是从哪开始，到哪结束，也就是说 from就相当于0%，而to相当于 100%。 值得说的是， 0%不能像别的属性取值 一样把百分比符号省略， 在这里必须加上百分符号（%）。如果没有加上，这个@keyframes是无效的，不起任何作用。 因为@keyframes的单位只接受百分 比值。@keyframes可以指定任何顺序排列来决定animation动画变化的关键位置
CSS中为元素应用动画
要在CSS中为元素应用动画， 首先要创建一个已命名的动画，然后将它附加到该元素属性声明块中的一个元素上。 动画本身并不执行任何操作； 为了向元素应用动画，需要将动画与元素关联起来。 这个要创建的动画， 必须使用@keyframes来声明（ 或者对于当前的Webkit实现， 使用@-webkit-keyframes）， 后跟所选择的名称， 该名称主要用于对动画的声明作用， 然后指定关键帧。
：CSS3动画8个子属性详解
- animation-name 调用动画
animation-name属性主要是用来调用动画，其调用的动画是通过@keyframes关键帧定义好的动画。 该属性的使用语法如右所示： animation-name: none | IDENT[, none| DENT]*;
animation-name 是用来定义一个动画的名称， 其主要有两个值。
·IDENT：是由@keyframes创建的动画名称， 换句话说 此处的 IDENT需要和@keyframes中的IDENT 一致， 如果不一致将不能实现任何动画效果。
·none：为默认值， 当值为none 时， 将没有任何动画效果， 其可以用于覆盖任何动画。
- animation-duration 设置动画播放时间
animation-duration主要用来设置CSS3动画播放时间， 其基本语法如右所示： animation- duration: < time>[,< time>]*
animation-duration和transition-duration使用方法类似，是用来指定元素播放动画所持续的时间，也就是完成从0% ～100% 一次动画所需时间， 取值< time> 为数值， 单位为秒， 其默认值为 0， 这意味着动画周期为0， 也就是没有动画效果。 如果值为负值会被视为0。
- animation-timing-function 设置动画播放方式
animation-timing-function属性主要是用来设置动画播放方式， 其基本语法如右所示： animation- timing- function: ease | linear | ease- in | ease- out | ease- in- out
animation-timing-function是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。 他和transition中的transition-timing-function一样， 具有以下几种变换方式： ease、ease- in、ease-in-out、 ease-out、 linear和cubic-bezier。
- animation-delay 设置动画开始播放的时间
animation-delay属性用来定义动画开始播放的时间、 是延迟还是提前等。 该属性的基本语法右所示： animation- delay:< time>[,< time>]* 换句话说， animation- delay 属性用于定义在浏览开始 执行动画之前等待的时间。
- animation-iteration-count 设置动画播放次数
animation-iteration-count 属性主要用来定义动画的播放次数。 其基本语法如右所示： animation-iteration-count: infinite | < number> [, infinite | < number>]* 此属性主要用于定义动画播放 多少次， 其值通常为整数， 但也可以使用带有小数的数字。 其默认值 1， 这意味着动画将从开始到结束只播放一次。 如果取值为infinite， 动画将会无限次地播放。
- animation-direction 设置动画播放方向
animation-direction属性主要用来设置动画播放方向， 其基本语法如右所示： animation- direction: normal | alternate [, normal | alternate]* animation- direction 是用来指定元素动画播放的 方向， 其主要有两个值， 默认值为 normal， 如果设置为normal时， 动画的每次循环都是向前播放； 另一个值是alternate，它的作用是，动画播放为偶数次则向前播放，为奇数次则向反方向播放。 例如一个弹跳动画中， 可以为落下的球提供关键帧， 然后将animation-direction取值为alternate来控制播放动画的每秒中反转它。
- animation-play-state 设置动画的播放状态
animation-play-state属性主要用来控制元素动画的播放状态， 其基本语法如右所示： animation-play-state: running | paused [, running | paused]* 主要有两个值： running 和 paused。 其中 running为默认值， 主要作用类似于音乐播放器， 可以通过paused将正在播放的动画停下来， 也可以通过running将暂停的动画重新播放， 这里的重新播放不一定是从元素动画的开始播放， 也可能是 从暂停的那个位置开始播放。 另外如果暂停了动画的播放， 元素的样式将回到最原始设置状态。
- 设置动画时间外属性 animation-fill-mode
animation-fill-mode属性定义在动画开始之前和结束之后发生的操作，其基本语法如右所示： animation-fill-mode: none | forwards | backwards | both 主要有四个值： none、forwards、 backwards和both。其默认值为none，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处。当其取值为forwards时，动画在结束后继续应用最后关键帧的位置。 当 其取值为 backwards 时，会在向元素应用动画样式时迅速应用动画的初始帧。当其取值为both时，元素动画同时具有forwards和backwards效果。在默认情况之下，动画不会影响它的关键帧之外的 属性， 但使用animation-fill-mode属性， 可以修改动画的默认行为。简单地理解 就是告诉动画在第一个关键帧上等待动画开始， 或者在动画结束时停在最后一个关键帧上而不回到动画第一帧 上， 或者同时具有这两个效果。
。。。。。。
十五，媒体特性与Responsive设计
随着科学技术不断地向前发展，网页的浏览终端越来越多样化，用户可以通过宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问网站。尽管无法保证一个网站在不同屏幕尺寸和不同设备上 看起来一模一样， 但至少要让你的Web页面能适配用户的终端， 让它更好地呈现在用户面前。 使用CSS3中的MediaQuery模块来让一个页面适应不同的终端（ 或屏幕尺寸）， 从而让页面有一个更好 的用户体验。
媒体类型媒体类型（ Media Type） 在CSS2中是一个常见的属性， 也是一个非常有用的属性， 可以通过媒体类型对不同的设备指定不同的样式。
媒体类型引用方法在实际中媒体类型有近十种之多， 实际常用的也就那么几种。 不过媒体类型的引用方法也有多种， 常见的媒体类型引用方法主要有：
link标签、
xml方式、
@import
CSS3新增的@media
- link方法
link方法引入媒体类型其实就是在< link>标签引用样式的时候， 通过link标签中的media属性来指定不同的媒体类型。 这种方式引入媒体类型时常跟着引用的样式文件走， 如下所示：
< link rel="stylesheet" type=" text/css" href="style.css" media="screen" /> < link rel=" stylesheet" type=" text/css" href=" print.css" media=" print" />
- xml方式
xml方式引用媒体类型和link引入媒体类型极其相似， 也是通过media属性来指定。
<? xml- stylesheet rel=" stylesheet" media=" screen" href=" style. css" ?>
- @import方式
@import是用来引用样式文件方法之一， 同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，
一种：是在样式中通过@import调用另一个样式文件；
另一种：是在< head></ head>标签中的< style></ style>中引入， 但这种使用方法在IE 6 和 IE 7 中都不被支持， 如样式文件中调用另一个样式文件时， 就可以指定对应的媒体类型。 @import url( reset. css) screen; @import url( print. css) print; 在<head>中的<style>标签中引入媒体类型方法。 <head> <style type=" text/css"> @import url( style.css) all; </style> </head>
- @media方式
@media是CSS3中新引进的一个特性， 称为媒体查询。 在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似， 也具有两种方式：
1） 在样式文件中引用媒体类型： @media screen { 选择器{/ 你的样式代码写在这里…/} }
2） 使用@media引入媒体类型的方式是在<head> 标签中的<style>中引用。 <head> <style type=" text/css"> @media screen{ 选择器{/ 你的 样式 代码 写在 这里…/} } </ style> </ head>
媒体特性
媒体特性（Media Query）是CSS3对媒体类型（ Media Type） 的增强版， 其实可以将Media Query看成“ Media Type（ 判断条件）+ CSS（ 符合条件的样式规则）”。
Media Query和CSS的属性集合很相似， 主要区别在如下：
·Media Query 只接受单个的逻辑表达式作为其值， 或者没有值。
·CSS属性用于声明如何表现页面的信息； 而Media Query是一个用于判断输出设备是否满足某种条件的表达式。
·Media Query 中的大部分接受 min/ max 前缀， 用来表达其逻辑关系， 表示应用于大于等于或小于等于某个值的情况。
·CSS属性要求必须有属性值， Media Query 可以没有值， 因为其表达式返回的只有真或假两种。
Media Query使用方法
Media Query 能在不同的条件下使用不同的样式， 使页面在不同在终端设备下达到不同的渲染效果。 Media Query 有其自己的使用规则。 具体来说， Media Query 的使用方法如下。
@media 媒体类型 and （媒体特性）{ 你的样式} 使用 Media Query 时必须要使用@media开头， 然后指定媒体类型（ 也可以称为设备类型）， 随后是指定媒体特性（ 也可以称之为设备特性）。
媒体特性的书写方式和样式的书写方式非常相似， 主要分为两个部分，
第一个部分 指的是媒特性，
第二个部分 为媒体特性 所指定的值， 而且这两个部分之间使用冒号分隔。 例如： (max- width: 480px) 将其组合就类似于不同的 CSS集合。 但与CSS属性不同的是， 媒体特性是通过min/ max 来 表示大于、 等于或小于作为逻辑判断， 而不是使用小于（<） 和 大于（>） 这样的符号来判断。
- 最大宽度 max-width “max-width” 是媒体特性中最常用的一个特性， 其意思是指媒体类型小于或等于指定的宽度时， 样式生效，
- 最小宽度 min-width min-width与max-width相反， 即媒体类型大于或等于指定宽度时， 样式生效。
- 多个媒体特性使用 Media Queries 可以使用关键词“ and” 将多个媒体特性结合在一起。 也就是说， 一个Media Query中可以包含0到多个表达式， 表达式又可以包含0到多个关键字， 以及一种 媒体类型。
- 设备屏幕的输出宽度 Device Width 在智能设备上， 例如 iPhone、 iPad 等， 还可以根据屏幕尺寸来设置相应的样式（ 或者调用相应的样式文件）。 对于屏幕同样可以使用 min/ max 对应参数， 如min-device-width 或者 max-device-width。
- not关键词 关键词not用来排除某种制定的媒体类型， 也就是排除符合表达式的设备。 换句话说， not关键词表示对后面的表达式执行取反操作。如下所示：
@media not print and (max- width: 1200px){ 样式 代码} 代码表示的是， 样式代码将被使用在除打印设备和屏幕宽度小于1200px的所有设备中。
- only关键词 only用来指定某种特定的媒体类型， 可以排除不支持媒体查询的浏览器。 其实only很多时候是用来对不支持Media Query 却支持 Media Type 的设备隐藏样式表。 例如， 支持媒体特性 的设备正常调用样式， 此时就当only不存在；不支持媒体特性但支持媒体类型的设备， 这样就不会读样式， 因为其会先读取only而不是screen； 不支持 Media Query 的浏览器， 不论是否支持 only， 样式都不会被采用。
：Responsive(响应式)布局概念
随着用户访问Web页面终端多样化， 比如说 iPad、 iPhone、 平板电脑、 台式机以及笔记本等， 以前的设计目前再无法适应这些多样化的终端设备。 为了满足用户的需求， Ethan Marcotte 在A List Apart 发表了 一篇开创性的文章， 将三种已有的开发技术（ 弹性网格布局、弹性图片、媒体和媒体查询） 整合起来， 并将其命名为RWD（ Responsive Web Design， 响应式设计）。
什么是响应式设计呢？
维基百科是这样描述的： Responsive设计为RWD， 是精心提供各种设备都能浏览网页的一种设计方法， RWD能让网页在不同的设备中展现不同的设计风格。 由此可见， RWD不是流体布局， 也不是 网格布局， 而是一种独特的网页设计方法。
Responsive设计特点
Responsive网页设计 不但要考虑其元素布局的秩序， 还要做到“ 有求必应”， 因此需要满足三个条件。 Responsive设计之父 Ethan Marcotte是这样描述这三个条件的。
·网站必须建立灵活的网格基础；
·引用到网站的图片必须是可伸缩的；
·不同的显示风格， 需要在 Media Query 上设置不同的样式。
缺少任何一个功能， 就不能称为是合格的Responsive网页设计。
Responsive中的术语
在响应式设计中， 有一些其专有的术语， 而且理解这些术语对于帮助理解和学习响应式设计至关重要。
- 流体网格
流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是让网格大小随时根据屏幕尺寸大小做出相 对应的比例缩放。
- 弹性图片
弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放， 用于适应各种网格的尺寸。 而实现方法是比较简单， 一条代码就能确定。img {max- width: 100%;}
- 媒体查询
媒体查询在CSS3中得到了强大的扩展。 使用这个属性可以让设计根据用户终端设备适配对应的样式。 这也是响应式设计中最为关键的。 可以说， Responsive设计离开了 Medial Query 就失去了它 生存的意义。 简单地说，
媒体查询可以根据设备的尺寸， 查询出适配的样式。
Responsive设计最关注的就是： 根据用户的使用设备的当前宽度， Web页面将加载一个备用的样式， 实现特定的页面 风格。
- 屏幕分辨率
屏幕分辨率指的是用户使用的设备浏览Web页面时的分辨率， 比如智能手机浏览器、 移动电脑浏览器、 平板电脑浏览器和桌面浏览器。 Responsive设计利用Media Query属性针对浏览器使用的 分辨率来适配对应的CSS样式。 因此屏幕分辨率在Responsive设计中是一个很重要的东西， 因为只有知道Web页面要在哪种分辨率下显示何种效果， 才能调用对应的样式。
- 主要断点
主要断点， 在Web开发中是一个新词， 但其是 Responsive 设计中很重要的一部分。 简单的描述就是， 设备宽度的临界点。 在 Media Query 中， 媒体特性 min-width 和 max- width 对应的属性值 就是响应式设计中的断点值。 简单点说， 就是使用主要断点和次要断点， 创建媒体查询的条件。 而每个断点会对应调用一个样式文件（ 或者样式代码）， 主要断点加载样式文件将直接影响Web的 效果。 除了主要断点之外， 为了满足更多效果， 还可以在这个基础上添加次要断点。 不过主要断点和次要断点增加之后， 需要维护的样式也相应地增加， 成本也相对应地增加。 因此在实际使用中， 需要根据自身产品需求， 决定断点。 综合下来， 设置断点应把握以下三个要点。
·满足主要的断点；
·有可能的话添加一些别的断点；
·设置高于1024px的桌面断点。
Responsive 布局技巧
布局是一个再简单不过的问题了， 也是每个网页设计中必须包含的部分， 但使用 Responsive 设计第一步要做的事情是让页面布局尽量简单。 实现一个简单的布局有 一些小技巧。
·尽量少用无关紧要的div；
·不要使用内联元素（ inline）；
·尽量少用JS或Flash；
·丢弃没用的绝对定位和浮动样式；
·摒弃任何冗余结构和不使用100%设置。 有舍才有得， 哪些东西 能帮助 Responsive 确定更好的布局呢？
·使用HTML5 Doctype和相关指南；
·重置好样式（ reset. css）；
·一个简单的有语义的核心布局；
·给重要的网页元素使用简单的技巧， 比如 导航 菜单 之类 元素。
使用这些技巧， 无非是为了保持HTML简单干净， 而且在页面布局中的关键部分（ 元素） 不要过分依赖现代技巧来实现， 比如说 CSS3 特效或者JS 脚本。 说了这么多， 怎么样的布局或者说HTML 结构才是简单干净的呢？ 这里介绍一个快速测试的方法。 首先禁掉页面中所有的样式（ 以及与样式相关的信息）， 在浏览器中打开， 如果内容排列有序， 方便阅读， 那么这个结构就不会差到哪里去。
meta标签
当Responsive设计页面在智能设备中进行测试的时候（ 比如说iPhone或Android）， 会惊奇地发现， 所有的媒体查询都不会生效—页面仍展示为普通的样式， 即一个全局缩小后的页面。 这是因为 许多智能手机都使用了一个比实际屏幕尺寸大很多的虚拟可视区域， 主要目的就是让页面在智能手机端阅读时不会因为实际可视区域而变形。 为了让智能手机能根据媒体查询匹配对应样式， 让页面在 智能手机中正常显示， 特意添加了一个特殊的meta标签。 这个标签的主要作用就是让智能手机浏览网页时能进行优化， 并且可以自定义界面可视区域的尺寸和缩放级别。 meta标签使用方法如下：
< meta name=" viewport" content="" /> 在content属性中主要包括 (在资料的图片中有)
在实际项目中， 为了让 Responsive 设计在智能设备中能正常显示， 也就是浏览Web页面时能适应屏幕的大小并显示在屏幕上， 这可以通过这个可视区域的meta标签进行重置， 告诉它使用设备的 宽度为视图的宽度， 也就是说， 禁止其默认的自适应页面的效果， 具体设置如下：
< meta name=" viewport" content=" width= device- width, initial- scale= 1. 0" />
另外， 由于Responsive设计 只有结合CSS3的Media Queries属性， 才能尽显 Responsive 设计风格， 故浏览器必须支持 CSS3 Media Queries。
。。。。。。
十六，嵌入Web字体
一直以来Web设计师在设计网页时都想为Web页面添加一些优雅的字体，但浏览器仅限于使用用户在其系统上安装的字体呈现文本，这样一来让大部分网站受限于字体数量的不足。多年来一直都是 使用图片替换文本的方式来解决页面上使用优雅字体，但这种对于频繁更换文本的网站来说是一件不切实际的事，以致于我们坚持使用这些少量的Web字体。随着技术的不断发展，出现在Web页面中 使用Flash和JavaScript技术来弥补这一不足。虽然这些方法已经是不错的应急措施， 允许包含自己的字体， 但是它们拥有很严重的缺陷。有时候它们很难实现， 因为它们要求用户在本地启用 JavaScript或者 Flash插件。值得庆幸的一件事情是， 可以使用@font-face模块来解决Web页面中使用优雅字体的方式。
@font-face模块介绍
@font-face主要是把自己定义的Web字体嵌入到Web页面中，这些自定义的字体被放置在服务器上，浏览器会根据指定的命令将对应的字体下载到本地缓存， 使用它来修饰文本。 也常常把这种方式 称为Web字体嵌入（ 实际上并没有什么字体被嵌入）。
@font-face语法
有了@font-face模块， 只要将字体传入到服务器端，不管用户端是否安装了对应的字体， 设计的网页都能够正确显示，用较为专业的话来讲，@font-face能够加载服务器端的字体， 让客户端浏览器 显示客户端没有安装的字体。 如果没有@font-face， 客户端浏览器只能在客户系统中寻找指定的字体， 这样一来给设计师带来极大的限制。@font-face能加载服务器端的字体，让客户端浏览器寻找 到对应的字体，使用中具有一套成熟的语法规则。
@font- face { font- family:< YourWebFontName>;
src: < source>[< format>][,< source>[< format>]]*;
[font- weight:< weight>];
[font- style:< style>]; }
取值 说明 如下：
·YourWebFontName：指定的是自定义的字体名称，最好是使用下载的默认字体文件名，它将被引用到Web元素中的font-family。如“ font- family:' YourWebFont- Name'”。
·Soure： 指定的是自定义的字体存放路径， 可以是相对路径也可以是绝对路径。
·Format： 指定的是自定义的字体格式， 主要用来帮助浏览器识别，其值主要有以下几种类型，如 truetype、 opentype、 truetype- aat、 embedded- opentype、 avg 等。
·font- weight 和 font- style： 前者用来指定字体是否为粗体，后者主要定义字体样式，如 斜体。除了这两个属性之外， 类似的属性还有 font- variant、 font- size、 font- stretch 等。
使用字体图标的优势
使用字体图标和位图， 它自身更具有哪些优势呢？
·适用性： 一个图标字体比一系列的图像（ 特别是在Retina屏中使用双倍大小的图像） 要小。 一旦图标字体加载了， 图标就会马上渲染出来， 不需要下载任何图像。
·可扩展性： 图标字体可以用过font-size属性设置大小。 能够随时输出不同大小的图标，然而，使用位图必须为每个不同大小的图像输出一个不同文件。
·灵活性： 文字效果可以很容易地应用到图标上，包括颜色、阴影和翻转等效果。它们还可以在任何背景下显示
·兼容性： 网页字体支持所有现代浏览器，包括低版本IE。
实现@font-face
@font-face属性和CSS3中的@media，@import、@keyframes等属性一样， 都是用关键字符“@” 封装多项规则。@font- face的"@"规则主要用于指定自定义字体， 然后在其他样式块中调用@ font-face中自定义的字体。
使用@font-face自定义字体
正常使用@font-face自定义字体， 必须满足以下几个关键点：
·将各种格式字体上传到服务器上， 以支持各种浏览器； ·在@font-face中显式指定自定义字体名称以及引用自定义字体的字体来源。
br/>·在@font-face中显式指定自定义字体名称以及引用自定义字体的字体来源。
@font-face规则中的font-family与其他样式中的font-fmaily略有不同。 在@font-face中的font-family只是声明了字体的名称（ 也就是自定义了字体的名称），而没有向元素中分配这种字体。而样式 中的font-family却是显式地为元素指定字体名称。在@font-face规则中 通过font-family来自定义字体名称，而这个自体名称可以是任意的名称或形式，它仅用于元素样式中的font-family属性引用。 当然，使用的字体名称最好与引用的字体文件名相同，用于保持CSS的可读性，可维护性。上面通过@font-face声明了字体名“ NeuesBauenDemo”，但并不会有任何实际效果，如果想让Web中的 文本字体是 NeuesBauenDemo， 需要在样式代码块中的对应元素中引用@font-face定义好的字体，@font-face和@keyframes一样，一个@font-face规则仅自定义一个字体， 如果需要自定义多个 字体就需要对应启用多个@font-face规则，
声明字体来源
@font-face规则中有一个非常重要的参数，就是src，这个属性类似于img标签中的src属性， 其值主要是用于链接到实际的字体文件。此外，可以声明多个来源，如果客户端的浏览器未能找到第一个 来源，它会依次尝试寻找后面字体来源，直到找到一个可用的字体来源为止，
每种字体都有其具体作用和格式，
- TureType(. ttf) 格式 TureType(. ttf) 格式字体是 Windows 和 iOS 的最常见的字体， 是 一种RAW格式。
- OpenType(. otf) 格式 OpenType(. otf) 格式字体被认为是一种原始的字体格式， 其内置在TureType的基础上， 所以也提供更多的功能，
- Web Open Font Format(. woff) 格式 Web Open Font Format(. woff) 格式字体是Web字体中最佳格式， 它是一个开放的 TrueType/ OpenType 的压缩版本， 同时也支持元数据包的分离
- Embedded Open Type(. eot) 格式 Embedded Open Type(. eot) 格式字体是 IE专用字体， 可以从 TrueType 中创建此格式字体
- SVG(. svg) 格式SVG(. svg) 格式字体是基于SVG字体渲染的一种格式，
这就意味着在@font-face中至少需要“. woff”和“. eot”两种格式字体， 甚至还需要“. svg” 等字体以得到更多种浏览版本的支持。 为了使@font-face 得到更多的浏览器支持， Paul Irish 写了 一个独特的@font-face语法叫做“ Bulletproof@ font- face”(防弹字体)
创建各种字体
手上仅有一种格式的字体，而为了兼容浏览器各版本，需要从一种格式字体转换成所需的各种字体格式。那么如何将字体转换为所有格式的字体呢？
这将成为@font-face定义字体之前首要解决的问题之一。目前为止，在互联网上有很多在线转换字体的生成工具。
·Fontsquirrel 字体转换生成器
·Codeandmore 字体转换生成器
创建一个图标字体
Symbol(符号)字体可以使用一个专用的字体创建应用程序， 比如说 Glyphs(雕文)，但是一个专业的排版工具之外的需求或要求构建一个简单的图标字体，比如说 间 中 攻 粗细 这样的物理关系并不是非常重要。 目前为止，最简单的方法是使用Keyamoon制作的一个Web应用程序 IcoMoon，可以解决字符转换成Web字体的所有麻烦。IcoMoon附带了大量的图标， 可以通过图标库添加更多的图标，其中 大部分都可以免费使用（使用时请先查看它们的许可证）。如果你正在寻找如“ 文件下载”和“ 购物车” 一样的图标，那么你会发现， 使用标准的图标比你自己创建要方便得多。
准备插图
首先，需要能创建矢量图标的程序，并且能够找到输出SVG格式，比如Illustrator或者iNkscape。 设计的时候，可以使用任何你喜欢的颜色，但是图标必须是一个纯色。确保每个图标的尺寸大小是相同 的。若某一个图标相较其他的更高或者更宽，会导致很难创建一个一致的字体。在这里，我们不得不减少飞艇图标的宽度，以使它能匹配其他图标
- 清理图标
仔细检查每一个图标，以确保它们没有缺陷—图标在小尺寸的时候可能看着是完美的，当放大后会发现一些小的缺陷。在 Illustrator 中，使用Pathfinder工具统一层叠元素， 减去前面元素， 比如图标 中的星星图标。 原则是确保图标是可读的小尺寸，
- 导成SVG文件
现在，选择一个图标并将它复制粘贴到一个新的文档场景中（ 如200px*200px）。会发现它有一个基线尺寸的设置。使用彩色的图标，比如说在白色的背景中使用黑色的图标。现在，选择菜单“ 文件”中“ 保存”， 将选择将文件保存成SVG文件格式。使用默认的SVG设置。一旦这样做，所有的图标可以创建为一个Web字体，
- 导入到 IcoMoon
打开 IcoMoon Web App 。导入一个图标，点击“ Import icons”按钮，然后选择想要添加的SVG文件— 可以一次添加多个文件。 这些图标将会出现在“ Your Custom Icons” 区域中。 如果它们 是高亮的×××显示，表示这些图标是将要创建的图标字体。
- 从IcoMoon中导出字体
想调整图标的位置、大小或旋转，可以点击“ Edit” 按钮， 使用“ Save Copy” 保存图片（ 如镜像图标）。 然后添加一个有意义的图标标记， 将用来生成类 名。 都准备好了， 点击屏幕底部的“ Font” 按钮开始生成字体。 这样就可以指定图标映射到字符上，例如， 设置一套六个旋转的球， 可以给这六个球分别指定字符 q、 w、 e、 r、 t 和 y。 也可以根据自己的爱好选择一个字体的名字。
5.下载字体文件
单击“ Download”下载字体包到电脑上。它有一个文件夹包含了字体本身（ woff、 eot、 ttf 格式），以及一个HTML示例页面和相应的CSS。甚至还有一个 JavaScript 文件和 一个解决方法，如果 需要支持IE或 IE7， 将font文件 复制到网 站， 为项目添加字体。 需要从 style. css 文件中复制 CSS 样式， 并粘贴到自己网站的CSS文件中， 但是可以要将它重命名为 fonts. css， 并保持它作为一个 单独 的 CSS 文件。 需要 的 时候 再把 这个 CSS 文件 引入 到 HTML 中。 < link rel=" stylesheet" href=" fonts. css" /> 在 CSS 文件 中 可以 找到@ font- face 需要 将 URL 路径 修改 成 本地 的 相对路径， 或者可以简单地把字体文件和样式放在同一个文件夹，
调用字体样式
文件 index. html，有两种方法可以调用，
一种是通过字符（unicod 或 名称），
另一种是通过类名。首先，使用HTML5的自定义属性data- icon。
第二种方法
使用 一个 span元素。 < span aria- hidden=" true"></ span> 如果想让图标具有链接功能， 可以将其放在一个链接中。< a href=" http:// www. w3cplus. com" data- icon="&# x73;"></ a> 这里，添加一个 iconlink类名， 并设置一个悬浮效果。
。。。。。。
十七，CSS3选择器
