边框样式 | border-style (Backgrounds & Borders) – CSS 中文开发手册 – Break易站

  CSS 中文开发手册

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

border-style CSS属性是设置线条样式元素边框四边的简写属性。

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

/* vertical | horizontal */
border-style: dotted solid;

/* top | horizontal | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed; 

/* Global values */
border-style: inherit;
border-style: initial;
border-style: unset;

注意：border-style 的默认值是none。这意味着如果你改变border-width和border-color，你将不会看到边界，除非你也改变这个属性以外的东西使之不为none或hidden。

border-top-style：noneborder-right-style：noneborder-bottom-style：noneborder-left-style：none

Applies to all elements. It also applies to [`::first-letter`](::first-letter).   [Inherited](inheritance) no   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

border-bottom-style：具体规定border-left-styleborder-right-style：具体规定border-top-style：具体规定

Animation type discrete   Canonical order the unique non-ambiguous order defined by the formal grammar  

语法

border-style属性可以使用一个，两个，三个或四个值来指定。

当指定一个值时，它将在所有四面应用相同的样式。当指定两个值时，第一个样式适用于顶部和底部，第二个样式适用于左侧和右侧。当指定三个值时，第一个样式适用于顶部，第二个适用于左侧和右侧，第三个适用于底部。如果指定了四个值，则样式将按顺序应用于顶部，右侧，底部和左侧（顺时针）。

每个值都是从下面的列表中选择的关键字。

值

<br-style>描述边框的样式。它可以有以下值：

正式语法

<br-style>{1,4}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-width: 3px;
  background-color: #52E396;
}
tr, td {
  padding: 2px;
}

/* border-style example classes */
.b1 {border-style:none;}
.b2 {border-style:hidden;}
.b3 {border-style:dotted;}
.b4 {border-style:dashed;}
.b5 {border-style:solid;}
.b6 {border-style:double;}
.b7 {border-style:groove;}
.b8 {border-style:ridge;}
.b9 {border-style:inset;}
.b10 {border-style:outset;}

输出

规范

浏览器兼容性

在Firefox 50之前，圆角（带border-radius）的边框样式总是呈现为好像border-style被设置为solid一样。这已在Firefox 50中修复。

  CSS 中文开发手册