zoukankan      html  css  js  c++  java
  • 边框样式属性 | border-top-style (Backgrounds & Borders)

  •   CSS 中文开发手册

    边框样式属性 | border-top-style (Backgrounds & Borders) - CSS 中文开发手册

    border-top-style CSS属性设置元素的顶部的线条样式border。

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

    注意:规范没有定义不同风格的边界如何连接角落。

    返回值

    none

    适用元素

    all elements. It also applies to ::first-letter.

    是否是继承属性

    no

    适用媒体

    visual

    计算值

    as specified

    Animation type

    discrete

    正规顺序

    the unique non-ambiguous order defined by the formal grammar

    语法

    该border-top-style属性被指定为从border-style属性中选择的单个关键字。

    正式语法

    <br-style>where 
    <br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | 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>

    CSS

    /* Define look of the table */
    table {
      border- 2px;
      background-color: #52E385;
    }
    tr, td {
      padding: 3px;
    }
    
    /* border-top-style example classes */
    .b1 {border-top-style: none;}
    .b2 {border-top-style: hidden;}
    .b3 {border-top-style: dotted;}
    .b4 {border-top-style: dashed;}
    .b5 {border-top-style: solid;}
    .b6 {border-top-style: double;}
    .b7 {border-top-style: groove;}
    .b8 {border-top-style: ridge;}
    .b9 {border-top-style: inset;}
    .b10 {border-top-style: outset;}

    结果

    规范

    Specification

    Status

    Comment

    CSS Backgrounds and Borders Module Level 3The definition of 'border-top-style' in that specification.

    Candidate Recommendation

    No significant change.

    CSS Level 2 (Revision 1)The definition of 'border-top-style' in that specification.

    Recommendation

    Initial definition.

    浏览器兼容性

    Feature

    Chrome

    Edge

    Firefox

    Internet Explorer

    Opera

    Safari

    Basic Support

    1

    (Yes)

    11

    5.5

    9.2

    1

    Feature

    Android

    Chrome for Android

    Edge mobile

    Firefox for Android

    IE mobile

    Opera Android

    iOS Safari

    Basic Support

    ?

    ?

    (Yes)

    (Yes)1

    ?

    ?

    ?

    在Firefox 50之前,圆角(带border-radius)的边框样式总是呈现为好像border-top-style被设定成solid一样。这已在Firefox 50中修复。

  •   CSS 中文开发手册
    转载请保留页面地址:https://www.breakyizhan.com/css/32359.html
  • 相关阅读:
    14_java之变量|参数|返回值|修饰符
    NYOJ 202 红黑树 (二叉树)
    NYOJ 138 找球号(二) (哈希)
    NYOJ 136 等式 (哈希)
    NYOJ 133 子序列 (离散化)
    NYOJ 129 树的判定 (并查集)
    NYOJ 117 求逆序数 (树状数组)
    NYOJ 93 汉诺塔 (数学)
    HDU 2050 折线分割平面 (数学)
    天梯赛L2-008 最长对称子串 (字符串处理)
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13233918.html
Copyright © 2011-2022 走看看