border-bottom-style 设定元素下框线的样式。
基本介绍
- 外文名：border-bottom
- 浏览器支持：Firefox Chrome Safari Opera
- 继承性：no
- 版本：CSS1
border-bottom定义
只有当这个值不是 none 时框线才可能出现。
在 CSS1 中，HTML 用户代理只需支持 solid 和 none。
继承性：No
border-bottom使用说明
border-bottom 缩写属性设定一个声明中所有底部框线属性。
可以设定的属性分别（按顺序）：border-bottom-width, border-bottom-style,和border-bottom-color.
如果上述值缺少一个没有关係，例如border-bottom：#FF0000;是允许的
| 默认值: | not specified |
|---|---|
| 继承: | no |
| 版本: | CSS1 |
| 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>
