常用的CSS3介紹

1. Border-radius

Border-radius 應該是css3最常用的功能了。以前要做round corner真的有點費力，而且你還得用各個browser去test下有沒問題，費時失事。有了border-radius就不用再煩了。

雖然舊版browser也不可能顯示round corner了，可是正因為你知道，所以也就省了看的時間了！可以肯定新的browser看起來都大同小異了，而且不用自己加圖，轉顏色也就方便得多了。再說用新browser的人肯定是會更多的，所以情況也不會變壞。

圓角的設定就這樣一句，支持css3的browser就可以看明白了。

#myDiv {
border-radius: 15px;
}

再保險一點的做法，就是加上webkit或moz過渡時期用的-moz-border-radius和-webkit-border-radius。

border-radius: 15px;
-moz-border-radius: 3px; /* 舊firefox 也許明白 */
-webkit-border-radius: 3px; /* 舊webkit browser也許明白 */

2. Box-shadow

打陰影也是現在很流行的做法，就好像女人出街要化妝一樣。基本上IE9就支持box-shadow了，所以IE9 render的網頁，有時會比以前的IE靚很多，當然也有例外（網頁沒有對針IE9做修改）。

Box-shadow一次食6個parameter: inset?, horizontal offset, vertical offset, optional blur distance, optional spread distance, color。

例如：

box-shadow:15px 15px;
box-shadow:inset 10px 10px 10px 10px #000;

box-shadow:inset 10px 10px 10px 10px #000;
border-radius: 15px;

3. CSS 3 Selectors

會用css的都知道在css語法中，你首先就要指定你接下來的一堆css會用在那裡。以前可以用class(.)或id(#)去select目標，現在css3支持用attribute來select dom 物件了。

p[title^=xx]  {color:blue} /* select p with title attribute starting with xx */
p[title$=yy]  {color:blue} /* select p with title attribute ending with yy */
p[title*=zz] {color:blue} /* select p with title attribute containing zz */