一、CSS3的滤镜
1、什么是滤镜：对图像、图像进行的视觉处理(模糊、饱和度、对比度等)
2、滤镜的实现：filter属性
3、常用的滤镜函数：
(1)模糊效果：blur(number),number越大图像越模糊
(2)设置图像的亮度：brightness(number)，number越大图像越亮,number不能取负值。可以是 整数也可以是百分比
(3)图像的对比度：contrast(number)
(4)阴影效果：drop-shadow(args1 args2 args3 args4)，作用类似CSS中的box-shadow属性
args1：阴影水平偏移量
args2：阴影的垂直偏移量
args3：阴影的模糊半径
args4：阴影的颜色
(5)图像的灰度转换：grayscale(number)
(6)图像反转：invert()
(7)图像的不透明度：opacity()
(8)图像转换为棕褐色：sepia()
(10)图像的饱和度：saturate()
二、HTML5的画布：在页面中绘制图形的特殊区域
1、H5中的画布标签：
<canvas id="画布的名称" width="宽度" height="高度">
</canvas>
2、获取画布
var cas = document.getElementById("画布的名称")
3、获取画笔：context对象，使用该对象可以在画布上绘制图形
var ctx = cas.getContext('2d');
4、画直线：
(1)确定初始位置(起始点)：moveTo(x,y)
(2)确定连接端点(终点)：lineTo(x,y)
(3)描边：stroke() --- 在起始点和终点之间画一条线
(4)设置线宽：lineWidth
(5)描边的颜色：strokeStyle='颜色'
(6)线条端点的形状：lineCap=’属性值’
butt：无形状,方形的边缘 默认值
round：圆形端点
square：方形端点
5、线条的路径：
(1)重置路径：beginPath()
(2)闭合路径：closePath()
6、图形填充
fill()
fillStyle="颜色" //设置填充色
7、绘制圆
arc(x,y,r,开始角,结束角,方向)
x和y：表示圆心坐标
r：圆半径
开始角：0、0.5*Math.PI、1*Math.PI、1.5*Math.PI、2*Math.PI
结束角：0、0.5*Math.PI、1*Math.PI、1.5*Math.PI、2*Math.PI
方向：true(逆时针)、false(顺时针)
三、css精灵技术（背景图片）
1.背景：CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
2.精灵技术的使用：CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的 background-image、background-repeat 和 background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。