用 CSS border 來設計 span 的邊框

CSS span 標示的雖然是一行元素，但我們依然可以透過 border 的屬性來美化他，例如為邊框加上不同的色彩，以下就準備一段簡單的範例給您參考。

CSS  span  border 邊框分別設計上下與左右的顏色

<span style="border-top:2px red solid;border-bottom:2px red solid;border-right:2px blue solid;border-left:2px blue solid;">這裡放你要寫的文字</span>

呈現的效果

這裡放你要寫的文字

我們在 span 標籤中，分別用 border 的四個邊屬性，設計出上下都是紅色，以及左右都是藍色的邊框，四個邊所用的語法分別如下

• border-top：上邊框
• border-right：右邊框
• border-bottom：下邊框
• border-left：左邊框

透過這四個方向，也可以設計出每個邊框不同的顏色與樣式，更詳細的邊框用法可以參考我們所分享的一系列文章。

• CSS border 邊框 
• CSS border-style 邊框樣式

其實還有更多的邊框設計技巧，不過今天暫時就先分享到這邊，有時間再分享囉！