border-bottom-style 設定元素下框線的樣式。
基本介紹
- 外文名：border-bottom
- 瀏覽器支持：Firefox Chrome Safari Opera
- 繼承性：no
- 版本：CSS1
border-bottom定義,border-bottom使用說明,border-bottom註解,border-bottom值,顏色,樣式,width,示例,
border-bottom定義
只有當這個值不是 none 時框線才可能出現。
繼承性：No
border-bottom使用說明
border-bottom 縮寫屬性設定一個聲明中所有底部框線屬性。
可以設定的屬性分別（按順序）：border-bottom-width, border-bottom-style,和border-bottom-color.
如果上述值缺少一個沒有關係，例如border-bottom：#FF0000;是允許的
| 默認值: | not specified |
|---|---|
| 繼承: | no |
| 版本: | |
| JavaScript 語法: | object object.style.borderBottom="3px solid blue" |
border-bottom註解
border-bottom 屬性是一種複合屬性，用於設定對象的下框線的寬度、樣式和顏色值。
所有未由 border-bottom 複合屬性設定的單獨框線屬性都將設定為其默認值。例如，width 的默認值為 medium 。
如果未指定顏色，則使用文本顏色。
border-bottom值
一個字元串，用於指定或接收下列一個或多個空格分隔值：
顏色
可用於 border-bottom-color 屬性的任何顏色值範圍。
一個變數，用於指定或接收一個默認 HTML 顏色名稱或 RGB 值。
該屬性無默認值。該屬性不會被繼承。
註解
某些瀏覽器無法識別顏色名稱，但是所有瀏覽器都應該識別 RGB 顏色值並能夠正確顯示它們。
示例
以下示例使用 border-bottom-color 屬性指定下框線的顏色。本示例通過調用內嵌（全局）樣式表，在 onmouseover 事件發生時將下框線的顏色從 red 更改為 blue ：
<head><style>
td { border-bottom-color: red;
border-width: 0.5cm; border-style: groove; }
.blue { border-bottom-color: blue; }
</style>
</head>
<body>
<table border >
<tr>
<td onmouseover="this.className='blue '" onmouseout="this.className=''">
<img src="sphere.jpg">
</td>
</tr>
</table>
樣式
可用於 border-bottom-style 屬性的任何樣式值範圍。
可能的值屬性 描述 none 定義無框線。
hidden 與 "none" 相同。不過套用於表時除外，對於表，hidden 用於解決框線衝突。
dotted 定義點狀框線。在大多數瀏覽器中呈現為實線。
dashed 定義虛線。在大多數瀏覽器中呈現為實線。
solid 定義實線。
double 定義雙線。雙線的寬度等於 border-width 的值。
groove 定義 3D 凹槽框線。其效果取決於 border-color 的值。
ridge 定義 3D 壟狀框線。其效果取決於 border-color 的值。
inset 定義 3D inset 框線。其效果取決於 border-color 的值。
outset 定義 3D outset 框線。其效果取決於 border-color 的值。
註解
必須設定大於零的 border-width ，以便呈現 border-bottom-style 屬性。
示例
以下示例使用 border-bottom-style 屬性來指定框線樣式。此示例通過調用內嵌樣式表將下框線的樣式更改為 groove ：
<head><style>
td { border-bottom-style: solid; border-width: 0.3cm; }
.change { border-bottom-style: groove; }
</style>
</head>
<body>
<table border >
<tr>
<td onmouseover="this.className='change'" onmouseout="this.className=''">
<img src="sphere.jpg">
</td>
</tr>
</table>
width
可用於 border-bottom-width 屬性的任何寬度值範圍。該屬性的默認值為 medium 。該屬性不會被繼承。
可能的值
一個變數，用於指定或接收下列值之一：
medium 默認值。
thick 大於默認寬度。
thin 小於默認寬度。
寬度 浮點數，後跟絕對單位指示符（ cm 、 mm 、 in 、 pt 或 pc ）或相對單位指示符（ em 、 ex 或 px ）。
示例
以下示例使用 border-bottom-width 屬性指定框線寬度。本示例通過調用內嵌（全局）樣式表，在滑鼠單擊發生時將下框線的寬度更改為 1 厘米：
<head><style>
td { border-bottom-width: 3mm; }
.changeborder 1 { border-bottom-width: 1cm; }
</style>
</head>
<body>
<table border >
<tr>
<td onclick="this.className='changeborder 1'" ondblclick="this.className=''">
<img src="sphere.jpg">
</td>
</tr>
</table>
示例
以下示例使用 border-bottom 屬性來指定複合屬性。通過調用內嵌（全局）樣式表，在 onmouseover 事件發生時更改右框線的屬性：
<head>
<style>
td { border-bottom: 0.3cm cyan dashed; }
.change { border-bottom: 0.1cm yellow solid; }
</style>
</head>
<body>
<table>
<tr>
<td onmouseover="this.className='change'"
onmouseout="this.className=''">
<img src="sphere.jpg"></td>
</tr>
</table>
