利用 CSS border 修改網頁圖片邊框顏色與樣式

CSS 的 border 屬性是用來修改元素邊框的標準語法,早期我們在利用 HTML 設計網頁的時候,常常會需要用到圖片邊框、文字邊框、表格邊框、文字欄位邊框 ... 等等的設計,如果要用 HTML 設計出好看的邊框其實並不容易,甚至有的時候還必須藉由圖片的設計再搭配上 HTML 的網頁元素才會好看,不過我們現在用 CSS 的 border 屬性來設計,就可以大幅度的改善傳統設計上的困難,今天我們就教各位如何用 CSS 的 border 屬性來設計圖片的邊框顏色與樣式,設計概念非常簡單,我們用幾個範例來呈現給各位看看。

CSS border color 屬性設計圖片邊框顏色範例
原始碼: 在新視窗開啟程式碼文字檔
範例的視覺效果

範例準備了兩張圖片,利用 border-color 來設計邊框顏色,一張的邊框設定為藍色(border-color:blue;),另外一張則設為黃色(border-color:yellow),你可以自己決定要用什麼樣的顏色,另外,光是 border-color 是無法呈現出效果的,還需要搭配上 border-width 來控制邊框的粗細以及 border-style 來控制邊框的樣式。

CSS border style屬性設計圖片邊框樣式範例
原始碼: 在新視窗開啟程式碼文字檔
範例的視覺效果

請注意範例中紅色標住的 border-style 屬性,我們透過 border-style 屬性的參數值修改,就可以修改範例圖片的邊框樣式,無論是虛線、點線、雙實線 ... 等特效都可以很輕易的做到,我們的這一篇《css border-style 邊框樣式》有許多特色邊框樣式可以使用。

其實以上的圖片邊框顏色與樣式可以用單一個 border 一次設計完成後,標準語法像是下面的範例這個樣子,參考一下吧!因為最常用的寫法就是這樣。

直接使用 CSS border 屬性設計圖片邊框範例
原始碼: 在新視窗開啟程式碼文字檔
範例的視覺效果

有注意到嗎?這個範例與上面那個範例的效果一模一樣,可是程式碼縮點很多,因為我們利用 border 整合寫法,把三個邊框屬性 border-color、border-width 以及 border-style 整合在一起了,所以可以很快的把要呈現的效果寫出來,這也是相當普遍的一種寫法。

CSS 的 border 可以應用的範圍相當廣泛,如果你想更進一步的了解 CSS border 屬性的更多詳細用法,可以參考這一篇的內容介紹:CSS border 元素邊框設計

延伸閱讀
分享於 2015-03-03