实现起来也非常简单，为input添加名为 x-webkit-speech 的属性就行了。

<input type="text" x-webkit-speech />
相关的属性设置：
lang
设置语言种类：
<input type="text" x-webkit-speech lang="zh-CN" />
onwebkitspeechchange
语音输入事件，当发声语音改变时触发：
<input type="text" x-webkit-speech onwebkitspeechchange="foo()" />

x-webkit-grammar
语音输入语法，”builtin:search”值使得语音输入的内容尽量靠近搜索内容，去除多余的字符，例如「的」
<input type="text" x-webkit-speech x-webkit-grammar="builtin:search" />
还有个值：”builtin:translate”看到taobao在用，但目前还不清楚是什么意义，有时间再仔细看看W3C的文档。

测试了下效果，语音识别率还不错，但中英夹杂的时候就很悲剧了，而且该服务需要走google的服务器所以有时响应速度很慢，另外在mac中遇到提示“麦克风无法使用”的情况，猜测可能存在一些硬件兼容性问题。总的来说是趣味性大于实用性；比较期待能在手机浏览器上实现这个功能，可以做一些比较有趣的应用。

相关资料：
http://www.w3.org/TR/capture-api/
http://www.w3.org/TR/xhtml+voice/
http://www.w3.org/2005/Incubator/htmlspeech/2010/10/google-api-draft.html

