CSS
背景和边框 | Backgrounds & Borders

边框样式 | border-style

border-style

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-widthborder-color,你将不会看到边界,除非你也改变这个属性以外的东西使之不为nonehidden

初始值as each of the properties of the shorthand: border-top-style: none border-right-style: none border-bottom-style: none border-left-style: none
适用元素all elements. It also applies to ::first-letter.
是否是继承属性no
适用媒体visual
计算值as each of the properties of the shorthand: border-bottom-style: as specified border-left-style: as specified border-right-style: as specified border-top-style: as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

  • border-top-stylenone

  • border-right-stylenone

  • border-bottom-stylenone

  • border-left-stylenone

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-style

  • border-right-style:具体规定

  • border-top-style:具体规定

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

语法

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

  • 当指定一个值时,它将在所有四面应用相同的样式。

  • 当指定两个值时,第一个样式适用于顶部和底部,第二个样式适用于左侧和右侧

  • 当指定三个值时,第一个样式适用于顶部,第二个适用于左侧和右侧,第三个适用于底部

  • 如果指定了四个值,则样式将按顺序应用于顶部右侧底部左侧(顺时针)。

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

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

none与隐藏关键字一样, 不显示边框。除非设置了背景图像, 否则边框顶部宽度的计算值将为 0, 即使指定的值是其他东西。在表单元格和边框折叠的情况下, none 值的优先级最低: 如果设置了任何其他冲突边框, 则会显示它。
hidden与 none 关键字一样, 不显示边框。除非设置了背景图像, 否则边框顶部宽度的计算值将为 0, 即使指定的值是其他东西。在表单元格和边框折叠的情况下, 隐藏值具有最高优先级: 如果设置了任何其他冲突边框, 则不会显示它。
dotted显示一系列圆点。点的间距不是由规范定义的, 而是特定于实现的。点的半径是计算出的边框顶端宽度的一半。
dashed显示一系列短方端虚线或线段。这些段的确切大小和长度不是由规范定义的, 而是特定于实现的。
solid显示单个、直、实线。
double显示两条直线, 它们相加的像素大小由边框宽度或边框顶端宽度定义。
groove显示具有雕刻外观的边框。它与山脊相反。
ridge显示具有拉伸外观的边框。它与凹槽相反。
inset显示使元素显示为嵌入的边框。这是一开始的反面。当应用于带边框折叠设置为折叠的表单元格时, 此值的行为类似于 groove。
outset显示使元素显示为浮雕的边框。它与插页相反。当应用于带边框折叠设置为折叠的表单元格时, 此值的行为类似于脊。

正式语法

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

输出

规范

SpecificationStatusComment
CSS Backgrounds and Borders Module Level 3The definition of 'border-style' in that specification.Candidate RecommendationNo change.
CSS Level 2 (Revision 1)The definition of 'border-style' in that specification.RecommendationAdds hidden keyword value.
CSS Level 1The definition of 'border-style' in that specification.RecommendationInitial definition.

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.020 or earlier (12)1.0 (1.7 or earlier)14.03.51.0

FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.620 or earlier (12)1.0 (1.9.2)17.0(Yes)3.0

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