在 HTML 中, 要設定框線, 可以說只能用 TABLE 這一組標籤了, 雖然它有一些進階的屬性, 可以設定框線的變化, 但終究不是所有的變化都能實作出來, 而且也不是很直覺化, 但 CSS 的框線屬性則可提供了非常多的變化性, 主要為
1.可對四方任何一個邊線框做獨立的框線設定
2.對任何一個框線, 皆可設定粗細、線條樣式、顏色
雖說仍有可能某些特殊的效果無法實作出來, 但大部份的狀況用 CSS 實作都能滿足, 比起 HTML 靈活許多, 我們先來看看有那些屬性跟框線有關
border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color
border-top
border-right
border-bottom
border-left
border-width
border-style
border-color
border
在前四組中, 我們可以發現到, 其實是分別對四個方位的框線設定粗細(寬度)、樣式、顏色
而第五組則是以方位的角度, 來將某方位中粗細、樣式、顏色三個屬性, 集在一個方位屬性上, 一次做完設定
第六組則是以粗細、樣式、顏色等角度, 來一次對四個方位做設定
框線粗細設定
先來看看粗細的語法
在屬性上的"方位", 即是指 top、right、bottom、left 這四個方位
粗細值即是指可以用 CSS 各長度單位來設定框線的粗細
thin：較細的線
medium：中等的線
thick：較粗的線
thin、medium、thick 這三個值, 在各瀏覽器中實作的粗細不一定一樣, 例如我的測試結果, 在 IE 中分別相當於 2px 4px 6px, 但在 Firefox 中就相當於 1px 3px 5px, 所以在使用時要特別注意
一般我都是直接給固定的粗細值
例如
註：上面有用到了 border-style 這個框線樣式的屬性, 這是因為不搭配這個屬性的話, 框線無法呈現, 至於 border-style 的語法, 我們下面會再說明
上面有提到了, 我們可以依粗細的角度來一次設定四個邊的框線粗細, 其語法就是下面這樣
粗細值跟上面設定單一邊的一樣, 可以用 thin、medium、thick 這三個值, 也可以用其他 CSS 長度單來表示
而 {1,4} 是表示可以指定一個到四個值, 用空格隔開, 用來設定一邊到四邊的粗細, 也就是可以有下面四種語法
當設定四個值時, 即是表示這些粗細值是依序為 上右下左 等方位的粗細值, 方位順序的記法是由上方開始, 依順時鐘方向走, 即會得到 上右下左 的方位順序
當設定三個值時, 即是少了最後 [左方] 的粗細值, 此時即表示要跟它的對稱邊, 也就是 [右方] 的值一樣, 故第二個值就變成是在設定 [左右] 兩邊的粗細
當設定二個值時, 即是又少了 [下方] 的粗細值, 同理, 它就表示要跟 [上方] 的值一樣, 故第一個值就變成是在設定 [上下] 兩邊的粗細
當只設定一個值時, 也一樣同理表示四個邊要使用同一個粗細值
例如
這種 {1,4} 的概念在其他的屬性中也會使用到
框線樣式設定
接下來我們來看看框線樣式的語法
none 是代表不要有框線, 這個框線樣式的預設值即是 none, 故上面要試框線粗細時, 才要配合設定框線的樣式
dotted 是點狀的線條
dashed 是虛線
solid 是單線
double 則是雙線
groove 是溝形線
ridge 是山形線
inset 是凹陷框(像個輸入格)
outset 是浮凸框(像個按鈕)
同樣的, 也可以用框線樣式的角度來一次設定四個邊的樣式, 語法如下
執行下面的範例, 可以幫助了解各種樣式的長相
這裡我們可以看到, 有些樣式, 其實必須框線粗細大一點才看得出效果, 例如 double, 若粗細值設為 1px, 那麼看起來就跟 solid 沒兩樣了
框線顏色設定
框線顏色的語法如下
transparent 是表示框線要設為透明的
而顏色值則可用我們之前提過的任何一種顏色值的寫法
預設值跟前景色一樣
同樣也可以一次設定四個邊的顏色, 這法如下
例如
一次設定粗細、樣式、顏色
上面有提到了可以用方位的角度來一次做完粗細、樣式、顏色等設定, 其語法如下
粗細、樣式、顏色這三個值的順序不限, 用空格隔開, 也可以不寫任何一個值, 表示採用預設值, 但實務上一般也頂多只會省略顏色而已, 因為顏色預設值是前景色, 一般會跟底色不一樣, 還看得見框, 但其他兩個的預設值都是不要有框的值, 所以應該不太會去省略它們
下面是個範例
若是四邊的框線, 都要設成同一種格式, 那麼就可以用下面這個語法來同時對四個方位的框一次設定好粗細、樣式、顏色
例如
--gs--
{CSS基礎教學}{HTML 框線}{顏色}
1.可對四方任何一個邊線框做獨立的框線設定
2.對任何一個框線, 皆可設定粗細、線條樣式、顏色
雖說仍有可能某些特殊的效果無法實作出來, 但大部份的狀況用 CSS 實作都能滿足, 比起 HTML 靈活許多, 我們先來看看有那些屬性跟框線有關
border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color
border-top
border-right
border-bottom
border-left
border-width
border-style
border-color
border
在前四組中, 我們可以發現到, 其實是分別對四個方位的框線設定粗細(寬度)、樣式、顏色
而第五組則是以方位的角度, 來將某方位中粗細、樣式、顏色三個屬性, 集在一個方位屬性上, 一次做完設定
第六組則是以粗細、樣式、顏色等角度, 來一次對四個方位做設定
框線粗細設定
先來看看粗細的語法
在屬性上的"方位", 即是指 top、right、bottom、left 這四個方位
粗細值即是指可以用 CSS 各長度單位來設定框線的粗細
thin：較細的線
medium：中等的線
thick：較粗的線
thin、medium、thick 這三個值, 在各瀏覽器中實作的粗細不一定一樣, 例如我的測試結果, 在 IE 中分別相當於 2px 4px 6px, 但在 Firefox 中就相當於 1px 3px 5px, 所以在使用時要特別注意
一般我都是直接給固定的粗細值
例如
註：上面有用到了 border-style 這個框線樣式的屬性, 這是因為不搭配這個屬性的話, 框線無法呈現, 至於 border-style 的語法, 我們下面會再說明
上面有提到了, 我們可以依粗細的角度來一次設定四個邊的框線粗細, 其語法就是下面這樣
粗細值跟上面設定單一邊的一樣, 可以用 thin、medium、thick 這三個值, 也可以用其他 CSS 長度單來表示
而 {1,4} 是表示可以指定一個到四個值, 用空格隔開, 用來設定一邊到四邊的粗細, 也就是可以有下面四種語法
當設定四個值時, 即是表示這些粗細值是依序為 上右下左 等方位的粗細值, 方位順序的記法是由上方開始, 依順時鐘方向走, 即會得到 上右下左 的方位順序
當設定三個值時, 即是少了最後 [左方] 的粗細值, 此時即表示要跟它的對稱邊, 也就是 [右方] 的值一樣, 故第二個值就變成是在設定 [左右] 兩邊的粗細
當設定二個值時, 即是又少了 [下方] 的粗細值, 同理, 它就表示要跟 [上方] 的值一樣, 故第一個值就變成是在設定 [上下] 兩邊的粗細
當只設定一個值時, 也一樣同理表示四個邊要使用同一個粗細值
例如
這種 {1,4} 的概念在其他的屬性中也會使用到
框線樣式設定
接下來我們來看看框線樣式的語法
none 是代表不要有框線, 這個框線樣式的預設值即是 none, 故上面要試框線粗細時, 才要配合設定框線的樣式
dotted 是點狀的線條
dashed 是虛線
solid 是單線
double 則是雙線
groove 是溝形線
ridge 是山形線
inset 是凹陷框(像個輸入格)
outset 是浮凸框(像個按鈕)
同樣的, 也可以用框線樣式的角度來一次設定四個邊的樣式, 語法如下
執行下面的範例, 可以幫助了解各種樣式的長相
這裡我們可以看到, 有些樣式, 其實必須框線粗細大一點才看得出效果, 例如 double, 若粗細值設為 1px, 那麼看起來就跟 solid 沒兩樣了
框線顏色設定
框線顏色的語法如下
transparent 是表示框線要設為透明的
而顏色值則可用我們之前提過的任何一種顏色值的寫法
預設值跟前景色一樣
同樣也可以一次設定四個邊的顏色, 這法如下
例如
一次設定粗細、樣式、顏色
上面有提到了可以用方位的角度來一次做完粗細、樣式、顏色等設定, 其語法如下
粗細、樣式、顏色這三個值的順序不限, 用空格隔開, 也可以不寫任何一個值, 表示採用預設值, 但實務上一般也頂多只會省略顏色而已, 因為顏色預設值是前景色, 一般會跟底色不一樣, 還看得見框, 但其他兩個的預設值都是不要有框的值, 所以應該不太會去省略它們
下面是個範例
若是四邊的框線, 都要設成同一種格式, 那麼就可以用下面這個語法來同時對四個方位的框一次設定好粗細、樣式、顏色
例如
--gs--
{CSS基礎教學}{HTML 框線}{顏色}
沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。
0 意見:
張貼留言
廣告訊息會被我刪除