如同人类的的进化一样， CSS3 是 CSS2 的“进化”版本，在 CSS2 基础上， 增强 或 新增 了许多特性，  弥补了 CSS2 的众多不足之处，使得 Web 开发变得更为高效和便捷。 Html4-html5  css2- css3

CSS3的现状

1 、浏览器支持程度差，需要添加 私有前缀 2 、移动端支持优于 PC 端 3 、不断改进中 4 、应用相对广泛

如何对待

坚持渐进增强原则   渐进增强：  让低版本浏览器  可以使用最基本的功能，高版本的浏览器具有更好的用户体验 2 、考虑用户群体 3 、遵照产品的方案 4 、 听 Boss 的

 准备工作

统一环境

由于 CSS3 兼容性问题的普遍存在，为了避免因兼容性带来的干扰，我们约定统一的环境，以保证学习的效 率，在最后会单独说明兼容性的问题。 1 、 Chrome 浏览器  version 46+ 2 、 Firefox 浏览器  firefox 42+ 3 、 PhotoShop CS6 （建议）

如何使用手册

学会使用工具，可以让我们事半功倍。 元字符 含义 示例 [] 全部可选项 padding: [<length> | <percentage>]{1, 4} || 并列 border: <line-width> || <line-style> || <color> | 多选一 position: static | relative | absolute | fixed ? 0 个或 1 个 box-shadow: none | <shadow>[, <shadow>]* <shadow>: inset? && <length>{2, 4} && <color>? * 0 个或多个 {} 范围 学会查看手册，培养自主学习能力。

 基础知识

属性选择器

CSS3 新增了许多 灵活 查找元素的方法，极大的提高了查找元素的效率和 精准度 。 CSS3 选择器与 jQuery 中所提供的 绝大部分 选择器兼容。 其特点是通过 属性 来选择元素，具体有以下 5 种形式： 选择器 示例 含义 E[attr]   存在 attr 属性即可 E[attr=val]   属性值 完全等于 val E[attr*=val]   属性值里包含 val 字符并且在“ 任意 ”位置 E[attr^=val]   属性值里包含 val 字符并且在“ 开始 ”位置 E[attr$=val]   属性值里包含 val 字符并且在“ 结束 ”位置

伪类

除了以前学过的 :link 、 :active 、 :visited 、 :hover ， CSS3 又新增了其它的伪类选择器。 1 、结构 ( 位置 ) 伪类 以某元素（ E ）相对于其父元素或兄弟元素的位置来获取无素； 选择器 示例 含义 E:first-child   其父元素的第 1 个子元素 E:last-child   其父元素的最后 1 个子元素 E:nth-child(n)   其父元素的第 n 个子元素 E:nth-last-child(n)   其父元素的第 n 个子元素（倒着数） n 遵循线性变化，其取值 0 、 1 、 2 、 3 、 4 、 ... n 可是多种形式： nth-child(2n+0) 、 nth-child(2n+1) 、 nth-child(-1n+3) 等； 注：指 E 元素的父元素，并对应位置的子元素必须是 E 2 、空伪类 E:empty  选中没有任何子节点的 E 元素；（使用不是非常广泛） 3 、目标伪类 E:target  结合锚点进行使用，处于 当前锚点 的元素会被选中； 4 、排除伪类 E:not(selector)  除 selector （任意选择器）外的元素会被选中；

伪元素

1 、 E::first-letter 文本的第一个单词或 字（如中文、日文、韩文等） 2 、 E::first-line  文本第一行； 3 、 E::selection  可改变选中文本的样式； 4 、 E::before 和 E::after 在 E 元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合 content 属性使用。 E:after 、 E:before  在 旧版本 里是伪元素， CSS3 的规范里“ : ”用来表示伪类，“ :: ”用来表示伪元素，但是在高版本浏览器下 E:after 、 E:before 会被自动识别为 E::after 、 E::before ，这样做的目的是用来做 兼容处理 。 E:after 、 E:before 后面的练习中会反复用到，目前只需要有个大致了解 ":"  与  "::"  区别在于区分伪类和伪元素

颜色

