CSS 的語法可以很輕鬆的修改 span 區域的邊框顏色與邊框樣式，讓預設為沒有顏色且沒有邊框樣式的
span 區域展現出獨特的視覺風格，舉例來說，
:D就是一個有邊框風格的
span 區域，要設計
span 的邊框顏色設計與樣式，可以使用
CSS 的
border 屬性一次完成，我們先把 span 與
border 屬性的基本語法熟悉後，再來套用到範例中看看實際效果。
CSS span 區域標籤語法<span style="樣式">要標示的內容</span>
CSS 設計師可以很輕易的透過
span 標籤內的 style 來設計樣式，待會兒要用的
border 屬性就是要放在 style 內，關於
span 的詳細用法請參閱：
CSS span 標籤用法介紹。
CSS border 邊框屬性語法border: 粗細 顏色 樣式;
上述的
border 屬性是一次就包含了邊框的粗細、顏色以及樣式三種效果，所以這三個參數必須分開設定，
CSS 允許網頁設計師採用各種效果分別用不同的屬性來設計，例如粗細用
border-width、顏色用
border-color、樣式用
border-style 來設計，不過我們這裡用簡化的寫法來介紹，以免太過複雜，關於
border 屬性的詳細用法請參閱：
CSS border 邊框。
CSS span 區域邊框顏色與樣式設計範例<span style="border:3px green solid;">This is solid green border.</span>
<span style="border:3px blue double;">This is double blue border.</span>
<span style="border:3px red dashed;">This is dashed red border.</span>
範例的視覺效果
This is solid green border.This is double blue border.This is dashed red border.
在範例中總共有三個不同的
span 區域，我們利用
CSS 的
border 屬性替它們加上了具有特色的邊框效果，第一個邊框是綠色的實線，第二個邊框是藍色的雙實線，第三個
span 則是紅色的虛線邊框，另外，為了讓這些邊框的效果可以更明顯一些，所以我們也將三個邊框的粗細都設為 3px，尤其是藍色的那個雙實線邊框樣式一定要這麼粗才看得出來差異，以上就是利用
CSS 的
border 屬性來設計
span 區域邊框的常見技巧，透過這樣的技巧可以變化出非常多不同的視覺風格。
CSS span 區域背景顏色設計
CSS span 區域標籤可以用來輕易的將網頁內容特定的部分標示起來並設計出不同的區域效果，例如改變文字的大小、顏色、樣式、字型 ... 等，都是可以的，同時
span 區域也可以擁有自己的背景顏色，網頁設計師只需要採用
CSSbackground-color 屬性就能輕易的修改
span 區域的背景顏色，我們先來看看
span 區域與
background-color 屬性的基本語法，再套用到範例中看實際的效果。
CSS span 區域標籤語法<span style="樣式設計">要修改的內容</span>
詳細用法：
CSS span 標籤用法介紹。
CSS background-color 屬性與法background-color: 顏色值;
詳細用法：
CSS background-color 背景顏色有了以上兩個基本的語法之後，我們就能將它們結合在一起來修改
span 的背景顏色，請看範例。
CSS span 區域背景顏色設計範例<span style="background-color:blue;margin-right:5px;">藍色的背景顏色</span>
<span style="background-color:red;margin-right:5px;">紅色的背景顏色</span>
<span style="background-color:orange;margin-right:5px;">橘色的背景顏色</span>
範例的實際效果
藍色的背景顏色紅色的背景顏色橘色的背景顏色
範例中組共有三個不同的
span 組，分別透過
CSS 的
background-color 來將背景顏色調整為藍色、紅色以及橘色，從範例的實際效果可以看到相當明顯的差異，這就是修改
span 背景顏色的常用技巧。
替 CSS span 區域增加陰影效果
替 CSS span 區域增加陰影效果需要使用 CSS3 的
box-shadow 屬性，這是
CSS3 新增的功能，也是標準的＂盒子＂陰影效果屬性，設計師可以很輕鬆的運用
box-shadow 屬性的各項參數，例如陰影的偏位方向、擴散範圍以及顏色，來替 span 區域設計出各式各樣不同風格的陰影效果，現在
box-shadow 屬性已經受到幾乎所有主流的瀏覽器所支持，詳細的語法規則也相當容易。
CSS3 的 box-shadow 屬性語法規則box-shadow:inset offset-x offset-y blur-radius spread-radius 陰影顏色;
你可以看到 box-shadow 有 6 個參數可以設定，每個參數的功能都是設定一項陰影的效果，非常重要，我們在《
CSS3 box-shadow》篇中有詳細的使用介紹，請自行參閱。
替 CSS span 區域增加陰影效果應用範例<span style="box-shadow:1px 1px 3px gray;margin-right:8px;">這是灰色的陰影效果</span>
<span style="box-shadow:1px 1px 3px red;margin-right:8px;">這是紅色的陰影效果</span>
<span style="box-shadow:1px 1px 3px blue;">這是藍色的陰影效果</span>
範例的實際效果
這是灰色的陰影效果這是紅色的陰影效果這是藍色的陰影效果
在本範例中，我們總共準備了三個不同的
span 區域，分別替它們加入不同的陰影效果，主要差異在於顏色的不同，其它的參數設定都一樣，如果要有更多陰影變化，就修改其它的參數即可，你可以從範例的實際效果看到灰色、紅色以及藍色的
span 陰影效果非常明顯，此即為非常基本的
CSS3box-shadow 屬性套用到
span 增加陰影效果的技巧。
CSS3 text-shadow 文字陰影效果
CSS3 text-shadow 用來設計文字陰影效果，通常我們會用在網頁標題上，增加視覺效果，另外也可以用在一些藝術字型的設計，讓你不需要透過
GIMP 或 Photoshop 這類繪圖軟體也可以輕鬆做出 shadow 效果。text-shadow 獲得幾乎所有主流的瀏覽器支援，但在 IE9 及更早版本的 IE 瀏覽器並不支援 text-shadow 屬性，大部分主流瀏覽器如 FireFox、Chrome、Safari、Opera 等都有支援 CSS3 text-shadow 屬性。
CSS3 text-shadow 基本語法 text-shadow: X 軸方向的陰影 Y 軸方向的陰影 模糊範圍 陰影顏色;
CSS3 text-shadow 的屬性共分為 X 軸方向的陰影、Y 軸方向的陰影、模糊範圍、陰影顏色這四個部分，每個部分由半形空白隔開，意思是可以分別設定文字在水平與垂直兩個方向的陰影，第三個＂模糊範圍＂是選填項 目，但沒有設定的話，可能會比較不柔和，請自行比較看看哪個輸出結果比較符合網頁風格，前三個參數的單位為長度，可以是 em、px 等，最後一個陰影顏色也是必填項目。
CSS3 text-shadow 範例<font style="text-shadow:3px 3px 3px #cccccc;">CSS3 shadow 陰影效果</font>
呈現結果如：
CSS3 shadow 陰影效果範 例中我們將 X 軸、Y 軸以及陰影範圍都設定為 3px，顏色採用淺灰色（色碼為 #cccccc）所製做出來的柔和陰影效果，是不是比較有立體感了呢？這個特效在 IE9 以及更早版本的 IE 瀏覽器看不到。假設我們將第三個屬性取消掉，就會顯得比較粗糙一點，就像下面這樣。
<font style="text-shadow:3px 3px #cccccc;">CSS3 shadow 陰影效果</font>
呈現結果如：
CSS3 shadow 陰影效果CSS3 text-shadow 範例二：暈染效果<font style="text-shadow:0px 0px 15px #FF37FD;">CSS3 shadow 暈染陰影效果</font>
呈現結果如：
CSS3 shadow 暈染陰影效果我 們將 X 軸與 Y 軸方向陰影都先設為零，陰影範圍控制在 15px，顏色選擇淡紫色（色碼為 #FF37FD）就可以創造出這樣的暈染文字陰影效果，以往這樣的效果都必須在繪圖軟體先處理好，現在有了 CSS3 text-shadow 真的很方便，不過 text-shadow 僅能處理文字，若要處理區塊的陰影效果，請使用
CSS3 box-shadow 屬性。
CSS3 shadow 陰影效果
CSS3 shadow 可以用來創造出陰影效果，適用於某區塊（如
DIV、
span、
img）或文字的陰影設計，省去傳統必須用圖檔先製作好陰影效果的工作，直接透過 CSS3 shadow 來完成，常用的兩種陰影效果可以分為
box-shadow 與
text-shadow，其中
box-shadow 用來設計單一區塊的陰影效果，而文字的陰影效果則透過
text-shadow 來設定，只不過目前的 IE 最新版本 IE8 並不支援 CSS3 shadow 特效，必須使用其他方式讓 IE 瀏覽器呈現效果，FireFox、Chrome、Safari、Opera 等瀏覽器是有支援的，以下提供兩個簡單範例參考。
一、CSS3 box-shadow 範例<span style="box-shadow:3px 3px 5px 6px #cccccc;">CSS shadow 區塊陰影效果</span>
用 box-show 對 span 做陰影呈現效果如
CSS shadow 區塊陰影效果CSS3 box-shadow 還可以對圖片或
DIV 區塊製作陰影效果，請參考：
CSS3 box-shadow。
二、CSS3 text-shadow 範例<font style="text-shadow:2px 2px 2px #A8FF55;">CSS3 shadow 文字陰影效果</font>
用 text-shadow 對文字做陰影呈現效果如
CSS3 shadow 文字陰影效果由此範例中，我們運用
text-shadow 技巧將文字增加了粉綠色的陰影效果，兩個範例比較後，可以看出對區塊做陰影的方式與對文字做陰影的方式雖然類似，但實際上並不相同，請參考詳細文字陰影解說：
CSS3 text-shadow。
onload 事件
onload 事件用來設計當網頁載入完成後，觸發特定的 JavaScript 函式去執行特定的工作，常見的應用如網頁載入後顯示對話視窗、載入框架、顯示歡迎光臨、跳出第二層網頁 ... 等，雖然這樣的技巧相當好用，但使用過多可能會造成網頁載入完成時間延長，影響網頁的使用體驗。onload 通常有兩種寫法，第一種是直接寫在 HTML 的開頭 <body> 標籤內，這樣的寫法不需要 JavaScript 帶出即可運作，第二種則是透過 JavaScript 的 window object 物件方式，帶出 onload 的功能，兩者同樣都是要用來觸發 JavaScript 的特定 function 去執行任務。
onload 基本語法onload = " 要觸發的 javascript function"
引號內的觸發 function 是必須的，畢竟 onload 是個
event，其最大功用還是要告訴特定的 function 開始工作，以下分為兩種常見的寫法範例，由於 onload 會在網頁載入完成後立即執行，所以本頁的範例輸出都已經是執行完的結果。
範例一、直接將 onload 寫在 <body> 標籤裡<script language="javascript">
function ShowHello(){
document.getElementById('ShowBox').innerHTML='哈囉';
}
</script>
<body onload="ShowHello()">
<span id="ShowBox"></span>
</body>
範例輸出結果
哈囉
範 例直接把 onload 事件寫在 <body> 標籤內，當網頁載入到 <body> 標籤時，瀏覽器就會知道待會兒載入完成要觸發 ShowHello 函式，到此時 onload 的工作其實就算完成，顯示＂哈囉＂的工作是 ShowHello 函式會去完成。這裡稍微說明一下 ShowHello 函式內的運作，首先透過
DOM 的
document.getElementById 取得要顯示文字的 span 區域，然後透過
innerHTML 將字串＂哈囉＂寫入，即大功告成。
