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

    CSS属性 border-color 是一个用于设置元素四个边框颜色的快捷属性: border-top-color, border-right-color, border-bottom-color, border-left-color。

    示例

    /* border-color: color; 单值语法 */ 
    border-color: red;
    
    /* border-color: vertical horizontal; 双值语法*/
    border-color: red #f015ca;
    
    /* border-color: top horizontal bottom; 三值语法 */
    border-color: red yellow green;
    
    /* border-color: top right bottom left; 四值语法 */
    border-color: red yellow green blue;
    
    border-color: inherit
    

    浏览器支持

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

    语法

    border-color:color| horizontal| vertical| top| bottom| right| left| inherit

    取值:

    • color:使用<color>来表示四个边框的颜色,仅用于单值语法。
    • horizontal:使用<color>来表示水平(左边框和右边框)边框的颜色,仅用于双值语法。
    • vertical:使用<color>来表示垂直(上边框和下边框)边框的颜色,仅用于双值或三值语法。
    • top:使用<color>来表示上边框的颜色,仅用于三值或四值语法。
    • bottom:使用<color>来表示下边框的颜色,仅用于三值或四值语法。
    • right:使用<color>来表示右边框的颜色,仅用于四值语法。
    • left:使用<color>来表示左边框的颜色,仅用于四值语法。
    • inherit:这是一个关键词,用于指示四边的颜色值均继承自父元素的计算值。
    初始值
    适用于所有元素,也包括::first-letter
    继承性
    动画性
    计算值指定值

    实例

    #justone {
      border-color: red;
    }
    
    #horzvert {
      border-color: gold red;
    }
    
    #topvertbott {
      border-color: red cyan gold;
    }
    
    #trbl {
      border-color: red cyan black gold;
    }
    
    div {
      border: solid 0.3em;
      width: auto;
      margin: 0.5em;
      padding: 0.5em;
    }
    
    ul {
      margin: 0;
      list-style: none;
    }
    
    
    <div id="justone">
      <p><code>border-color: red;</code> is equivalent to</p>
      <ul><li><code>border-top-color: red;</code></li>
        <li><code>border-right-color: red;</code></li>
        <li><code>border-bottom-color: red;</code></li>
        <li><code>border-left-color: red;</code></li>
      </ul>
    </div>
    <div id="horzvert">
      <p><code>border-color: gold red;</code> is equivalent to</p>
      <ul><li><code>border-top-color: gold;</code></li>
        <li><code>border-right-color: red;</code></li>
        <li><code>border-bottom-color: gold;</code></li>
        <li><code>border-left-color: red;</code></li>
      </ul>
    </div>
    <div id="topvertbott">
      <p><code>border-color: red cyan gold;</code> is equivalent to</p>
      <ul><li><code>border-top-color: red;</code></li>
        <li><code>border-right-color: cyan;</code></li>
        <li><code>border-bottom-color: gold;</code></li>
        <li><code>border-left-color: cyan;</code></li>
      </ul>
    </div>
    <div id="trbl">
      <p><code>border-color: cyan black gold;</code> is equivalent to</p>
      <ul><li><code>border-top-color: red;</code></li>
        <li><code>border-right-color: cyan;</code></li>
        <li><code>border-bottom-color: black;</code></li>
        <li><code>border-left-color: gold;</code></li>
      </ul>
    </div>
    

    上篇:border-style

    下篇:border-top