子標題：透明背景及圓角
先看看以下的測試成品，可按圖放大觀看：
中間白色部份是一個沒有設定寬度的區塊，可以在不同瀏覽器解析度下有不同的寬度。透明的白背景，一般最先想到的是用 opacity 和 IE 的 filter 屬性，帶雙白邊的圓角或許會想到用背景圖片，但在支援 CSS 3 的瀏覽器下，不需使用前述也能有相同的效果，而 XHTML 下的結構性代碼也因 CSS 3 的支援而簡化了不少。
此次測試中，至目前為止暫時只有 firefox 3.0.5、safari 3.1.2和 Chrome 1.0.154.36 支援，其中圓角效果是通過私有屬性來達成；opera 9.63在圓角和透明背景上尚未能支援，但在 Opera 10 中除了 border-radius 外將會支援這種透明背景；IE 能支援 CSS 3 的就更少了。
現在先來看看結構性代碼：
標籤中完全沒有加入任何屬性，如何在四個 p 中分別指定不同字體顏色？在CSS 2.1下會有難度，但在CSS 3下可以做到這樣的設定。由此可以想像的到，做網頁設計時CSS 3 絕對比 CSS 2.1 更顯強大的威力 。
回到正題，來看看樣式表：
帶私有前置的border-radius和background的rgba 就是產生圓角和透明背景效果，另外設定四個 p 的不同字體顏色的橘色字部份是我一開始測試時的寫法，下面則是我最終改寫的語法，顯示結果與上面的寫法相同。
我還沒有弄懂的地方便是為何div~p要在後面加上:not(:first-child)才達到所要的顏色，也沒弄懂為何:not(:first-child) 的括號裡面要用:first-child才見效而不是:last-child。這樣的最終寫法，就是要給自己留下思考的空間。
中間白色部份是一個沒有設定寬度的區塊，可以在不同瀏覽器解析度下有不同的寬度。透明的白背景，一般最先想到的是用 opacity 和 IE 的 filter 屬性，帶雙白邊的圓角或許會想到用背景圖片，但在支援 CSS 3 的瀏覽器下，不需使用前述也能有相同的效果，而 XHTML 下的結構性代碼也因 CSS 3 的支援而簡化了不少。
此次測試中，至目前為止暫時只有 firefox 3.0.5、safari 3.1.2和 Chrome 1.0.154.36 支援，其中圓角效果是通過私有屬性來達成；opera 9.63在圓角和透明背景上尚未能支援，但在 Opera 10 中除了 border-radius 外將會支援這種透明背景；IE 能支援 CSS 3 的就更少了。
現在先來看看結構性代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-tw" lang="zh-tw"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>CSS 3 TEST</title> </head> <body> <div> <h1>睡蓮‧池水間</h1> <h3>CSS 3 TEST</h3> <div> <p>第一段落</p> <p>第二段落</p> <p>第三段落</p> </div> <p>waterlily-lsl.com</p> </div> </body> </html>
標籤中完全沒有加入任何屬性，如何在四個 p 中分別指定不同字體顏色？在CSS 2.1下會有難度，但在CSS 3下可以做到這樣的設定。由此可以想像的到，做網頁設計時CSS 3 絕對比 CSS 2.1 更顯強大的威力 。
回到正題，來看看樣式表：
body{
background:#fff url(waterlilyTest.jpg);
text-align:center;
}
div{
margin:37px 200px;
padding:30px 50px;
border:5px double #fff;
-moz-border-radius:50px;
-webkit-border-radius:50px;
background: rgba(255, 255, 255, 0.55);
}
div div{
margin:0 100px;
padding:20px;
outline:1px dashed #b8739e;
outline-offset:3px;
border:2px inset #b8739e;
-moz-border-radius:0;
-webkit-border-radius:0;
background:rgba(184,115,158, 0.8);
}
h1{
font-size:50px;
color:#8f4b8f;
font-family:'\6A19 \6977 \9AD4';
}
h3{
font-size:28px;
color:#b8739e;
font-family:'Poor Richard';
}
div div p {color:#f5cd9a}
div div p:first-child {color:#cced6a}
div div p:last-child {color:#c1ccff}
div~p{
font-size:17px;
font-weight:300;
font-family:'Comic Sans MS';
color:#888;
}
帶私有前置的border-radius和background的rgba 就是產生圓角和透明背景效果，另外設定四個 p 的不同字體顏色的橘色字部份是我一開始測試時的寫法，下面則是我最終改寫的語法，顯示結果與上面的寫法相同。
p {color:#f5cd9a} p:first-child {color:#cced6a} p:last-child {color:#c1ccff} div~p:not(:first-child){ font-size:17px; font-weight:300; font-family:'Comic Sans MS'; color:#888; }
我還沒有弄懂的地方便是為何div~p要在後面加上:not(:first-child)才達到所要的顏色，也沒弄懂為何:not(:first-child) 的括號裡面要用:first-child才見效而不是:last-child。這樣的最終寫法，就是要給自己留下思考的空間。
我的 CSS 3 測試手記
好漂亮、好犀利啊～！
