| 词条 | 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> |
| 随便看 |
百科全书收录4421916条中文百科知识，基本涵盖了大多数领域的百科知识，是一部内容开放、自由的电子版百科全书。