CSS3

属性选择器：

• E[attr]:查找指定的拥有attr属性的E标签
• E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签
• E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签
• E[attr^=value]:查找拥有指定的attr属性并且属性值以value开头的E标签
• E[attr$=value]:查找拥有指定的attr属性并且属性值以value结束的E标签

兄弟元素选择器：

.first + li {}：有 .first 样式的 相邻 并为 li 标签的元素

.first ~ li {}：有 .first 样式的所有兄弟 li 元素

阴影：

文本阴影：text-shadow：offsetX  offsetY  blur  color（可以用逗号连接添加多层阴影）

边框阴影：box-shadow：h  v  blur  spread  color  inset

• h:水平方向的偏移值
• v：垂直方向的偏移值
• blur：模糊--可选，默认0
• spread:阴影的尺寸，扩展和收缩阴影的大小--可选 默认0
• color:颜色--可选，默认黑色
• inset:内阴影--可选,默认是外阴影

伪类选择器：

li : first-child：查找 li 的父元素中的 第一个子元素（危险）

li : last-child：查找 li 的父元素中的 最后一个子元素（危险）

li : first-of-type：查找 li 的父元素中的 第一个 li 元素

li : last-of-type：查找 li 的父元素中的 最后一个 li 元素

li : nth-child( 从1开始的索引 );

li : nth-of-type( 关键字 )----------关键字：odd 奇数  even 偶数

li : nth-of-type( 表达式 )----------表达式：-n+5-----------n:默认取值范围为0~子元素的长度.但是当n<=0时，选取无效

     nth-last-of-type( 表达式 )----从最后开始

li : empty：空的，连空格都没有

li : target：结合锚点使用，处于当前锚点的元素会被选中

伪元素：

E::before，E::after

实际上并不在文档中生成 / DOM 树里面看不到

但是能看到实际的效果

注意：

• 必须包含 content 属性
• 是行内元素，如果想设置宽高则需转换为块：display: block / float: ** / position: **
• JS无法对伪元素操作
• 单冒号的伪元素用来兼容IE8

E::first-letter

获取第一个字母，可以实现首字下沉

E::first-line

获取第一行内容，如果设置了 first-letter 则无法改变首字的样式

E::selection

设置当前选中的内容的样式（只能改变显示样式，不能改变大小）

盒模型：

box-sizing : border-box;  添加了这个属性以后，设置的 width 就包含了 padding 和 border

线性渐变：

线形渐变产生的是图像，所以必须使用 background 属性

background : linear-gradient (方向，颜色  位置)

方向：to left，to right，to top，to bottom（默认值）

颜色 位置：可多次重复，位置可用长度值 / 百分比

背景样式：

背景颜色

background-color : 

背景图片：

background-image : 

背景平铺：

background-repeat : round(图片缩放后平铺)、space(图片不被缩放，在图片间产生距离)

滚动容器背景行为：

background-attachment :

• fixed (背景图片位置固定不变)
• scroll (背景图片跟随滚动)
• local (背景图片会跟随内容一起滚动)
• scroll (背景图片不会跟随内容一起滚动)

background-position : 设置背景图像的起始位置

background-size : 

• cover (缩放图片，使图片完全包含在容器中)
• contain (等比缩放图片，完全填充容器，部分图片在容器外)
• 百分比 (参照父容器的百分比)
• 设置宽 / 高 (建议只设置一个值，会等比缩放)

background-origin : —— 设置背景坐标原点

• border-box —— 从 border 位置开始填充背景
• padding-box —— 从 padding 位置开始填充背景
• content-box —— 从 content 位置开始填充背景

background-clip : —— 设置内容的裁切

• border-box —— 显示 border 及以内的内容
• padding-box —— 显示 padding 及以内的内容
• content-box —— 显示 content 及以内的内容

边框图片：

border-image-source : url ("..."); —— 设置边框图片路径

border-image-slice : 10 fill —— 设置受保护区域大小

border-image-width : 10px; —— 明确圆角 , 受保护区域大小

border-image-repeat : strech; —— 设置背景平铺效果，默认 strech 拉伸，repeat 重复

动画效果：

变形：transform

1. transform一定要加初始值

2. 可以多个变换一起用——执行顺序是反的

transform: scale(1, 2) rotate(45deg); // 先执行rotate，再执行scale

• 旋转rotate
• 倾斜skew
• 缩放scale
• 移动translate

3. 3D变换

transform: perspective() rotateX(90deg)

perspective

• 必须添加perspective景深，才能看出3D效果
• 只给最外层加一次

transform-style: preserve-3d

• 让父元素变成3d模型，第一级子元素可以脱离父元素
• 每个需要子元素脱离的地方，都要给父级加

过渡属性：transition

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property（必须）	规定应用过渡的 CSS 属性的名称。必须是有数值的属性，才有动画效果	3
transition-duration（必须）	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function（必须）	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

动画：animation

1. 定义

@keyframes name {
    0%{}
    50%{}
    100%{}
}

2. 调用

animation-name: name;            // 通过名字调用动画
animation-duration: 10s;         // 动画的时间
animation-timing-function: ease; // 运动的形式
// 以上三个必需
animation-fill-mode: ;           // 规定结束时的状态
animation-delay: ;               // 延时几秒后执行动画
animation-iteration-count: ;     // 执行几次
animation-direction: ;           // 规定下一周期是否逆向播放
animation-play-state: ;          // 规定动画暂停或运行

动画优化要点总结

• 执行动画尽量使用CSS3 keyframes和 trainsition

• 如果需要JS执行动画，使用requestAnimationFrame,或者Velocity,避免使用jQuery动画,setTimeout,setInterval。

• js动画的优点是，我们能随时控制开始，暂停，停止，而CSS不行。缺点是没办法像css这样优化，因为js动画是在主线程上跑的。

• 动画尽量使用transform,opacity，尽量避免left/padding/background-position等

• 尽可能的为产生动画的元素使用fixed或absolute的position

• 阴影渐显动画尽量用伪类的opacity来实现。

• 使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。

• 使用Chrome Timeline工具检查

• 时刻把浏览器处理流程记在心里