新增了 RGB A 、 HSL A 模式，其中的 A  表示透明度通道，即可以设置颜色值的透明度，相较 opacity ，它们不具有继承性，即不会影响子元素的透明度。 如下图所示为颜色表示方法：             RGBA R ed 、 G reen 、 B lue 、 A lpha 即 RGBA H ue 、 S aturation 、 L ightness 、 A lpha 即 HSLA 不同的颜色表示方法其取值也不相同，具体如下： R 、 G 、 B  取值范围 0~255 HSLA H  色调  取值范围 0~360 ， 0/360 表示红色、 120 表示绿色、 240 表示蓝色 S  饱和度  取值范围 0%~100% L  亮度  取值范围 0%~100% A  透明度  取值范围 0~1 RGBA 、 HSLA 可应用于所有使用颜色的地方。 见代码示 关于 CSS 透明度： 1 、 opacity 只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度； 2  、 transparent  不可调节透明度，始终完全透明

文本

text-shadow ，可分别设置偏移量、模糊度、颜色（可设透明度）。 如： text-shadow: 2px 2px 2px #CCC; 1 、水平偏移量  正值向右  负值向左； 2 、垂直偏移量  正值向下  负值向上； 3 、模糊度是不能为负值；

盒模型

CSS3 中可以通过 box-sizing  来指定盒模型，即可指定为 content-box 、 border-box ，这样我们 计算盒子大小的 方式就发生了改变 。 可以分成两种情况： 1 、 box-sizing: border-box   盒子大小为  width 2 、 box-sizing: content-box   盒子大小为  width + padding + border 注：上面的标注的 width 指的是 CSS 属性里设置的 width: length ， content 的值是会自动调整的。

边框

其中 边框圆角 、 边框阴影 属性， 应用十分广泛 ，兼容性也相对较好，具有符合渐进增强原则的特征，我们 需要 重点掌握 。

边框圆角

border-radius 圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念， 正圆是椭圆的一种特殊情况 。如下图 为了方便表述，我们将四个角标记成 1 、 2 、 3 、 4 ，如 2 代表右上角， CSS 里提供了 border-radius 来设置这些角 横纵轴半径值。 见代码示例 01  边框 - 圆角 border-radius.html 分别设置横纵轴半径，以“ / ”进行分隔，遵循“ 1 ， 2 ， 3 ， 4 ”规则，“ / ”前面的 1~4 个用来设置横轴半径 （分别对应横轴 1 、 2 、 3 、 4 位置  ），“ / ”后面 1~4 个参数用来设置纵轴半径（分别对应纵轴 1 、 2 、 3 、 4 位置  ）。 支持简写模式，具体如下： 1 、 border-radius: 10px;  表示四个角的横纵轴半径都为 10px ； 2 、 border-radius: 10px 5px;  表示 1 和 3 角横纵轴半径都为 10px ， 2 和 4 角横纵轴半径为 5px ； 3 、 border-radius: 10px 5px 8px;  表示 1 角模纵轴半径都为 10px ， 2 和 4 角横纵轴半径都为 8px ， 3 角的横纵轴半径都为 8px ； 4 、 border-radius: 10px 8px 6px 4px;  表示 1 角横纵轴半径都为 10px ，表示 2 角横纵轴半径都为 8px ，表示 3 角横 纵轴半径都为 6px ，表示 4 角横纵轴半径都为 6px ； 见代码示例 02  边框 - 圆角 - 详解 border-radius.html

边框阴影

box-shadow 与文字阴影类似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）。 如 box-shadow: 5px 5px 5px #CCC 1 、水平偏移量  正值向右  负值向左； 2 、垂直偏移量  正值向下  负值向上； 3 、模糊度是不能为负值； 4 、 inset 可以设置内阴影； 注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感， 符合渐进增强，实际开发中可以大胆使用。

背景

