border-bottom
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
border-bottom 简写属性把下边框的所有属性:border-bottom-color
,border-bottom-style
与 border-bottom-width
设置到了一个声明中。这些属性描述了元素的下边框样式。
尝试一下
与所有的简记属性相同, border-bottom
定义了它所有可以定义的属性,即使他们并没有被显式地定义。它把所有未被显式定义的参数都设置为了默认值,这意味着这些值将被定义为:
css
border-bottom-style: dotted;
border-bottom: thick green;
它和以下的代码是等价的:
css
border-bottom-style: dotted;
border-bottom: none thick green;
顺便一提,在 border-bottom
之前定义的 border-bottom-style
的值因此被忽略了。由于 border-bottom-style
并没有默认值,未被定义的 border-style
参数的值将被设置为 none
,也就是无底边框。
语法
css
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;
值
形式语法
示例
html
<div>This box has a border on the bottom side.</div>
css
div {
border-bottom: 4px dashed blue;
background-color: gold;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
}
规范
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # border-shorthands |
浏览器兼容性
BCD tables only load in the browser