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

CSS 的語法可以很輕鬆的修改 span 區域的邊框顏色與邊框樣式,讓預設為沒有顏色且沒有邊框樣式的 span 區域展現出獨特的視覺風格,舉例來說,:D就是一個有邊框風格的 span 區域,要設計 span 的邊框顏色設計與樣式,可以使用 CSSborder 屬性一次完成,我們先把 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 區域,我們利用 CSSborder 屬性替它們加上了具有特色的邊框效果,第一個邊框是綠色的實線,第二個邊框是藍色的雙實線,第三個 span 則是紅色的虛線邊框,另外,為了讓這些邊框的效果可以更明顯一些,所以我們也將三個邊框的粗細都設為 3px,尤其是藍色的那個雙實線邊框樣式一定要這麼粗才看得出來差異,以上就是利用 CSSborder 屬性來設計 span 區域邊框的常見技巧,透過這樣的技巧可以變化出非常多不同的視覺風格。

更多 span 區域設計
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012