-webkit- 针对Chrome和Safari浏览器
-moz- 针对FireFox浏览器
-o- 针对Opera浏览器
-ms- 针对IE浏览器
也就是说凡是带有这样的前缀的都是这些浏览器的私有属性，只有各自的浏览器内部才有效。之所以这样，是因为有些css属性是带有实验性质的（尤其是css3），各主流浏览器尚未对它完全支持，这样就会使用私有属性来进行试验，而其他浏览器则会自动忽略该属性。因此，网页为了兼容各种不同的浏览器，就会把所有的私有属性都放上去，也包括不带前缀的标准属性。而浏览器的版本众多，很可能低版本的浏览器对某个属性处于试验性质，而高版本则已经完全支持了（也就是说可以不用前缀了），比如box属性就是如此，因此你把其他带有前缀的属性去掉不影响效果。但是，既然是网页，就不会是只有你一个人看的，要是其他用户用的是低版本的浏览器呢？所以，从兼容性角度出发，你最好不要删掉这些属性，除非你能保证其他用户用的浏览器与你的完全一样。
h5中的canvas有非常强大的绘图功能
1.渲染上下文
canvas起初是空白的。为了展示，首先脚本要找到渲染上下文，然后在它的上面绘制。<canvas>元素有一个叫做getcontext()的方法，这个方法是用来渲染上下文和它的绘画功能，getContext只有一个参数，上下文的格式。对于2D图像而言，你可以使用CanvasRenderingContext2D.
绘制矩形
canvas提供了三种方法绘制矩形
fillRect(s,y,width,height)
绘制一个填充的矩形
strokeRect(x,y,width,height)
绘制一个矩形的边框
clearRect(x,y,width,height)
清除指定矩形区域，让清除部分完全透明
绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的集合。一个路径，甚至一个子路径，都是闭合的。使用绘制路径绘制图形需要一些额外的步骤。
1.首先，你需要创建路径起始点。
2.然后你使用画图命令去画出路径。
3.之后你把路径封闭。
4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
以下是所要用到的函数：
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中
stroke()
通过线条来绘制图形轮廓
fill()
通过填充路径的内容区域生成实心的图形
移动笔触
一个非常有用的函数，而这个函数实际上兵不能画出任何东西，也是上面所描述的路径列表的一部分，这个函数就是moveTo()。或者你可以想象以下在纸上作业，一直钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。
moveTo(x,y)
将笔触移动到指定的坐标x以及y上。
线
绘制直线，需要用到的方法lineTo(0
lineTo(x,y)
绘制一条从当前位置到指定x以及y位置的直线。
该方法有两个参数：x以及y,代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点。开始点也可以通过moveTo()函数改变。
注意：路径使用填充(filled)时，路径自动闭合，使用描边(stroked)则不会闭合路径。如果没有添加闭合路径closePath()到描述三角形函数中，则只绘制了两条线段，并不是一个完整的三角形。
圆弧
绘制圆弧或者圆，我们使用arc()方法。当然也可以使用arcTo()，不过这个的实现并不是那么的可靠，所以我们这里不做介绍。
arc(x,y,radius,startAngle,endAngle,anticlockwise)
画一个以(x,y)为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
arcTo(x1,y1,x2,y2,radius)
根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
该方法有五个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参考anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
贝塞尔以及二次贝塞尔
一般用来绘制复杂有规律的图形。
quadraticCurveTo(cp1x,cp1y,x,y)
绘制二次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点。
bezierCurveTo(cp1x,cp1y,cp2x,cp2Y,x,y)
绘制三次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二。
矩形
同样也有rect(0方法，将一个矩形路径增加到当前路径上。
rect(x,y,width,height)
绘制一个左上角坐标为(x,y),高度为width以及height的矩形。
当该方法执行的时候，moveTo(0方法自动设置坐标参数(0,0)。也就是说，当前笔触自动重置为默认坐标。
Path2D对象
为了简化代码和提高性能，Path2D对象已可以在较新版本的浏览器中使用，用来缓存或记录绘画命令，这样你将能快速的回顾路径。
Path2D()
所有的路径方法比如moveTo,rext,arc或quadraticCurveTo()等，如我们前面见过的，都可以在Path2D中使用。
Path2D API中添加了addPath作为将path结合起来的方法。当你想要从几个元素中来创建对象时，这将会很实用。
比如：
Path2D.addPath(path,[,trnasform])
添加一条路径到当前路径（可能添加了一个变换矩形）。
使用SVG paths
新的Path2D API有另一个强大的特点，就是使用SVG path data来初始化canvas上的路径。这将使你获取路径时可以以SVG或canvas的方式来重用它们。
如 var p=new Path2D("M10 10 h 80 v 80 h -80 Z")
这条路径将先移动到点（M10 10)然后再水平移动80个单位（h,80)，然后下移80个单位（v,80)，接着左移80个单位(h-80)，再回到起点处(z)。
色彩 Colors
如果我们想给图形上色，有两个重要的属性可以做到:
fillStyle =color
设置图形的填充颜色
strokeStyle=color
设置图形轮廓的颜色
color可以是表示CSS颜色值的字符串，渐变对象或者团对象。在默认情况下，线条和填充颜色都是黑色(CSS 颜色值 #000000）。
注意：一旦您设置了strokeStyle或者fillStyle的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置fillStyle或strokeStyle的值。
透明度
除了可以绘制实色图形，我们还可以用canvas来绘制半透明的图形。通过设置globalAlpha属性或者使用一个半透明颜色作为轮廓或填充的样式。这个属性值影响到canvas里所有图形的透明度，有效值的范围是0.0（完全透明）到1.0（完全不透明），默认是1.0.
rgba()示例
该例是画矩形。这里我们可以看出，rgba()可以分别设置轮廓和填充样式，因而具有更好的操作性和使用弹性。
function draw() {
var ctx = document.getElementById('canvas').getContext('2d')
// Draw background
ctx.fillStyle = 'rgb(255,221,0)'
ctx.fillRect(0,0,150,37.5)
ctx.fillStyle = 'rgb(102,204,0)'
ctx.fillRect(0,37.5,150,37.5)
ctx.fillStyle = 'rgb(0,153,255)'
ctx.fillRect(0,75,150,37.5)
ctx.fillStyle = 'rgb(255,51,0)'
ctx.fillRect(0,112.5,150,37.5)
// Draw semi transparent rectangles
for (var i=0i<10i++){
ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')'
for (var j=0j<4j++){
ctx.fillRect(5+i*14,5+j*37.5,14,27.5)
}
}}
线性Line Styles
可以通过一系列属性来设置线的样式
lineWidth=value
lineCap=type
lineJoin=type
miterLimit=value
lineWidth属性的例子
这个属性设置当前绘线的粗细。属性值必须为正数。默认值是1.0。
线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。
如果你想要绘制一条从 (3,1) 到 (3,5)，宽度是 1.0 的线条，你会得到像第二幅图一样的结果。实际填充区域（深蓝色部分）仅仅延伸至路径两旁各一半像素。而这半个像素又会以近似的方式进行渲染，这意味着那些像素只是部分着色，结果就是以实际笔触颜色一半色调的颜色来填充整个区域（浅蓝和深蓝的部分）。这就是上例中为何宽度为 1.0 的线并不准确的原因。
要解决这个问题，你必须对路径施以更加精确的控制。已知粗 1.0 的线条会在路径两边各延伸半像素，那么像第三幅图那样绘制从 (3.5,1) 到 (3.5,5) 的线条，其边缘正好落在像素边界，填充出来就是准确的宽为 1.0 的线条。
对于那些宽度为偶数的线条，每一边的像素数都是整数，那么你想要其路径是落在像素点之间 (如那从 (3,1) 到 (3,5)) 而不是在像素点的中间。同样，注意到那个例子的垂直线条，其 Y 坐标刚好落在网格线上，如果不是的话，端点上同样会出现半渲染的像素点。
虽然开始处理可缩放的 2D 图形时会有点小痛苦，但是及早注意到像素网格与路径位置之间的关系，可以确保图形在经过缩放或者其它任何变形后都可以保持看上去蛮好：线宽为 1.0 的垂线在放大 2 倍后，会变成清晰的线宽为 2.0，并且出现在它应该出现的位置上。
lineCap属性
属性lineCap的值决定了线段端点显示的样子。它可以为下面的三种的其中之一：butt,round,square。默认是butt。
lineJoin属性
lineJoin的属性值直接决定了图形中两线段连接处所显示的样子。它可以是这三种之一:round,bevel和miter.默认是miter。
miterLimit 属性的演示例子
As you've seen in the previous example, when joining two lines with themiter option, the outside edges of the two joining lines are extended up to the point where they meet. For lines which are at large angles with each other, this point is not far from the inside connection point. However, when the angles between each line decreases, the distance (miter length) between these points increases exponentially.
就如上一个例子所见的应用 miter 的效果，线段的外侧边缘会延伸交汇于一点上。线段直接夹角比较大的，交点不会太远，但当夹角减少时，交点距离会呈指数级增大。
The miterLimit property determines how far the outside connection point can be placed from the inside connection point. If two lines exceed this value, a bevel join will be drawn.
miterLimit 属性就是用来设定外延交点与连接点的最大距离，如果交点距离大于此值，连接效果会变成了 bevel。
I've made a little demo in which you can set miterLimit dynamically and see how this effects the shapes on the canvas. The blue lines show where the start and endpoints for each of the lines in the zig-zag pattern are.
我做了一个演示页面，你可以动手改变 miterLimit 的值，观察其影响效果。蓝色辅助线显示锯齿折线段的起点与终点所在的位置。
渐变Gradients
我们可以用线性或者径向的渐变来填充或者描边
用下面的方法新建canvasGadient对象，并且赋给图形的fillStyle或strokeStyle属性。
createLinearGradient(x1,y1,x2,y2) 方法接受4个参数，标书渐变的起点(x1,y1)与终点(x2,y2)。
createRadiaGradient(x1,y1,r1,x2,y2,r2)方法接受6个参数，前三个定义一个以(x1,y1)为原点，半径为r1的圆，后三个参数则定义另一个以(x2,y2)为原点，半径为r2的圆。
创建出canvasStop对象后，我们就可以用addColorStop方法给它上色了。
addColorStop(position,color)
addcolorStop方法接受两个参数，position参数必须是一个0.0与1.0之间的数值，表示渐变中颜色所在的相对位置。例如，0.5表示颜色会出现在正中间。color参数必须是一个有效的CSS颜色值（如#FFF，rgba(0,0,0,1)等等）。
图案 Patterns
实现图案的效果，有一个更加简单的方法：createPattern。
createPattern(image,type)
Image可以是一个Image对象的引用，或者另一个canvas对象。Type必须是下面的字符串之一：repeat,repeat-x,repeat-y,no-repeat。
注意：用canvas对象作为Image参数在Firefox 1.5(Gecko 1.8)中是无效的。
图案的应用于渐变类似，创建出一个pattern之后，赋给fillStyle或strokeSty le属性即可。
与drawImage有点不同，你需要确认image对象已经装载完毕，否则图案可能效果不对的。
对于Firefox浏览器，目前只支持属性repeat，如果赋其他值，什么效果都没有的。
阴影Shadows
shadowOffsetX=float
shadowOffsetY=float
shadowBlur=float
shadowColor=color
shadowOffsetX和shadowOffsetY用来设定阴影在X和Y轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，他们默认都是0。
shadowBlur用于设定阴影的模糊成都，其数值并不跟像素挂钩，也不受变换矩阵的影响，默认为0。
shadowColor是标准的CSS颜色值，用于设定阴影颜色效果，默认是全透明的黑色。
Canvas 填充规则EDIT
When using fill (or clip and isPointinPath) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.
当我们用到fill(或者clip和isPointinPath)你可以选择一个填充规则，该填充规则根据某处在路径的外面或者里面来决定该处是否被填充，这对于自己与自己路径相交或者路径被嵌套的时候是有用的。
Two values are possible:
"nonzero": The non-zero winding rule, which is the default rule.
"evenodd": The even-odd winding rule.
两个可能的值：
"nonzero": non-zero
winding rule, 默认值.
"evenodd": even-odd
winding rule.
In this example we are using the evenodd rule.
这个例子，我们用填充规则evenodd
function draw() {var ctx = document.getElementById('canvas').getContext('2d')
ctx.beginPath()
ctx.arc(50, 50, 30, 0, Math.PI*2, true)
ctx.arc(50, 50, 15, 0, Math.PI*2, true)
ctx.fill("evenodd")
}
Screenshot
Live sample
待续。。。
阅读全文
图片的话需要用PS做成圆角不过纯CSS也可以做出圆角效果
给个代码参考下<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html
charset=gb2312"
/>
<title>CSS圆角</title>
</head>
<style
type="text/css">
body
{
background:
#fff
font-family:
"Lucida
Grande",
Helvetica,
Arial,
sans-serif
font-size:
11px
}
#container
{background:#d8d8ee
width:600px
margin:15px
padding:20px}
.xsnazzy
h1,
.xsnazzy
h2,
.xsnazzy
p
{margin:0
10px
letter-spacing:1px}
.xsnazzy
h1
{font-size:2.5em
color:#fc0}
.xsnazzy
h2
{font-size:2em
color:#234
border:0}
.xsnazzy
p
{padding-bottom:0.5em
color:#eee}
.xsnazzy
h2
{padding-top:0.5em
padding-left:10px}
.xsnazzy
{background:
transparent
margin:1em}
/*
www.codefans.net
*/
.xsnazzy
em
{display:block
width:0
height:0
color:#d8d8ee
overflow:hidden
border-top:12px
solid
#fff
border-left:12px
dotted
transparent
border-right:12px
dotted
transparent
margin-left:50px}
*
html
.xsnazzy
em
{width:24px
height:12px
w\idth:0
hei\ght:0}
.xsnazzy
span
{display:block
width:0
height:0
color:#fff
overflow:hidden
border-top:10px
solid
#7f7f9c
border-left:10px
dotted
transparent
border-right:10px
dotted
transparent
margin-left:52px
margin-top:-15px}
*
html
.xsnazzy
span
{width:20px
height:10px
w\idth:0
hei\ght:0}
.xb1,
.xb2,
.xb3,
.xb4,
.xb5,
.xb6,
.xb7
{display:block
overflow:hidden
font-size:0}
.xb1,
.xb2,
.xb3,
.xb4,
.xb5,
.xb6
{height:1px}
.xb4,
.xb5,
.xb6,
.xb7
{background:#ccc
border-left:1px
solid
#fff
border-right:1px
solid
#fff}
.xb1
{margin:0
8px
background:#fff}
.xb2
{margin:0
6px
background:#fff}
.xb3
{margin:0
4px
background:#fff}
.xb4
{margin:0
3px
background:#7f7f9c
border-width:0
5px}
.xb5
{margin:0
2px
background:#7f7f9c
border-width:0
4px}
.xb6
{margin:0
2px
background:#7f7f9c
border-width:0
3px}
.xb7
{margin:0
1px
background:#7f7f9c
border-width:0
3px
height:2px}
.xboxcontent
{display:block
background:#7f7f9c
border:3px
solid
#fff
border-width:0
3px}
#picture
{width:600px
height:400px
background:url()
center
top
padding:80px
20px
0
20px
margin:15px}
</style>
<body>
<div
id="container">
<div
class="xsnazzy">
<b
class="xb1"></b><b
class="xb2"></b><b
class="xb3"></b><b
class="xb4"></b><b
class="xb5"></b><b
class="xb6"></b><b
class="xb7"></b>
<div
class="xboxcontent">
<h1>Chunky
Borders</h1>
<h2>3
pixel
rounded
borders
without
images</h2>
<p>/</p>
</div>
<b
class="xb7"></b><b
class="xb6"></b><b
class="xb5"></b><b
class="xb4"></b><b
class="xb3"></b><b
class="xb2"></b><b
class="xb1"></b>
</div>
<div
class="xsnazzy">
<b
class="xb1"></b><b
class="xb2"></b><b
class="xb3"></b><b
class="xb4"></b><b
class="xb5"></b><b
class="xb6"></b><b
class="xb7"></b>
<div
class="xboxcontent">
<p>sdfssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
</div>
<b
class="xb7"></b><b
class="xb6"></b><b
class="xb5"></b><b
class="xb4"></b><b
class="xb3"></b><b
class="xb2"></b><b
class="xb1"></b>
<em></em><span></span>
</div>
</div>
<div
id="picture">
<div
class="xsnazzy">
<b
class="xb1"></b><b
class="xb2"></b><b
class="xb3"></b><b
class="xb4"></b><b
class="xb5"></b><b
class="xb6"></b><b
class="xb7"></b>
<div
class="xboxcontent">
<h1>For
non-IE6
browsers</h1>
<h2>Csfsfsfsdfdsf</h2>
<h1>AND
NOW
FOR
IE6
AS
WELL</h2>
<p>sfsdfsdfsdfsdfdsfsfsdfsdfsf。</p>
</div>
<b
class="xb7"></b><b
class="xb6"></b><b
class="xb5"></b><b
class="xb4"></b><b
class="xb3"></b><b
class="xb2"></b><b
class="xb1"></b>
<em></em><span></span>
</div>
</div>
</body>
</html>
