常用的CSS3介紹

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

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

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

#mydiv

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

border-radius: 15px;

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

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

打陰影也是現在很流行的做法，就好像女人出街要化妝一樣。基本上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;

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

p[title^=xx]   /* select p with title attribute starting with xx */
p[title$=yy]   /* select p with title attribute ending with yy */
p[title*=zz]  /* select p with title attribute containing zz */

常用的CSS3介紹

關於Okhttp3（二）介紹

CSS 3動畫介紹

css3基礎介紹

常用的CSS3介紹

關於Okhttp3（二）介紹

CSS 3動畫介紹

css3基礎介紹

相關推薦