div>p: 子代
div+p： div后面相邻的第一个p
div~p: div后面所有的兄弟p
1、属性选择器：
id选择器 # 通过id 来选择
类名选择器 . 通过类名来选择
属性选择器 [] 通过标签属性来选择器
语法：
标志性符号：[]
^: 开头 $:结尾 *：包含
E[title] : 选中页面的E元素，并且E需要带有title属性
E[title="abc"] :选中页面的E元素，并且E需要带有title属性,属性值为abc
E[title^="abc"] :选中页面的E元素，并且E需要带有title属性,属性值以abc开头
E[title$="abc"] :选中页面的E元素，并且E需要带有title属性,属性值以abc结尾
E[title*="abc"] :选中页面的E元素，并且E需要带有title属性,属性值包含abc
结构伪类选择器：
E：first-child 选中父元素中的第一个子元素
E：last-child 选中父元素中的最后一个子元素
E：nth-child(1) 选中父元素中的第5个子元素
n: 0,1,2,3,4。。。
偶数： 2n even
奇数：2n-1 odd
前5个： -n+5
E：nth-last-child(3): 从后向前选择， 选中倒数第3个
div:nth-child(9)
注意：所选到的元素的类型 必须是指定的类型E,否则选择无效；
E：empty 表示元素为空的状态
E:target: 表示元素被激活的状态 要配合锚点使用
伪元素：
通过css模拟出html效果
E::before
E::after 必须有content 属性
伪元素选择器：
E::first-letter 选中第一个字母
E::first-line选中第一行
E::selection: 表示选择的区域 通过设置 color background
CSS3中新增了两种颜色模式：
RGBA: red green blue (0-255) alpha: 透明度 （0-1）
HSLA:
H:色调 0-360
S:饱和度 0%-100%
L:亮度 0%-100%
A：alpha 透明度 0-1
盒子模型：
三个盒子： content-box padding-box border-box
box-sizing: border-box(内减模式)border-box(内减模式) /content-box（外加模式）(默认值)
box-sizing: border-box 盒模型
私有化前缀：
浏览器私有化前缀：
-webkit-: 谷歌 苹果
-moz-:火狐
-ms-：ie
-o-：欧朋
CSS3简介
如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。
CSS3的现状
1、浏览器支持程度差，需要添加私有前缀
2、移动端支持优于PC端
3、不断改进中
4、应用相对广泛
-webkit-border-radius radius 半径
如何对待
1、坚持渐进增强原则
2、考虑用户群体
3、遵照产品的方案
4、听Boss的
准备工作
统一环境
由于CSS3兼容性问题的普遍存在，为了避免因兼容性带来的干扰，我们约定统一的环境，以保证学习的效率，在最后会单独说明兼容性的问题。
1、Chrome浏览器 version 46+
2、Firefox浏览器 firefox 42+
如何使用手册
学会使用工具，可以让我们事半功倍。
[] 表示全部可选项 padding
|| 表示或者
| 表示多选一
？ 表示0个或者1个
表示0个或者多个
{} 表示范围
学会查看手册，培养自主学习能力。
基础知识
选择器
CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
属性选择器
其特点是通过属性来选择元素，具体有以下5种形式：
E[attr] 表示存在attr属性即可；
div[class]
2、E[attr=val] 表示属性值完全等于val；
div[class=mydemo]
3、E[attr=val] 表示的属性值里包含val字符并且在“任意”位置；
div[class=mydemo]
4、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；
div[class^=mydemo]
5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；
div[class$=demos]
案例 配合jQuery 的过滤选择器
伪类选择器
除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。
1、以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。
重点理解通过E来确定元素的父元素。
E:first-child第一个子元素
E:last-child最后一个子元素
E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素；
div>ul>li:nth-child(3){ color: deeppink;
}
第三个元素
E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒着计算；
div>ul>li:last-child(2){ color: deeppink;
}
n遵循线性变化，其取值0、1、2、3、4、... 但是当n<=0时，选取无效。
选中所有的奇数的li li:nth-child(2n-1){ color: red; } 选中所有的7 的倍数的li
li:nth-child(7n){ color: red; } 选中前面五个 li:nth-child(-1n+5){ color: red; } 选中后面五个 li:nth-last-child(-1n+5){
color: red; } 所有的偶数 li:nth-child(even){ color:red } 所有的奇数 li:nth-child(odd){ color:blue; }
n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等；
E:empty 选中没有任何子节点的E元素；（使用不是非常广泛）
没有任何的子元素，包括空格.
案例：日历图.
2、目标伪类
E:target 结合锚点进行使用，处于当前锚点的元素会被选中；
<li><a href="#title1">CSS (层叠样式表)</a></li>
<h2 id="title1">CSS (层叠样式表)</h2>
h2:target{
color:red;
}
图片切换
伪元素选择器
重点：E::before、E::after
是一个行内元素，需要转换成块元素
E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。
E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解
E::first-letter文本的第一个字母或字（如中文、日文、韩文等）；
案例：首字下沉
E::first-line 文本第一行； 文本第一行高亮..
E::selection 可改变选中文本的样式；
":" 与 "::" 区别在于区分伪类和伪元素
关于before和after CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念 CSS3中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者 E:after伪类;
颜色
一种新的颜色的表示方式
rgba(255,0,0,0.1)
RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的色彩空间。虽然它有的时候被描述为一个颜色空间
新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。
Red、Green、Blue、Alpha即RGBA
Hue、Saturation、Lightness、Alpha即HSLA
R、G、B 取值范围0~255
H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S 饱和度 取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度 取值范围0~1
关于透明度：
1、opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；
2 、transparent 不可调节透明度，始终完全透明
RGBA、HSLA可应用于所有使用颜色的地方。
案例： 1: opacity 设置透明度，只能针对整个盒子设置透明度. 2: 子盒子会继承父盒子的透明度. .out{ width: 200px; height: 200px; background: green; border: 1px solid darkgreen; margin: 40px auto; opacity: 0.3; } 子盒子也出现透明 .out .inner{ width: 100px; height: 100px; background-color: yellow; }
2:background-color: transparent; 完全透明，不可调节透明度.
3:使用rgba 来控制颜色，相对opacity ，不具有继承性.
文本 (shadow阴影)
text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。
1、水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
3、模糊度是不能为负值；
代码演示：
/* 3px 水平偏移量. 正值向右 负值向左/ / 5px 水垂直偏移量. 正值向下 负值向上/ / 5px 模糊度 模糊度不能为负值 值越大越模糊/ / #ccc 设置对象阴影的颜色. 可以有多个影子. ul>li{ margin: 20px; font-size: 24px; } ul>li:nth-child(1){ text-shadow: 5px 5px 2px #ccc; } ul>li:nth-child(2){ text-shadow: -5px -5px 2px #ccc; } ul>li:nth-child(3){ text-shadow: 5px 5px 2px #ccc, -5px -5px 2px #ccc; }
案例1：浮雕文字.
/设置背景色./ body { background-color: gray; font: bold 6em "microsoft yahei"; } div { margin: 30px; color: #808080; text-align: center; } /*设置水平向左1px 向上1 px 向右1px 向下1px */ .to{ text-shadow: -1px -1px 1px #000,1px 1px 1px #fff; } .ao{ text-shadow: -1px -1px 1px #000,1px 1px 1px #fff; }
盒模型
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
box-sizing 有两个值:content-box border-box
可以分成两种情况：
content-box:对象的实际宽度等于设置的width值和border、padding之和
border-box： 对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
我们把这种方式叫做盒模型
兼容性比较好
1、边框
边框圆角：
border-radius:30px;
border-radius:30px 40px 50px 60px;
赋值规律： 从左上开始，顺时针赋值，如果这个角没有值 ，去对角；
border-radius: 40px/60px;
边框阴影：
box-shadow: 水平位移 垂直位移 模糊程度 阴影大小 阴影颜色 外/内阴影(inset)
边框图片：
border-image-source: 图片路径
border-image-slice: 裁剪
border-image-width: 边框宽度
border-image-repeat: 边框图片的平铺
repeat: 图片显示不完整
round: 图片平铺 优化了，图片会完整显示
stretch: 拉伸
2、背景：
背景可以改变大小，可以有多个背景
background-size: 30px 30px;
background-size: 30% 30%;
background-size: cover; 覆盖
background-size: contain; 包含
可以有多个背景:
多个背景按照正常的语法格式书写，每个背景使用逗号隔开
背景原点：
background-origin:
content-box
padding-box
border-box
背景裁剪
background-clip:
content-box
padding-box
border-box
3、渐变
线性渐变：
background-image: linear-gradient(方向，起始颜色，终止颜色);
方向：to left right bottom top 35deg
径向渐变：
CSS3
目录
目录 2
边框 2
边框圆角 2
边框阴影 4
边框图片 4
1.1.4案例 用css 实现 7
渐变 8
线性渐变 （gradient 变化） 8
径向渐变 (radial 径向) 10
背景 11
过渡(transition) 13
2D转换 17
边框
其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。
边框圆角
border-radius 每个角可以设置两个值 ，x 值，y值
1: 边框圆角处理
2: 正方形
3：椭圆
圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。如下图
可分别设置长、短半径，以“/”进行分隔，遵循“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可以设置内阴影；
设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
可以设置多重边框阴影，实现更好的效果，增强立体感。
边框图片
border-image: url("images/border.png") 27/20px round
border-image 设置边框的背景图片.
border-image-source:url(“”) 设置边框图片的地址.
//裁剪图片，如何去裁切图片，浏览器会自动去裁剪图片.
border-image-slice:27,27,27,27
//指定边框的宽度.
border-image-width:20px;
//边框平铺的样式 stretch 拉升
round 会自动调整缩放比例
repeat(重复)
border-image-repeat: stretch;
设置的图片将会被“切割”成九宫格形式，然后进行设置。如下图
“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，
其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。如下图
1、round和repeat之间的区别
round 会自动调整尺寸，完整显示边框图片。
repeat 单纯平铺多余部分，会被“裁切”而不能完整显示。
2、更改裁切尺寸
background-slice: 34 36 27 27 分别设置裁切如下图
关于边框图片重点理解9宫格的裁切及平铺方式，实际开发中应用不广泛，但是如能灵活动用会给我们带来不少便利。
1.1.4案例 用css 实现
代码实现:
渐变
渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
可分为线性渐变、径向渐变
线性渐变 （gradient 变化）
linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。
上图是从黄色渐变到绿色
Background:linear-gradient(
To right 表示方向 (left,top,right,left ,也可以使用度数)
Yellow, 渐变起始颜色
Green 渐变终止颜色
)
background:linear-gradient( to right, red 0%, red 25% , blue 25%,blue 50%, green 50%,green 75%, pink 75% ,pink 100% ); //起止颜色，终止颜色.
background: linear-gradient( 135deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75% );
background-size: 100px 100px;
animation: move 1s linear infinite;
@keyframes move { from {} to { background-position: 100px 0; } }
1、必要的元素：
a、方向
b、起始颜色
c、终止色；
2、关于方向如下图
径向渐变 (radial 径向)
radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
background: radial-gradient( 150px at center, yellow, green );
围绕中心点做渐变，半径是150px，从黄颜色到绿颜色做渐变.
1、必要的元素：
a、辐射范围即圆半径 (半径越大，渐变效果越大)
b、中心点 即圆的中心 (中心点的位置是以盒子自身)
background: radial-gradient( 150px at left center, yellow, green );
以左上角为圆的中心点
background: radial-gradient( 150px at 0px 0px, yellow, green );
c、渐变起始色
d、渐变终止色
2、关于中心点：中心位置参照的是盒子的左上角
3、关于辐射范围：其半径可以不等，即可以是椭圆
div{ width: 300px; height: 300px; margin:100px auto; background: radial-gradient( 250px at 0px 0px, yellow, green ); border-radius: 150px; }
背景
背景在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设置过渡延时 超过时间后执行动画.
以上四属性重在理解
案例：气泡
案例2：手风琴效果
2D转换
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。在css3 当中，通过transform(变形) 来实现2d 或者3d 转换,其中2d 有，缩放，移动，旋转。
缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值；
移动 translate(x, y) 可以改变元素的位置，x、y可为负值；
x 在水平方向移动。
y 在垂直方向移动。
旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；
案例1，火箭移动
案例2 盾牌，将位置还原
案例3 旋转 原点
transform-origin:left top;
1、 3d变换
rotateX(30deg) 绕着x旋转30deg
rotateY(30deg) 绕着y旋转30deg
rotateZ(30deg) 绕着z旋转30deg
translateX(30px) 沿着x轴移动30px
translatey(30px) 沿着y轴移动30px
translatez(30px) 沿着Z轴移动30px( 必须给父盒子加透视)
2、透视：
加给变换元素的父盒子， 设置的是用户眼睛和屏幕的距离；
只是视觉上的呈现，不是正真的3d
perspective:1000px;
3、transform-style:preserve-3d;
加给变换元素的父盒子，让子盒子存在三维空间中，保持3d效果
flat:默认值 （让子盒子被扁平化）
4、 backface-visibility:hidden; 背面不可见
skew(30deg,30deg); 2d变换 -倾斜
css3中获取自定义属性的值：content:attr(data-text);
5、动画：
定义：
@keyframes 动画名{
0%{
}
100%{
}
或者
from{}
to{}
}
动画调用：
animation: 动画名称 动画时间 执行次数 运动曲线 延迟执行 结束后状态 是否反向；
inifnite: 无限次
alternate: 反向执行
forwards: 保持结束后的状态
backwards: 保持动起开始前的状态
steps(5): 让动画分步执行；
动画详细属性：
animation-name:动画名称
animation-duration:持续时间
animation-iteration-count:执行次数
animation-timing-function:运动曲线
animation-fill-mode:结束状态
animation-direction: 动画方向
animation-delay: 延迟时间
多列：（了解）
-webkit-column-count:列数
-webkit-column-rule:分割线样式
-webkit-column-width:列宽
-webkit-column-gap:列间距
-webkit-column-span:跨列 all 跨所有列
CSS3简介
如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。
CSS3的现状
1、浏览器支持程度差，需要添加私有前缀
2、移动端支持优于PC端
3、不断改进中
4、应用相对广泛
如何对待
1、坚持渐进增强原则
2、考虑用户群体
3、遵照产品的方案
4、听Boss的
准备工作
统一环境
由于CSS3兼容性问题的普遍存在，为了避免因兼容性带来的干扰，我们约定统一的环境，以保证学习的效率，在最后会单独说明兼容性的问题。
1、Chrome浏览器 version 46+
2、Firefox浏览器 firefox 42+
3、PhotoShop CS6（建议）
如何使用手册
学会使用工具，可以让我们事半功倍。
学会查看手册，培养自主学习能力。
基础知识
选择器
CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
属性
其特点是通过属性来选择元素，具体有以下5种形式：
见代码示例01 选择器-属性.html
伪类
除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。
1、结构(位置)伪类
以某元素（E）相对于其父元素或兄弟元素的位置来获取无素；
n遵循线性变化，其取值0、1、2、3、4、...
n可是多种形式：nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等；
注：指E元素的父元素，并对应位置的子元素必须是E
见代码示例02 选择器-伪类.html
2、空伪类
E:empty 选中没有任何子节点的E元素；（使用不是非常广泛）
见代码示例03 选择器-伪类empty.html
3、目标伪类
E:target 结合锚点进行使用，处于当前锚点的元素会被选中；
见代码示例04 选择器-伪类target.html
4、排除伪类
E:not(selector) 除selector（任意选择器）外的元素会被选中；
见代码示例05 选择器-伪类not.html
伪元素
1、E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
见代码示例07 选择器-伪元素first-letter.html
2、E::first-line 文本第一行；
见代码示例07 选择器-伪元素first-line.html
3、E::selection 可改变选中文本的样式；
见代码示例08 选择器-伪元素selection.html
4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
见代码示例09 选择器-伪元素before&after.html
E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解
":" 与 "::" 区别在于区分伪类和伪元素
颜色
新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。
如下图所示为颜色表示方法：
Red、Green、Blue、Alpha即RGBA
Hue、Saturation、Lightness、Alpha即HSLA
不同的颜色表示方法其取值也不相同，具体如下：
R、G、B 取值范围0~255
见代码示例01 颜色-透明rgba.html
H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S 饱和度 取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度 取值范围0~1
见代码示例02 颜色-透明hsla.html
RGBA、HSLA可应用于所有使用颜色的地方。
见代码示
关于CSS透明度：
1、opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；
2 、transparent 不可调节透明度，始终完全透明
文本
text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。
如：text-shadow: 2px 2px 2px #CCC;
1、水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
3、模糊度是不能为负值；
见代码示例01 文本-阴影text-shadow.html
盒模型
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的值是会自动调整的。
见代码示例01 盒模型.html
边框
其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。
边框圆角
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可以设置内阴影；
注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感，符合渐进增强，实际开发中可以大胆使用。
见代码示例04 边框-阴影box-shadow.html
边框图片
border-image
设置的图片将会被“切割”成九宫格形式，然后进行设置。如下图
最少“4刀”便可以将一个图片切成9部分，“切割”完成后生成虚拟的9块图形，如下图
这时我们将一个盒子想象是由9部分组成的，分别是左上角、上边框、右上角、右边框、右下角、下边框、左下角、左边框、中间，那么浏览器会将切割好的9张虚拟图片分别对应到盒子的各个部分上。
其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺或拉伸，如下图
参数详解
1、border-image-source
指定图片路径
2、border-image-repeat
指定裁切好的虚拟图片的平铺方式
a) round会自动调整尺寸，完整显示边框图片
b) repeat 单纯平铺,多余部分，会被“裁切”而不能完整显示。
3、border-image-slice
4、border-image-width
设置边框背景区域的大小，这个值的大小不会影响到盒子的大小。
见代码示例06 边框-图片border-image.html
关于边框图片重点理解9宫格的裁切及平铺方式，实际开发中应用不广泛，但是如能灵活动用会给我们带来不少便利。
背景
背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
background-size
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
见代码示例01 背景-尺寸background-size.html
2、background-origin
通过background-origin可以设置背景图片定位(background-position)的参照原点。
其参数设置如下：
border-box以边框做为参考原点；
padding-box以内边距做为参考原点；
content-box以内容区做为参考点；
见代码示例02 背景-原点background-origin.html
3、background-clip
通过background-clip，可以设置对背景区域进行裁切，即改变背景区域的大小。
其参数设置如下：
border-box裁切边框以内为背景区域；
padding-box裁切内边距以内为背景区域；
content-box裁切内容区做为背景区域；
见代码示例03 背景-裁切background-clip.html
4、多背景
以逗号分隔可以设置多背景，可用于自适应布局
见代码示例04 背景-多背景.html
渐变
渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
线性渐变
linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果，如下图是从黄色渐变到绿色。
1、必要的元素：
借助Photoshop总结得出线性渐变的必要元素
a、方向
b、起始色
c、终止色
d、渐变距离
2、关于方向
设置渐变方向，可以用关键字如to top、to right，也可以用角度（正负值均可）如45deg、-90deg等，当以角度做为参数时，可参照下图来使用，0deg从下往上，90deg从左向右，进而可以推算出180deg从上向下。
见代码示例01 渐变-线性渐变linear-gradient.html
注：我们可以设置渐变的起始点，这个起始点的值可以是百分比形式，这个百分比在没有设置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）的渐变。
见代码示例02 渐变-径向渐变radial-gradient.html
写在最后
关于渐变不同浏览器有不同的版本，即语法格式不一样，我们以最新语法为准，可自行查找资料了解即可。
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设置所有属性的过渡效果，也可以分别设置某一属性的过渡效果，见代码示例03 过渡-宽高.html
可以将过渡属性transition设置在A或B状态，但是会有一些细节的差异，见代码示例03 过渡-颜色.html
transition属性拆解如下表：
见代码示例05 过渡-属性详解.html
2D转换
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
1、移动 translate(x, y) 可以改变元素的位置，x、y可为负值；
a) 移动位置相当于自身原来位置
b) y轴正方向朝下
c) 除了可以像素值，也可以是百分比，相对于自身的宽度或高度
见代码示例01 2D转换-移动translate.html
2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数；
见代码示例02 2D转换-缩放scale.html
3、旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；
见代码示例03 2D转换-旋转rotate.html
a) 当元素旋转以后，坐标轴也跟着发生的转变
b) 调整顺序可以解决，把旋转放到最后
见代码示例05 综合使用例子.html
4、倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
见代码示例04 2D转换-倾斜skew.html
5、矩阵matrix() 把所有的2D转换组合到一起，需要6个参数（了解）。
关于矩阵的学习资料
6、transform-origin可以调整元素转换的原点
见代码示例08 转换-原点transform-origin.html
我们可以同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，其顺序会影响转换的效果。
见代码示例05 综合使用例子.html
3D转换
1、左手坐标系
伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图
2、CSS中的3D坐标系
CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图
借助示例理解3D转换
a) 绕X轴旋转，见代码示例01 3D转换-旋转rotateX.html
b) 绕Y轴旋转，见代码示例02 3D转换-旋转rotateY.html
c) 绕Z轴旋转，见代码示例03 3D转换-旋转rotateZ.html
d) 在X轴移动，见代码示例04 3D转换-移动translateX.html
d) 在Y轴移动，见代码示例05 3D转换-移动translateY.html
d) 在Z2轴移动，见代码示例06 3D转换-移动translateZ.html
3、左手法则
左手握住旋转轴，竖起拇指指向旋转轴正方向，正向就是其余手指卷曲的方向。
4、透视（perspective）
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective有两种写法
a) 作为一个属性，设置给父元素，作用于所有3D转换的子元素
b) 作为transform属性的一个值，做用于元素自身
见代码示例07 3D转换-透视perspective.html
5、理解透视距离
透视会产生“近大远小”的效果
6、3D呈现（transform-style）
设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换原素。
flat：所有子元素在 2D 平面呈现
preserve-3d：保留3D空间
见代码示例08 3D转换-透视transform-style.html
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。
见代码示例09 3D转换-练习-立方体.html
7、backface-visibility
设置元素背面是否可见
见代码示例01 3D转换-应用-音乐盒.html
参考文档
CSS3动画库
animate.css
动画
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
1、必要元素：
a、通过@keyframes指定动画序列；
b、通过百分比将动画序列分割成多个节点；
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素；
2、关键属性
a、animation-name设置动画序列名称
b、animation-duration动画持续时间
c、animation-delay动画延时时间
d、animation-timing-function动画执行速度，linear、ease等
e、animation-play-state动画播放状态，running、paused等
f、animation-direction动画逆播，alternate等
g、animation-fill-mode动画执行完毕后状态，forwards、backwards等
h、animation-iteration-count动画执行次数，inifinate等
i、steps(60) 表示动画分成60步完成
参数值的顺序：
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意
伸缩布局
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
如下图，学习新的概念：
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
1、必要元素：
a、指定一个盒子为伸缩盒子 display: flex
b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
c、明确主侧轴及方向
d、可互换主侧轴，也可改变方向
2、各属性详解
a、flex-direction调整主轴方向（默认为水平方向）
b、justify-content调整主轴对齐
c、align-items调整侧轴对齐
d、flex-wrap控制是否换行
e、align-content堆栈（由flex-wrap产生的独立行）对齐
f、flex-flow是flex-direction、flex-wrap的简写形式
g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
h、order控制子项目的排列顺序，正序方式排序，从小到大
此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值可参考示例源码。
多列布局
类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。
/* 分几列/-webkit-column-count:3;/ 分割线/-webkit-column-rule:1px dashed red;/设置列间距/-webkit-column-gap:60px;/ 列宽度//-webkit-column-width: 400px;*/
了解即可，实际意义不大。
Web字体
开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。
支持程度比较好，甚至IE低版本浏览器也能支持。
字体格式
不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。
1、TureType(.ttf)格式
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
2、OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
3、Web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
4、Embedded Open Type(.eot)格式
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
5、SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。
推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体
字体图标
其实我们可以把文字理解成是一种特殊形状的图片，反之我们是不是也可以把图片制作成字体呢？
答案是肯定的。
常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了。
优点：
1、将所有图标打包成字体库，减少请求；
2、具有矢量性，可保证清晰度；
3、使用灵活，便于维护；
Font Awesome 使用介绍
http://fontawesome.dashgame.com/
定制自已的字体图标库
http://iconfont.cn/
https://icomoon.io/
SVG素材
http://www.iconsvg.com/
兼容性
通过http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。
高级应用
360导航官网
携程旅行
3D切割轮播图
1、
伸缩布局：
display:flex;
主轴 ，侧轴（垂直于主轴的方向）
主轴方向：flex-direction:
row row-reverse
column column-reverse
主轴方向上的对齐方式：justify-content
flex-start: 主轴开始
flex-end: 主轴结束
center: 居中
space-around:平分
sapce-between：两端对齐 中间平均
侧轴对齐方式：
flex-start: 侧轴开始
flex-end: 侧轴结束
center: 居中
baseline:基线对齐
streth:拉伸
子盒子伸缩比例：
flex: 1;
如果某盒子不参与划分比里， 不写flex属性即可
2、图标字体
优点：
1、将所有图标打包成字体库，减少请求；
2、具有矢量性，可保证清晰度；
3、使用灵活，便于维护；
使用步骤：
1、引入字体包
2、申明字体：告诉浏览器去哪找字体
3、定义类名
4、在结构中写 图标的编码，给标签添加类名
伪元素中：
 ----> content:"\e628";
