zoukankan      html  css  js  c++  java
  • 边框底部样式 | border-bottom-style (Backgrounds & Borders)

  •   CSS 中文开发手册

    边框底部样式 | border-bottom-style (Backgrounds & Borders) - CSS 中文开发手册

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

    /* 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;

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

    初始值

    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-bottom-style属性被指定为从border-style属性中选择的单个关键字。

    正式语法

    <br-style>where 
    <br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

    示例

    这是一个表格,显示了所有border-bottom-style的值

    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- 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;}

    结果

    规范

    Specification

    Status

    Comment

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

    Candidate Recommendation

    No significant change.

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

    Recommendation

    Initial definition.

    浏览器兼容性

    Feature

    Chrome

    Edge

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari

    Basic support

    1.0

    (Yes)

    1.01

    5.5

    9.2

    1.0

    Feature

    Android

    Edge

    Firefox Mobile (Gecko)

    IE Phone

    Opera Mobile

    Safari Mobile

    Basic support

    (Yes)

    (Yes)

    (Yes)1

    7.0

    (Yes)

    (Yes)

    在Firefox 50之前,圆角(带border-radius)的边框样式总是呈现为如同border-bottom-style被设置为 solid一样。这已在Firefox 50中修复。

    另见

    其他样式相关的边框属性:border-left-style,border-right-style,border-top-style,和border-style。另外底部边框相关的属性:border-bottom,border-bottom-color,和border-bottom-width。

  •   CSS 中文开发手册
    转载请保留页面地址:https://www.breakyizhan.com/css/32353.html
  • 相关阅读:
    保护你的网站数字证书私钥
    Web安全防御从WAF到应用网关
    微信公众号【网络安全生命周期】部分文章目录
    一个SQL Injection漏洞在SDL流程中的闯关历险记
    Web Vulnerability Scanner 破解
    Web安全实战演练1-4
    转:WebCruiser Web Vulnerability Scanner 3 测评
    WAVSEP在Linux系统中部署时常见错误
    css属性操作
    前端基础CSS规则
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13233909.html
Copyright © 2011-2022 走看看