使用CSS3里的box-shadow属性，我们就可以不使用图片(或额外的标签)来制作阴影效果了(费话，地球人都知道)！！不过单纯给标签定义box-shadow，可能不能完全符合我们的需要，这时伪类就派上用场了(原来这东西还可以这样用)，我们可以使用:befor、:after伪类来处理一些特殊的阴影效果。

.drop-shadow {
   position:relative;  /* 给伪类定位作准备*/
   width:90%;
   height:80px;
   line-height:80px;
   background:#fff;
   border:2px solid #ddd;
   text-align:center;
}
 
.type-1:before,
.type-1:after {
   content:"";  /* 这个是必须的 */
   position:absolute;  /* 绝对定位，调整阴影位置 */
   z-index:-1;  /* 使阴影置于最低层 */
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;  /* 这个看情况设置 */
   /* 加阴影，没什么特别 */
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   /* 旋转阴影，同样没什么特别*/
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}
/* 实现右边的阴影效果，其实还是旋转加定位-_- */
.type-1:after{
   right:10px;
   left:auto; 
   -webkit-transform:rotate(3deg); 
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
}

IE9到目前为止已经发布到beta版本，下面简单概述一下IE9对CSS3的支持情况。

下文所有数据仅供参考，数据仅到IE9 Preview版本，等正式版出来再作更新，如果您需要比较实时权威点的数据，请点击这里查看。

IE9对CSS3的支持情况

CSS3属性	IE9支持情况	之前版本IE支持情况
opacity		None
multiple backgrounds		None
background-clip		None
background-size		None
background-origin		None
text-shadow		—
word-wrap		5-8
writing-mode		5-8
border-image		—
border-radius		None
box-shadow		None
overflow-x		7-8
overflow-y		7-8
multiple columns		—
box-sizing		8
RGBA colors		None
HSL colors		None
HSLA colors		None
text-stroke		—
gradients		—
transforms		—
transitions		—
outline-offset		—
resize		—
@font-face		5.5-8
@media		None
CSS3属性	IE9支持情况	之前版本IE支持情况

HTML5除了标记语意的增强之外，最令人震撼的莫过于它所附属的Javascript APIs。Web Workers 是 HTML5 提供的一个多线程(Multi-Thread)的解决方案，让我们可以把需要大量运算的程序交由Web Workers去做背景执行，如此的好处就是其他的工作仍可以顺利进行。

Web Workes 目前支持的浏览器有：Firefox 3.5+ / Safari 4.0+ / Chrome 5.0+ (IE都不支持，包括目前的IE9测试版)

使用Web Worders时，首先我们需要建立一个Worker实体，并传入用于处理数据的JS路径

var worker = new Worker("worker.js");

在worker.js里定义onmessage事件(前面不要加var)用于处理数据，在这里面我们可以通过postMessage()触发worker.onmessage。需要注意的是worker.js里面无法获取dom对象。

在Webkit浏览器(例如safari,chrom)下，默认input、textarea取得焦点时，边框会自动高亮；textarea会有个大小的控制柄，通过以下两个CSS属性可以屏蔽这两个问题

input {
    /* 屏蔽文本框高亮 */
    outline: none;
}
 
textarea {
    outline: none;
    /* CSS3屏蔽文本框缩放*/
    resize: none;
}

之前在群里某群友提到过空的src属性(例如img标签)，会增加请求。当时以为是.net的机制问题，不过看了这篇文章后Empty-string URLs in HTML，才知道这是浏览器问题。例如下面几种情况，在不同的浏览器，会增加不同的请求数。（PS:如果你不提供src、href这些属性，就不会有这情况，只是W3C验证不通过而已）

1
2
3

<img src="">
<script src="">
<link rel="stylesheet" href="">

img-0img-1img-2img-3script标签link标签

• img    1-2个 增加1个当前页面请求（不包含空的link标签情况下）
      3个以上（含） 增加2个当前页面请求（不包含空的link标签情况下）
  
• link    1个以上（含）增加1个当前页面请求（无视多少空的img，页面只多增加1个请求）
• script    有几个就增加几个当前页面请求

• img    不增加请求
• link    1个以上（含） 增加一个当前页面请求
  
• script    有几个就增加几个当前页面请求

• img    1个以上（含）增加一个当前目录根目录请求（也就是不包含页面名称）
  
• link    不增加请求
• script    不增加请求