3-360全屏滚动案例
鼠标滚轮事件：
onmousewheel=function(){}
伸缩布局
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
如下图，学习新的概念：
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
1、必要元素：
a、指定一个盒子为伸缩盒子 display: flex
b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
c、明确主侧轴及方向
d、可互换主侧轴，也可改变方向
2、各属性详解
a、flex-direction调整主轴方向（默认为水平方向）
该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置
row 水平方向
reverse-row 反转
column 垂直方向
reverse-column 反转列
b、justify-content设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
flex-start、 起点对齐
flex-end、 终点对齐
center 中间对齐
space-around、 环绕
space-between 两端对齐
c、flex控制子项目的缩放比例
不指定flex 属性，则不参与分配
d、align-items设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
flex-start、 起点对齐
flex-end、 终点对齐
center 中间对齐
Strethc: 拉伸;
此知识点重在理解，要明确找出主轴、方向，各属性对应的属性值可参考示例源码
应用场景1：
应用场景2:
应用场景3-携程旅行
Web字体
开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。
支持程度比较好，甚至IE低版本浏览器也能支持。
字体格式
不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。
1、TureTpe(.ttf)格式
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
2、OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
3、Web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
4、Embedded Open Type(.eot)格式
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
5、SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。
下载字体的网站.
推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体
字体图标
其实我们可以把文字理解成是一种特殊形状的图片，反之我们是不是也可以把图片制作成字体呢？
答案是肯定的。
常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了。
优点：
1、将所有图标打包成字体库，减少请求；
2、具有矢量性，可保证清晰度；
3、使用灵活，便于维护；
Font Awesome 使用介绍
http://fontawesome.dashgame.com/
定制自已的字体图标库
http://iconfont.cn/
https://icomoon.io/
SVG素材
http://www.iconsvg.com/
兼容性
通过http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。
我们需要知道每个属性，能被那个版本的浏览器支持.
高级应用
360 案例:
监听滚轮
var i=0; document.onmousewheel=function(){ console.log(i++); }
//需要处理兼容 （我们是靠监听滚轮的时间来处理）
//我们需要使用到插件. (滚屏插件) 基于jQuery 的一个插件.
jQuery fullPage 全屏滚动插件
中文网址:http://www.dowebok.com
相关说明:http://www.dowebok.com/77.html
对应的颜色
sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
loopTop:true , 滚到顶部 回到最后一屏；
js代码
$(function(){ $('#dowebok').fullpage({ sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'], loopTop:true, afterLoad:function( anchorLink ,index){ console.log(index); $('.section').removeClass('current'); setTimeout(function(){ $('.section').eq(index-1).addClass('current'); },100); } });});
网友评论