背景在 CSS3 中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。 background-size 通过 background-size 设置背景图片的尺寸，就像我们设置 img 的尺寸一样，在移动 Web 开发中做屏幕适配应 用非常广泛。 其参数设置如下： a)  可以设置长度单位 (px) 或百分比（设置百分比时，参照盒子的宽高） b)  设置为 cover 时，会自动调整缩放比例，保证图片始终 填充满 背景区域，如有 溢出部分 则会被隐藏。 c)  设置为 contain 会自动调整缩放比例，保证图片始终 完整显示 在背景区域。 2 、 background-origin 通过 background-origin 可以设置背景图片定位 (background-position) 的参照原点。 其参数设置如下： border-box 以边框做为参考原点； padding-box 以内边距做为参考原点； content-box 以内容区做为参考点； 3 、 background-clip 通过 background-clip ，可以设置对背景区域进行裁切，即改变背景区域的大小。 其参数设置如下： border-box 裁切边框以内为背景区域； padding-box 裁切内边距以内为背景区域； content-box 裁切内容区做为背景区域； 4 、多背景 以逗号分隔可以设置多背景，可用于自适应布局

渐变

渐变是 CSS3 当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使 用数量，并且具有很强的适应性和可扩展性。

线性渐变(渐进增强原则）

linear-gradient 线性渐变指沿着某条直线朝一个方向产生渐变效果，如下图是从黄色渐变到绿色。 1 、必要的元素： 借助 Photoshop 总结得出线性渐变的必要元素 a 、方向 b 、起始色 c 、终止色 d 、渐变距离 2 、关于方向 设置渐变方向，可以用关键字如 to top 、 to right ，也可以用角度（正负值均可）如 45deg 、 -90deg 等，当以角 度做为参数时，可参照下图来使用， 0deg 从下往上， 90deg 从左向右，进而可以推算出 180deg 从上向下。 注：我们可以设置渐变的起始点，这个起始点的值可以是百分比形式，这个百分比在没有设置 background-size 时，是相对于盒子大小的，当设置了 background-size 时则是相对于 background-size 的。

径向渐变

radial-gradient 径向渐变指从 一个中心点 开始沿着 四周 产生渐变效果 1 、必要的元素： a)  辐射范围即圆半径 b)  中心点  即圆的中心 c)  渐变起始色 d)  渐变终止色 e)  渐变范围 2 、关于中心点 中心位置参照的是盒子的左上角，例如 background-image: radial-gradient(120px at 0 0 yellow green) 其圆心点为 左上角， background-image: radial-gradient(120px at 0 100% yellow green) 其圆心为左下角。 3 、关于辐射范围 其半径可以不等，即可以是椭圆，如 background-image: radial-gradient(120px 100px at 0 0 yellow green) 会是一个 椭圆形（横轴 120px 、纵轴 100px ）的渐变。 写在最后 关于渐变不同浏览器有不同的版本，即语法格式不一样，我们以最新语法为准，可自行查找资料 了解即可。 http://www.w3cplus.com/css3/new-css3-linear-gradient.html

过渡

过渡是 CSS3 中具有颠覆性的特征之一，可以实现元素不同状态间的 平滑 过渡（补间动画），经常用来制作 动画效果。 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片 见代码示例 baidu.html 补间动画：自动完成从起始状态到终止状态的的过渡。 见代码示例 01  体验过渡 .html 关于补间动画更多学习可查看 http://mux.alimama.com/posts/1009 在 CSS3 里使用 transition 可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在 两种状态 ( 我们用 A 和 B 代指），就可以实现平滑的过渡，为了方便演示采用 hover 切换两种状态，但是并不 仅仅局限于 hover 状态来实现过渡。 可以通过 all 设置所有属性的过渡效果，也可以分别设置某一属性的过渡效果，可以将过渡属性 transition 设置 在 A 或 B 状态，但是会有一些细节的差异， transition 属性拆解如下表： 属性 示例 含义 transition-property   设置过渡属性 transition-duration   设置过渡时间 transition-timing-function   设置过渡速度 transition-delay   设置过渡延时

单词

