建站
咨詢
售后
建站咨詢
新聞中心
我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、宿遷ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的宿遷網(wǎng)站制作公司
- border-style：設(shè)置邊框的樣式，例如實(shí)線、虛線等；
- border-width：設(shè)置邊框的寬度（厚度）；
- border-color：設(shè)置邊框的顏色；
- border：上面三個(gè)邊框?qū)傩缘目s寫。
1. border-style
border-style 屬性用來設(shè)置元素中所有邊框的樣式，或者單獨(dú)為某個(gè)邊框設(shè)置樣式，其語法格式如下：
border-style: border-top-style border-right-style border-bottom-style border-left-style;
border-style 屬性的可選值如下：
| 值 | 描述 |
|---|---|
| none | 無邊框 |
| hidden | 隱藏邊框，與 "none" 類似 |
| dotted | 定義點(diǎn)狀虛線邊框 |
| dashed | 定義虛線邊框 |
| solid | 定義實(shí)線邊框 |
| double | 定義雙實(shí)線邊框，雙實(shí)線邊框的寬度等于 border-width 的值 |
| groove | 定義 3D 凹槽邊框，其效果取決于 border-color 的值 |
| ridge | 定義 3D 壟狀邊框，其效果取決于 border-color 的值 |
| inset | 定義 3D 嵌入邊框，其效果取決于 border-color 的值 |
| outset | 定義 3D 突出邊框，其效果取決于 border-color 的值 |
| inherit | 從父元素繼承邊框樣式 |
border-style 屬性有多種不同的用法：
- 如果提供全部的四個(gè)參數(shù)，則會按照上、右、下、左的順序分別設(shè)置邊框四個(gè)邊的樣式；
- 如果提供三個(gè)參數(shù)，那么第一個(gè)參數(shù)會作用在上邊框，第二個(gè)參數(shù)會作用在左、右兩個(gè)邊框上，第三個(gè)參數(shù)會作用在下邊框上；
- 如果提供兩個(gè)參數(shù)，那么第一個(gè)參數(shù)會作用在上、下兩個(gè)邊框上，第二個(gè)參數(shù)會作用在左、右兩個(gè)邊框上；
- 如果只提供一個(gè)參數(shù)，這個(gè)參數(shù)將同時(shí)作用在四個(gè)邊框上。
除了可以使用 border-style 屬性設(shè)置元素的邊框樣式外，您還可以使用下面的屬性分別設(shè)置元素上、下、左、右四個(gè)邊框的樣式：
- border-bottom-style：設(shè)置下邊框的樣式；
- border-top-style：設(shè)置上邊框的樣式；
- border-left-style：設(shè)置左邊框的樣式；
- border-right-style：設(shè)置右邊框的樣式。
【示例】使用 border-style 屬性為元素設(shè)置邊框：
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
four
運(yùn)行結(jié)果如下圖所示：
圖：border-style 屬性演示
2. border-width
border-width 屬性用來設(shè)置元素中所有邊框的寬度，或者單獨(dú)為某個(gè)邊框設(shè)置寬度，其語法格式如下：
border-width: border-top-width border-right-width border-bottom-width border-left-width;
border-width 屬性的可選值如下：
| 值 | 描述 |
|---|---|
| thin | 定義較細(xì)的邊框 |
| medium | 默認(rèn)值，定義中等寬度的邊框 |
| thick | 定義較粗的邊框 |
| length | 使用數(shù)值加單位的形式設(shè)置具體的邊框?qū)挾?，例?2px |
| inherit | 從父元素繼承邊框的寬度 |
thin、medium、thick 三個(gè)關(guān)鍵字并沒有固定的值，它們的值取決于瀏覽器，例如在 Chrome 瀏覽器中三個(gè)關(guān)鍵字的值分別為 1px、3px、5px。
同 border-style 屬性相同，border-width 屬性同樣支持多種不同的用法：
- 如果提供全部的四個(gè)參數(shù)，則會按照上、右、下、左的順序分別設(shè)置邊框四個(gè)邊的寬度；
- 如果提供三個(gè)參數(shù)，那么第一個(gè)參數(shù)會作用在上邊框，第二個(gè)參數(shù)會作用在左、右兩個(gè)邊框上，第三個(gè)參數(shù)會作用在下邊框上；
- 如果提供兩個(gè)參數(shù)，那么第一個(gè)參數(shù)會作用在上、下兩個(gè)邊框上，第二個(gè)參數(shù)會作用在左、右兩個(gè)邊框上；
- 如果只提供一個(gè)參數(shù)，這個(gè)參數(shù)將同時(shí)作用在四個(gè)邊框上。
除了可以使用 border-width 屬性設(shè)置元素的邊框?qū)挾韧?，您還可以使用下面的屬性分別設(shè)置元素上、下、左、右四個(gè)邊框的寬度：
- border-bottom-width：設(shè)置下邊框的寬度；
- border-top-width：設(shè)置上邊框的寬度；
- border-left-width：設(shè)置左邊框的寬度；
- border-right-width：設(shè)置右邊框的寬度。
【示例】使用 border-width 設(shè)置邊框的寬度：
one
two
three
four
運(yùn)行結(jié)果如下圖所示：
圖：border-width 屬性演示
3. border-color
border-color 屬性用來設(shè)置元素中所有邊框的顏色，或者單獨(dú)為某個(gè)邊框設(shè)置顏色，其語法格式如下：
border-color: border-top-color border-right-color border-bottom-color border-left-color;
border-color 屬性的可選值如下：
| 值 | 描述 |
|---|---|
| color_name | 使用顏色名稱來設(shè)置邊框的顏色，例如 red |
| hex_number | 使用顏色的十六進(jìn)制值來設(shè)置邊框的顏色，例如 #ff0000 |
| rgb_number | 使用 rgb() 函數(shù)設(shè)置邊框的顏色，例如 rgb(255,0,0) |
| transparent | 默認(rèn)值，設(shè)置邊框顏色為透明 |
| inherit | 從父元素繼承邊框的顏色 |
同 border-style 屬性相同，border-color 屬性同樣支持多種不同的用法：
- 如果提供全部的四個(gè)參數(shù)，則會按照上、右、下、左的順序分別設(shè)置邊框四個(gè)邊的顏色；
- 如果提供三個(gè)參數(shù)，那么第一個(gè)參數(shù)會作用在上邊框，第二個(gè)參數(shù)會作用在左、右兩個(gè)邊框上，第三個(gè)參數(shù)會作用在下邊框上；
- 如果提供兩個(gè)參數(shù)，那么第一個(gè)參數(shù)會作用在上、下兩個(gè)邊框上，第二個(gè)參數(shù)會作用在左、右兩個(gè)邊框上；
- 如果只提供一個(gè)參數(shù)，這個(gè)參數(shù)將同時(shí)作用在四個(gè)邊框上。
除了可以使用 border-color 屬性設(shè)置元素的邊框顏色外，您還可以使用下面的屬性分別設(shè)置元素上、下、左、右四個(gè)邊框的顏色：
- border-bottom-color：設(shè)置下邊框的顏色；
- border-top-color：設(shè)置上邊框的顏色；
- border-left-color：設(shè)置左邊框的顏色；
- border-right-color：設(shè)置右邊框的顏色。
【示例】使用 border-color 設(shè)置邊框的顏色：
one
two
three
運(yùn)行結(jié)果如下圖所示：
圖：border-color 屬性演示
4. border
border 屬性是上面介紹的 border-width、border-style、border-color 三種屬性的簡寫，使用 border 屬性可以同時(shí)定義上述三個(gè)屬性，語法格式如下：
border: border-width border-style border-color;
其中 border-width 用來設(shè)置邊框的寬度；border-style 用來設(shè)置邊框的樣式；border-color 用來設(shè)置邊框的顏色。
【示例】使用 border 屬性為元素設(shè)置邊框：
one
two
three
運(yùn)行結(jié)果如下圖所示：
圖：border 屬性演示
提示：border 屬性的三個(gè)參數(shù)（border-width、border-style、border-color）并不需要遵守固定的順序，將它們的順序打亂也是可以的。另外，也可以省略其中的某個(gè)參數(shù)，例如 border: soild red;，省略的參數(shù)將被設(shè)置為該參數(shù)的默認(rèn)值。
除了可以使用 border 屬性統(tǒng)一設(shè)置邊框的寬度、樣式、顏色外，您還可以使用下面的屬性分別設(shè)置元素上、下、左、右四個(gè)邊框的寬度、樣式、顏色：
- border-bottom：統(tǒng)一設(shè)置下邊框的寬度、樣式、顏色；
- border-top：統(tǒng)一設(shè)置上邊框的寬度、樣式、顏色；
- border-left：統(tǒng)一設(shè)置左邊框的寬度、樣式、顏色；
- border-right：統(tǒng)一設(shè)置右邊框的寬度、樣式、顏色。
通過組合本節(jié)中介紹這些屬性，可以實(shí)現(xiàn)一些意想不到的效果，例如我們可以通過邊框來繪制三角形，示例代碼如下：
運(yùn)行結(jié)果如下圖所示：
圖：使用邊框繪制三角形
本文題目：CSS邊框樣式（border）
URL地址：http://www.fisionsoft.com.cn/article/codhgec.html
