CSS span 區域邊框顏色與樣式設計

CSS 的語法可以很輕鬆的修改 span 區域的邊框顏色與邊框樣式，讓預設為沒有顏色且沒有邊框樣式的 span 區域展現出獨特的視覺風格，舉例來說，:D就是一個有邊框風格的 span 區域，要設計 span 的邊框顏色設計與樣式，可以使用 CSS 的 border 屬性一次完成，我們先把 span 與 border 屬性的基本語法熟悉後，再來套用到範例中看看實際效果。

CSS 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 區域邊框顏色與樣式設計範例

This is solid green border.
This is double blue border.
This is dashed red border.

範例的視覺效果

This is solid green border. This is double blue border. This is dashed red border.

在範例中總共有三個不同的 span 區域，我們利用 CSS 的 border 屬性替它們加上了具有特色的邊框效果，第一個邊框是綠色的實線，第二個邊框是藍色的雙實線，第三個 span 則是紅色的虛線邊框，另外，為了讓這些邊框的效果可以更明顯一些，所以我們也將三個邊框的粗細都設為 3px，尤其是藍色的那個雙實線邊框樣式一定要這麼粗才看得出來差異，以上就是利用 CSS 的 border 屬性來設計 span 區域邊框的常見技巧，透過這樣的技巧可以變化出非常多不同的視覺風格。

更多 span 區域設計