empty 空的；无意义的；无知的； 英 ['em(p)tɪ] letter 信；字母，文字； 英 ['letə] transparent 透明的；显然的；坦率的；易懂的 美 [træns'pærənt] shodow 阴影；影子；幽灵；庇护；隐蔽处 美 ['ʃædo] origin 起源；原点；出身；开端 美 ['ɔrɪdʒɪn] clip 剪；剪掉；缩短 美 [klɪp] gradient 梯度；坡度；倾斜度 美 ['ɡredɪənt] radial 半径的；放射状的；光线的；光线状的 美 ['redɪəl] ��    2  ҳ

---

边框

其中 边框圆角 、 边框阴影 属性， 应用十分广泛 ，兼容性也相对较好，具有符合渐进增强原则的特征，我们 需要 重点掌握 。

边框圆角

 border-radius    每个角可以设置两个值 ， x 值， y 值 圆角处理时， 脑中要 形成圆、圆心、横轴、纵轴的概念， 正圆是椭圆的一种特殊情况 。如下图 可分别设置长、短半径，以“ / ”进行分隔，遵循“ 1 ， 2 ， 3 ， 4 ”规则，“ / ”前面的 1~4 个用来设置横轴半 径（分别对应横轴 1 、 2 、 3 、 4 位置 ），“ / ”后面 1~4 个参数用来设置纵轴半径（分别对应纵轴 1 、 2 、 3 、 4 位置 ）

边框阴影

box-shadow  与 text-shadow 用法差不多 1 、水平偏移量 正值向右 负值向左； 2 、垂直偏移量 正值向下 负值向上； box-shadow: 5px 5px 27px red, -5px -5px 27px green; 3 、模糊度是不能为负值； 4 、 inset 可以设置内阴影； 设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。 可以设置多重边框阴影，实现更好的效果，增强立体感 。

1.1.4案例  用css 实现

渐变

渐变是 CSS3 当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使 用数量，并且具有很强的适应性和可扩展性。 可分为线性渐变、径向渐变

线性渐变 （gradient 变化）

linear-gradient 线性渐变指沿着某条直线朝一个方向产生渐变效果。 上图是从黄色渐变到绿色 Background:linear-gradient( To right 表示方向 (left,top,right,left , 也可以使用度数 )          Yellow,  渐变起始颜色 Green   渐变终止颜色 )                1 、必要的元素： a 、方向 b 、起始颜色 c 、终止色； 2 、关于方向如下图

径向渐变 (radial 径向)

radial-gradient 径向渐变指从 一个中心点 开始沿着 四周 产生渐变效果   background : radial-gradient (            150 px  at  center ,            yellow ,            green       );  围绕中心点做渐变，半径是 150px ，从黄颜色到绿颜色做渐变 . 1 、必要的元素： a 、辐射范围即圆半径   ( 半径越大，渐变效果越大 ) b 、中心点 即圆的中心   ( 中心点的位置是以盒子自身 )     background : radial-gradient (             150 px  at left center ,            yellow ,            green         ); 以左上角为圆的中心点     background : radial-gradient (             150 px  at 0px  0px ,              yellow ,              green         ); c 、渐变起始色 d 、渐变终止色 2 、关于中心点：中心位置参照的是 盒子的左上角 3 、关于辐射范围：其半径可以不等，即可以是椭圆 div {          width : 300 px ;          height : 300 px ;          margin : 100 px auto ;          background : radial-gradient (              250 px  at 0 px 0 px ,              yellow ,              green          );          border-radius : 150 px ;     }

背景

背景在 CSS3 中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。 background-size:width,height 可以设置背景图片的宽度以及高度 background-size设置背景图片的尺寸      background-size:600px,auto;         自动是适应盒子的宽度          background-size: 100% auto;  当宽度发送改变时，高度会有内容溢出。      常规用法，通过百分百，和像素来调整背景的尺寸.      background-size : auto 100 %;   cover 会自动调整缩放比例，保证图片始终 填充满 背景区域，如有 溢出部分 则会被隐藏。 整个背景图片完整显示在背景区域 . contain 会自动调整缩放比例，保证图片始终 完整显示 在背景区域。 也可以使用长度单位或百分比 案例 : 全屏背景自动适应 . background-origin(原点，起点)设置背景定位的原点 所谓的背景原点就是调整背景位置的一个参照点 . 调整背景图片定位的参照原点 . border-box 以边框做为参考原点； padding-box 以内边距做为参考原点； content-box 以内容区做为参考点； 3 、 background-clip 设置背景区域 clip( 裁切 )  border-box 裁切边框以内为背景区域； padding-box 裁切内边距以内为背景区域； content-box 裁切内容区做为背景区域； 4 、以逗号分隔可以设置多背景，可用于自适应局 背景图片尺寸在实际开发中应用十分广泛 。

过渡(transition)

Transition:param1  param2 param1    要过渡的属性 param2    过渡的时间 . 过渡是 CSS3 中具有颠覆性的特征之一，可以实现元素不同状态间的 平滑过渡 （补间动画），经常用来制作 动画效果。 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态 帧动画：扑克牌切换 . 通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片 关于补间动画更多学习可查看 http://mux.alimama.com/posts/1009 特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。 transition-property 设置过渡属性 transition-duration 设置过渡时间 用来控制速度 linear( 匀速 ) ease-in ( 加速 ) transition-timing-function 设置过渡速度 transition-delay 设置过渡延时   超过时间后执行动画 以上四属性重在理解

 2D转换 transform

转换是 CSS3 中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配 合即将学习的过渡和动画知识，可以取代大量之前只能靠 Flash 才可以实现的效果。在 css3 当中，通过 transform( 变形 ) 来实现 2d 或者 3d 转换 , 其中 2d 有，缩放，移动，旋转，扭曲。  缩放 scale (x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值； 移动 translate(x, y) 可以改变元素的位置，x、y可为负值； x 在水平方向移动。 y 在垂直方向移动。 旋转 rotate(30deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针； skew(30deg,30deg) 倾斜       x 沿着水平方向倾斜    y 沿着水平方向倾斜 案例 1 ，火箭移动 案例 2 盾牌，将位置还原 案例 3 旋转 原点

单词：

transition 过渡；转变； [træn'zɪʃən] property 性质，性能；财产；所有权 ['prɑpɚti] duration 持续，持续的时间，期间 [du'reʃən] transform 改变，使…变形；转换 [træns'fɔrm] scale 规模；比例； [skel] rotate 旋转；循环 ['rotet] translate 转变为；调动 [træns'let] skew . 斜交；歪斜 [skjuː] perspective 观点；远景；透视图 [pɚ'spɛktɪv] preserve 保存；保护；维持； [prɪ'zɝv]] animation 活泼，生气；激励；卡通片绘制 [,ænɪ'meʃən] iteration 迭代；反复；重复 [,ɪtə'reʃən] inifinite 无限的，无穷的；无数的；极大的 ['ɪnfɪnət] alternate 使交替；使轮流 ['ɔltɚnət]       1、3d变换     rotateX() 沿着x轴旋转     rotateY() 沿着y轴旋转     rotateZ() 沿着z轴旋转     translateX() 沿x轴位移     translateY() 沿Y轴位移     translateZ() 沿Z轴位移  translateZ 需要配合透视使用     旋转方向：         对着正方向去看 都是顺时针旋转     backface-visibility:hidden 背面不可见     伪元素 获取自定义属性的值         content:attr(data-text);         // 自定义属性的作用 存储数据         <span data-text="传">传</span >     透视          如果希望看到  3d效果 需要添加透视 近大远小          透视 设置是 盒子 和 用户眼睛的距离，加给变换元素的父盒子          透视的值越大效果越不明显  perspective:1000px;          透视产生的3d效果,只是视觉上的呈现，并不是真正的3d     真正的3d的盒子         让子盒子保持真正的3d效果         transform-style:perserve-3d;         注意点：加给 父盒子 动画：       css3中也可以来定义动画                 和 js使用函数类似     先定义 在调用                 function say(){}                 定义动画：                 @keyframes  动画名称{                     from{                         起始状态                     }                     to{                         结束状态                     }                 }                 @keyframes 动画名称{                     0%{                     }                     30%{                     }                     100%{                     }                 }                 调用动画       animation: 动画名称 持续时间 ；                   调用动画: 动画名称 持续时间 执行次数  是否反向 延迟执行 运动曲线..                   动画名称： animation-name: move                   单次动画执行时间：animation-duration: 2s;                   重复次数  animation-iteration-count: 1;   infinite 无数次                   动画方向：animation-direction    alternate：交替 reverse 反向                   动画延迟：animation-delay: 1s;                   动画结束后的所保持的状态：                       backwards:保持动画开始前的状态                       forwards:保持动画结束后的状态                   运动曲线：animation-timing-function                     linear 运算  ease-in-out :先加速后减速  steps                     steps(ｎ) 让动画分步完成                     animation-timing-function: steps(15);             动画的播放状态 ：paused 暂停 running 运行                     animation-play-state: paused;