CSS選擇器

Pattern	Meaning	Described in section
*	任何標籤	Universal selector
E	元素E的標籤	Type selectors
E F	選擇E的後代標籤F	Descendant selectors
E > F	選擇E的子標籤F(白話:選擇E的孩子，向下一代)	Child selectors
E:first-child	選擇E的第一個孩子	The :first-child pseudo-class
E:link E:visited	:link連結前，:visited連結後	The link pseudo-classes
E:active E:hover E:focus	動態標籤	The dynamic pseudo-classes
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).	The :lang() pseudo-class
E + F	E的相鄰標籤F(等級為兄弟姊妹)	Adjacent selectors
E[foo]	標籤屬性有foo	Attribute selectors
E[foo="warning"]	標籤屬性foo的value=warning	Attribute selectors
E[foo~="warning"]	標籤屬性foo的value=有warning類似的值	Attribute selectors
E[lang|="en"]	Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".	Attribute selectors
DIV.warning	class=warning	Class selectors
E#myid	id=myid	ID selectors

CSS透明

原圖

IE專用.....style="alpha(opacity=50");"

FF,GOOGLE適用style="opacity: 0.5;"

CSS3 漸層功能

CSS漸層功能太方便拉 對我這種不愛用圖檔的人來說真是一大樂事阿

CSS語法:

-moz-linear-gradient(顏色漸成開始位置,開始顏色,結束顏色) /*Firefox Linear gradients*/
-webkit-gradient(linear,開始位置,結束位置,from(開始顏色),to(結束顏色)) /*Safari, Chrome Linear gradients*/
個人比較喜歡FF的寫法精簡，但其實兩者都挺容易上手。

趕快來看看效果如何:

左to右
background:-moz-linear-gradient(left, #003300, #66CC66) ;/*FF3.0*/
background: -webkit-gradient(linear, left center, right center, from(#003300), to(#66CC66)); /*Google*/

上to下
background:-moz-linear-gradient(top, #003300, #66CC66) ;/*FF3.0*/
background: -webkit-gradient(linear,center top,center bottom, from(#003300), to(#66CC66)); /*Google*/

左斜to右斜
background:-moz-linear-gradient(left top 300deg, #003300, #66CC66) ;/*FF3.0*/
background:-webkit-gradient(linear, left top, right bottom, from(#003300), to(#66CC66)); /*Google*/

CSS3圓角 陰影 功能

CSS圓弧設計對我來說真是太方便了，本人由於太懶，都不太愛做圖片，廢話不多說來已場示範八

-moz-border-radius: 10px;/*Firefox使用*/
-webkit-border-radius: 10px;/*Google使用*/

-moz-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-webkit-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/

再加上陰影 感覺更有質感

-moz-border-radius: 10px;/*Firefox 圓角*/
-moz-box-shadow: 5px 5px #818181;/*Firefox 陰影*/
-webkit-border-radius: 10px;/*Google 圓角*/
-webkit-box-shadow: 5px 5px #818181;/*Google 陰影*/

-moz-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-moz-box-shadow: 5px 5px #818181;/*Firefox 陰影 直 橫 模糊 顏色*/
-webkit-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-webkit-box-shadow: 5px 5px #818181;/*Google 陰影 陰影 直 橫 模糊 顏色*/

陰影方向可以自由調整

-moz-border-radius: 10px;/*Firefox 圓角*/
-moz-box-shadow: 5px 5px #818181;/*Firefox 陰影*/
-webkit-border-radius: 10px;/*Google 圓角*/
-webkit-box-shadow: 5px 5px #818181;/*Google 陰影*/

-moz-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-moz-box-shadow: 5px -5px 7px #818181;/*Firefox 陰影 直 橫 模糊 顏色*/
-webkit-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-webkit-box-shadow: 5px -5px 7px #818181;/*Google 陰影 陰影 直 橫 模糊 顏色*/

目前很遺憾IE 並未支援，大家只好忍耐，但聽說IE9會全面支援W3C希望可以統一，對開發者而言可是一大福音。
以上參考圓角範例:CSS Library