[網頁介紹]讓您快速的編寫CSS3 的網站 part 2 [邊框設定]

繼上編 [網頁介紹]讓您快速的編寫CSS3 的網站 介紹了便利程式碼產生器，方便用於網頁程式碼的編寫，今日再介紹一個網站，也是相同的方式來寫程式，也可以使用這個網站來寫網頁！

推薦網頁：http://www.css3.me/

先來看看網站的首頁吧！

這個網站，較上次介紹的簡單，主要用於邊框的變化，依序分別為邊框的圓角(border-radius)，邊框的陰影(box-shadow)，邊框的背景的漸層變化(background gradient)，最後是邊框的透明度(opacity)。

首先，我們在上圖中的選項1(edit the basics)，可出現以下畫面。

第1項為邊框粗細，第2項為邊框顏色，第3項項為背景顏色

再來，我們將邊框粗細調成5px，邊框顏色設定為紅色

將底色設定成灰色

在右側的Preview (預覽區)，就可以直接看到你的剛剛設定的結果了！

再來開始設定第2項圓角的部份

我們將之設置成30px的圓角

就上出現圓角的產生了！

再來設置第3項陰影的部份

將之設定為17px！

陰影就出現了！

再來我們設置第4項的背景漸層功能

我們將之設定為黃色開始色，白色為結束色

就可以產品以上的效果！

最後，調整透明度，有時我們想有點透明度的效果，可以使內容加點層次或效果，，就可使用該功能

我們將透明100調成49，100為不透明，49為半透明，0就為全透明了

修改完後，就可以看到以上的結果了！

再就是如何將設定好的邊框效果套用在網頁上了！

點上面的 GET THE CODE! 的選項

就會跳出以上的對話框，此時就可以出現程式碼了，還可以選用各式瀏覽的的相容選項，一般而言，我都不會去取消，網頁是要給各式各樣的人看的，而瀏覽器就要有相容性，還是全選比較好，再來就將這些程式碼複制貼上到你的CSS標籤內，再預覽，就可以看到剛剛設定的效果了。

這個網頁，可以方便各位在編寫css 碼時，還要自己邊想邊試，他由預視的功能就可以先看到結果，這可結省不少時間，再者，為了符合各式瀏覽器的相容性，你又要相同的文字一直輸入，此網頁可直接輸出，更可減少輸出的錯誤。

在每個選項後面都有 + 的接鈕，是用於細部修改用的，各位有興趣式或有需要，也可以玩看看喔！