border-bottom_在线百科全书查询
border-bottom
border-bottom定义
border-bottom-style 设置元素下边框的样式。
只有当这个值不是 none 时边框才可能出现。
在 CSS1 中，HTML 用户代理只需支持 solid 和 none。
继承性：No
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>
