常用的CSS3介紹

walliam 2015-04-28

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 */

相关推荐