1、cursor
Cursor：要显示的光标的类型（形状）
opera 9.3和safari3不支持url值，任何版本的IE都不支持属性值inherit
属性值
url
需使用的自定义光标的 URL。
注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default
默认光标（通常是一个箭头）
auto
默认。浏览器设置的光标。
crosshair
光标呈现为十字线。
pointer
光标呈现为指示链接的指针（一只手）
move
此光标指示某对象可被移动。
e-resize
此光标指示矩形框的边缘可被向右（东）移动。
ne-resize
此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize
此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize
此光标指示矩形框的边缘可被向上（北）移动。
se-resize
此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize
此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize
此光标指示矩形框的边缘可被向下移动（南）。
w-resize
此光标指示矩形框的边缘可被向左移动（西）。
text
此光标指示文本。
wait
此光标指示程序正忙（通常是一只表或沙漏）。
help
此光标指示可用的帮助（通常是一个问号或一个气球）。
2、三角形
<div class=‘arrow-up’></div>
.arrow-up{
height:0;
0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-bottom:5px solid blue;
}
<div class=‘arrow-down’></div>
.arrow-down{
height:0;
0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid blue;
}
<div class=‘arrow-left’></div>
.arrow-left{
height:0;
0;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-right:5px solid blue;
}
<div class=‘arrow-right’></div>
.arrow-right{
height:0;
0;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-left:5px solid blue;
}
<div class=‘arrow-90-top-left’></div>
.arrow-90-top-left{
height:0;
0;
border-top:5px solid blue;
border-right:5px solid transparent;
}
<div class=‘arrow-90-top-right’></div>
.arrow-90-top-right{
height:0;
0;
border-top:5px solid blue;
border-left:5px solid transparent;
}
<div class=‘arrow-90-bottom-left’></div>
.arrow-90-bottom-left{
height:0;
0;
border-right:5px solid transparent;
border-bottom:5px solid blue;
}
<div class=‘arrow-90-bottom-right’></div>
.arrow-90-bottom-right{
height:0;
0;
border-left:5px solid transparent;
border-bottom:5px solid blue;
}
3、background
设置背景属性
IE8以及IE8-不支持一个元素多个背景图像。
IE7及IE7-不支持inherit。IE8需要!DOCTYPE。IE9支持inherit。
4、canvas
用于图形的绘制，canvas标签只是图形容器，所有的绘制工作必须使用js来绘制图形。
a、创建画布
<canvas id=‘myCanvas’ width=‘200’ height=‘200’></canvas>
通常要指定id，此id在js中经常引用
b、js绘制图像
var c=document.getElementById(‘myCanvas’);
var ctx=c.getContext(‘2d’);
ctx.fillStyle=‘#000fff’;——填充色，其属性值可以是css颜色、渐变或图案
ctx.strokeStyle=‘red’;——边框颜色
矩形
ctx.fillRect(0,0,150,75);——(x,y,width,height)定义矩形当前的填充方式
直线
ctx.moveTo(0,0);——(x,y)定义线条开始坐标
ctx.lineTo(200,100);——(x,y)定义线条结束坐标
ctx.stroke();
圆形或弧形：绘制圆形时使用了“ink”的方法，比如stroke()或fill()
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);——arc(x,y,r,start,stop)
cox.stroke();
文本
ctx.font=“30px Arial”;——定义字体
ctx.fillText(‘Hello World’,10,50);——fillText(text,x,y)绘制实心文本
ctx.strokeText(‘Hello World’,10,50);——strokeText(text,x,y)绘制空心文本
渐变
线性渐变
var grd=ctx.createLinearGradient(0,0,200,0);——createLinearGradient(x,y,x1,y1)在(x,y) 和(x1,y1)这两点间渐变
grd.addColorStop(0,’red’);——addColorStop(x,color)指定颜色停止，x介于0～1
grd.addColorStop(1,’white’);
ctx.fillStyle=grd;——fillStyle属性值设置为线性渐变
径向渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);—createRadialGradient(x,y,r,x1,y1,r2)
在外圆不包含内圆的部分渐变
grd.addColorStop(0,’red’);
grd.addColorStop(1,’white’);
ctx.fillStyle=grd;
图片
var img=document.getElementById(‘scream’);
ctx.drawImage(img,10,10);——drawImage(image,x,y)图片原点在放置区域的(x,y)
清空画布
clearRect(x, y, width, height)
canvas复杂绘画，需要考虑解析几何知识，以圆形为顶点的五边形代码如下：
绘制五边形
for (let i = 0; i < 5; i++) {
cxt.beginPath()
cxt.lineWidth = 2
cxt.moveTo(100 + 80 * Math.cos((i * 72) / 180 * Math.PI), 100 + 80 * Math.sin((i * 72) / 180 * Math.PI))
cxt.lineTo(100 + 80 * Math.cos(((i + 1) * 72) / 180 * Math.PI), 100 + 80 * Math.sin(((i + 1) * 72) / 180 * Math.PI))
cxt.strokeStyle = 'rgb(54,138,242)'
cxt.stroke()
cxt.fill()
}
绘制各角顶点
for (let i = 0; i < 5; i++) {
cxt.beginPath()
cxt.lineWidth = 2
cxt.arc(100 + 80 * Math.cos((i * 72) / 180 * Math.PI), 100 + 80 * Math.sin((i * 72) / 180 * Math.PI), 2, 0, 2 * Math.PI, false)
cxt.strokeStyle = 'rgb(54,138,242)'
cxt.fillStyle = '#fff'
cxt.stroke()
cxt.fill()
}