CSS-边框底部样式 | border-bottom-style

  1. 云栖社区>
  2. 博客>
  3. 正文

CSS-边框底部样式 | border-bottom-style

阿德明网络 2018-09-13 10:55:28 浏览928
展开阅读全文

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

结果

规范

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-styleborder-right-styleborder-top-style,和border-style
  • 另外底部边框相关的属性:border-bottomborder-bottom-color,和border-bottom-width

网友评论

登录后评论
0/500
评论
阿德明网络
+ 关注