• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • border-bottom

    border-bottom 简写属性把下边框的所有属性:border-bottom-colorborder-bottom-styleborder-bottom-width设置到了一个声明中。这些属性描述了元素的下边框样式。

    border-bottom的三个简记属性可以以任意顺序排列,并且它们中的任意一个都可以被省略。

    与所有的简记属性相同,border-bottom定义了它所有可以定义的属性,即使他们并没有被显式地定义。它把所有未被显式定义的参数都设置为了默认值,这意味着这些值将被定义为:

    border-bottom-style: dotted;
    border-bottom: thick green;
    

    它和以下的代码是等价的:

    border-bottom-style: dotted;
    border-bottom: none thick green;
    

    顺便一提,在border-bottom之前定义的border-bottom-style的值因此被忽略了。由于border-bottom-style并没有默认值,未被定义的border-style参数的值将被设置为none,也就是无底边框。

    示例

    border-bottom: 1px;
    border-bottom: 2px dotted;
    border-bottom: medium dashed blue;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持border-bottom

    语法

    border-bottom:border-bottom-width| border-bottom-style| border-bottom-color
    • 如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
    • 对应的脚本特性为borderBottom

    取值

    初始值
    适用于所有元素,也包含::first-letter
    继承性
    动画性
    计算值

    例子

    border-bottom: solid;
    border-bottom: dashed red;
    border-bottom: 1rem solid;
    border-bottom: thick double #32a1ce;
    border-bottom: 4mm ridge rgb(170, 50, 220, .6);
    
    div {
      border-bottom: 4px dashed blue;
      background-color: gold;
      height: 100px;
      width: 100px;
      font-weight: bold;
      text-align: center;
    }
    
    <div>
      This box has a border on the bottom side.
    </div>