-
border-bottom
鎖定
border-bottom-style 設置元素下邊框的樣式。
- 外文名
- border-bottom
- 瀏覽器支持
- Firefox Chrome Safari Opera
- 繼承性
- no
- 版 本
- CSS1
border-bottom定義
只有當這個值不是 none 時邊框才可能出現。
繼承性：No
border-bottom使用説明
border-bottom 縮寫屬性設置一個聲明中所有底部邊框屬性。
可以設置的屬性分別（按順序）：border-bottom-width, border-bottom-style,和border-bottom-color.
默認值: | not specified |
|---|---|
繼承: | no |
版本: | |
JavaScript 語法: | object object.style.borderBottom="3px solid blue" |
border-bottom程序註解
border-bottom 屬性是一種複合屬性，用於設置對象的下邊框的寬度、樣式和顏色值。
所有未由 border-bottom 複合屬性設置的單獨邊框屬性都將設置為其默認值。例如，width 的默認值為 medium 。
如果未指定顏色，則使用文本顏色。
border-bottom程序值
一個字符串，用於指定或接收下列一個或多個空格分隔值：
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樣式
可用於 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>
border-bottomwidth
可用於 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程序示例
以下示例使用 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>
- 參考資料
-
- 1. CSS border-bottom 屬性 ．W3Cschool[引用日期2018-04-08]
