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 2015年7月.
border-bottom 简写属性把下边框的所有属性：border-bottom-color，border-bottom-style 与 border-bottom-width 设置到了一个声明中。这些属性描述了元素的下边框样式。
尝试一下
border-bottom: solid; border-bottom: dashed red; border-bottom: 1rem solid; border-bottom: thick double #32a1ce; border-bottom: 4mm ridge rgba(211, 220, 50, 0.6); <section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section> #example-element { background-color: #eee; color: #8b008b; padding: 0.75em; width: 80%; height: 100px; } 与所有的简记属性相同， 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; 值
形式语法
border-bottom =
<line-width> ||
<line-style> ||
<color>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
示例
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 |
浏览器兼容性
Loading…