• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • border-bottom-color

    border-bottom-color属性设置一个元素底部边框的颜色。应当指出,在多数情况下,CSS 简写属性border-colorborder-bottom更方便实用。

    示例

    /* Keyword values */
    border-bottom-style: none;
    border-bottom-style: hidden;
    border-bottom-style: dotted;
    border-bottom-style: dashed;
    border-bottom-style: solid;
    border-bottom-style: double;
    border-bottom-style: groove;
    border-bottom-style: ridge;
    border-bottom-style: inset;
    border-bottom-style: outset;
    
    /* Global values */
    border-bottom-style: inherit;
    border-bottom-style: initial;
    border-bottom-style: unset;
    

    浏览器支持

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

    语法

    border-bottom-color:<color>| inherit
    • 如果border-width等于0,本属性将失去作用。
    • 对应的脚本特性为borderBottomStyle

    取值

    • <color>:一个描绘底边的颜色的CSS<color>值。
    • inherit:一个代表父元素底边颜色的关键字(可能和border-bottom-color默认值不同)
    默认值currentColor
    适用于所有元素,也适合::first-letter
    继承性
    动画性
    计算值颜色值

    例子

    <div class="mybox">
      <p>this is a box with a border around it.
         note which side of the box is
         <span class="redtext">red</span>.</p>
    </div>
    
    .mybox {
      border: solid 0.3em gold;
      border-bottom-color: red;
      width: auto;
    }
    
    .redtext {
      color: red;
    }
    
    /* Define look of the table */
    table {
      border-width: 3px;
      background-color: #52E385;
    }
    tr, td {
      padding: 3px;
    }
    
    /* border-bottom-style example classes */
    .b1 {border-bottom-style: none;}
    .b2 {border-bottom-style: hidden;}
    .b3 {border-bottom-style: dotted;}
    .b4 {border-bottom-style: dashed;}
    .b5 {border-bottom-style: solid;}
    .b6 {border-bottom-style: double;}
    .b7 {border-bottom-style: groove;}
    .b8 {border-bottom-style: ridge;}
    .b9 {border-bottom-style: inset;}
    .b10 {border-bottom-style: outset;}
    
    /HTML
    <table>
      <tr>
        <td class="b1">none</td>
        <td class="b2">hidden</td>
        <td class="b3">dotted</td>
        <td class="b4">dashed</td>
      </tr>
      <tr>
        <td class="b5">solid</td>
        <td class="b6">double</td>
        <td class="b7">groove</td>
        <td class="b8">ridge</td>
      </tr>
      <tr>
        <td class="b9">inset</td>
        <td class="b10">outset</td>
      </tr>
    </table>
    

    上篇:border-bottom-style

    下篇:box-shadow