PS：请使用支持CSS3的浏览器，如Chrome、Firefox3.5+、Safari4+、Opera
文字阴影 text-shadow
text-shadow是最为简单及常用的效果，而且有很多变换，这里列举一些有代表性的：
1.普通：
.text-shadow{ text-shadow:1px 1px 2px #2c5103; color:#60ad0d; }
Here is some text effect

2.3D：
.text-3d{text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
color:#fff; background:#3699f6;
}
Here is some text effect

4.外发光：
.text-light{ text-shadow:0 0 20px #ff6600; color:#fff; background:#333; }
Here is some text effect

5.模糊：
.text-blur{ text-shadow:0 0 10px #fff; color:transparent; background:#333;}
Here is some text effect

6.凹痕：
.text-indent{text-shadow: 0 1px 1px #FFF; color: #717171; background:#d3d3d3;}
Here is some text effect

7.浮雕：
.text-carve{ text-shadow: -1px -1px #fff, 1px 1px #333; color: #CCC; background:#d3d3d3;}
Here is some text effect

结合其他CSS3样式做出的文字效果：
内阴影：
这里用到了背景剪切，想了解更多请看这里 background-clip
.text-inner-shadow{ background: #666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow:rgba(255,255,255,0.5) 0px 3px 3px;}
Here is some text effect

改变文字选取的默认颜色
用到了伪元素 ::selection
p.orange::selection { background:#ff6600; color:#fff;}

用鼠标选取这段文字就可以看到效果，用鼠标选取这段文字就可以看到效果，用鼠标选取这段文字就可以看到效果，用鼠标选取这段文字就可以看到效果。

重叠文字
这里用了个伪类形成重叠的文字，注意伪类中content: attr(title)，直接取的title值。
彩蛋：用红蓝眼镜看的话会有立体效果哦~(文字的颜色是根据自己的一副红蓝眼镜调配的，不知道适不适用其他的，呵呵)
.text-overlap{ position: relative; font: 130px Helvetica, Sans-Serif; letter-spacing: -5px; color: rgba(0,255,240,0.5);}
.text-overlap:after{ content: attr(title); position: absolute; left: 10px; top: 5px; color: rgba(255,6,0,0.5);}

使用的两个CSS3属性：box-shadow、transform，基本语法：
box-shadow

box-shadow:5px 2px 6px #000;
数值从左至右：阴影水平偏移值（正值向右，负值向左）；阴影垂直偏移值（正值向下，负值向上）；阴影模糊值；阴影颜色。

transform
transform的效果很多，这里只用了旋转：

transform: rotate(-3deg)
数值表示旋转的角度，正值为顺时针，负值为逆时针。
因为CSS3还是草案，所以现有浏览器的最新版都是以私有属性来支持transform，需要加上-webkit-、-moz-、-o-、-ms-

具体实现思路：为了突显立体感，要让阴影左右重中间轻，这里使用了::before,::after伪元素，创建并让它们定位在#Demo元素后(z-index:-1)，同时设置阴影，并设置旋转，把思路用图片来表示就是这样：

这就是我们想要的效果了，具体代码看Demo：

一、少用图片

一开始，为了做出用来表示各个城市的每一天的那种渐变效果，我们用了一套相当复杂的 -webkit-gradient，结果发现这会令转译速度变得非常非常慢。-webkit-gradient 的工作方法是构建位图，对于浏览器的转译引擎来说，这和从外部加载图片（例如一张 PNG）是完全一样的。MobileSafari 显示图片速度之慢是出了名的（希望 4.0 对此有所改进），要解决这个问题，基本上只能不用图片和 -webkit-gradient。

我们最终把那些色彩条快用背景上的一个很大的 canvas 元素替代了。当你拖动游标线时，那些条块的颜色会发生变化，只有正在变化的部分才会被重新绘制。用 canvas 时可以在某种程度上复用 -webkit-gradient，比如这样：

// WebKit CSS gradient

-webkit-gradient(linear, left top, right top,

from(#4b4c4d),

color-stop(0.249, #4b4c4d),

color-stop(0.25, #575b5c),

color-stop(0.329, #575b5c),

color-stop(0.33, #6b7071),

color-stop(0.749, #6b7071),

color-stop(0.75, #575b5c),

color-stop(0.909, #575b5c),

color-stop(0.91, #4b4c4d),

to(#4b4c4d)

);

// canvas gradient

var gradient = $(‘canvas’).getContext(“2d”).createLinearGradient(0,0,230,0);

gradient.addColorStop(0,’#4b4c4d’);

gradient.addColorStop(0.249,’#4b4c4d’);

gradient.addColorStop(0.25,’#575b5c’);

gradient.addColorStop(0.329,’#575b5c’);

gradient.addColorStop(0.33,’#6b7071′);

gradient.addColorStop(0.749,’#6b7071′);

gradient.addColorStop(0.75,’#575b5c’);

gradient.addColorStop(0.909,’#575b5c’);

gradient.addColorStop(0.91,’#4b4c4d’);

gradient.addColorStop(1,’#4b4c4d’);

二、不要用 text-shadow 和 box-shadow

这是速度变慢的另外一个重要因素。最好不要用这些 CSS 属性。

三、硬件加速是很新的功能……而且也很多BUG

在 Safari 上，只要使用 -webkit-transform 这个 CSS 属性就可以启用硬件加速了。（opacity 也行，不过缺点上面说过了。）

硬件加速有其局限，例如同时运行的动画数量是有限制的，如果超过了这个限制，动画就会闪烁，有时还会出错。不过如果轻度使用的话，效果会非常棒。

四、尽可能地使用触控事件

触控事件是个好选择，因为传统的 onClick 事件在 iPad 上用来会有点延迟。在 everytimezone.com 的源代码里有些小窍门，教你如何在使用触控事件的同时，也能够支持非触控设备上的浏览器：

var supportsTouch = ‘createTouch’ in document;
element[supportsTouch ? 'ontouchmove' : 'onmousemove'] = function(event){
var pageX = event.pageX;
if (event.touches) pageX = event.touches[0].pageX;
// …
}

五、不要用 opacity

因为某些原因，使用 opacity 这个 CSS 属性有时会干扰硬件加速。如果你感到速度变慢，但又看不出哪里出了问题的话，就检查一下有没有用到 opacity 吧。

六、万事无捷径，请手写 JavaScript 和 CSS

不要依赖框架或是网页标准狂热分子推荐给你的东西。我们这个例子里只有一个高度精简的 HTML 页面，CSS 都写在页面里，没用任何 JavaScript 框架，并尽量利用了目标平台（iPad）的特性，最终的结果就是一个几乎能够瞬间加载的苗条网页，而且缓存做得很好，离线使用也毫不失礼。没错，我们也可以选择用 JavaScript 和 CSS 框架，但有的时候少即多。（记住，各类框架所提供的那些对跨浏览器的支持你并非全都需要。）

// mini-pico-tiny convenience micro-framework, ymmv
function $(id){ return document.getElementById(id); }
function html(id, html){ $(id).innerHTML = html; }
function css(id, style){ $(id).style.cssText += ‘;’+style; }
function anim(id, transform, opacity, dur){
css(id, ‘-webkit-transition:-webkit-transform’+',opacity ‘+(dur||0.5)+’s,’+(dur||0.5)+’s;-webkit-transform:’+transform+’;opacity:’+(1||opacity));
}

七、别用 translate，用 translate3d

使用 -webkit-transform 时，记得用 translate3d(x,y,z) 语法，而不是 translate(x,y)。因为某种原因，后者无法支持硬件加速，至少在 iOS 3.x 上不行（不过在桌面版 Safari 里似乎没问题）。谢谢马提奥·斯宾内利指出这点。（也推荐大家看看他做的 iScroll，里面有很多很棒的代码，也是演示如何为页面在移动版 WebKit 上的速度进行优化的好例子。）

转自apple4.us

先来看看一个HTML5的布局,由于IE无法识别新的语义化标签,所以样式表并没有起作用.

解决的方法就是用js来创建HTML5中新增的标签,因为此代码只提供给IE,所以加上条件注释:

<!–[if IE]>

<script>

(function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header, hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(‘,’),i=e.length;while(i–){document.createElement(e[i])}})()

</script>

<![endif]–>

这时可以看到例子中的样式表生效了,但布局效果却并不是预想的那样(可以对比支持HTML5的浏览器),原因就在于js所创建的元素默认都为行内元素…

所以最后还要为那些结构性的块级标签加上一个样式:

article, aside, dialog, footer, header, section, footer, nav, figure {
display: block;
}

至此IE就可以正常的显示所定义的标签了,但也仅仅是正常显示,类似audio,canvas这些多媒体以及交互式标签的功能是无法实现的.