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。
初始值
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 type
discrete
正规顺序
the unique non-ambiguous order defined by the formal grammar
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属性可以使用一个，两个，三个或四个值来指定。
当指定一个值时，它将在所有四面应用相同的样式。当指定两个值时，第一个样式适用于顶部和底部，第二个样式适用于左侧和右侧。当指定三个值时，第一个样式适用于顶部，第二个适用于左侧和右侧，第三个适用于底部。如果指定了四个值，则样式将按顺序应用于顶部，右侧，底部和左侧（顺时针）。
每个值都是从下面的列表中选择的关键字。
值
none
与隐藏关键字一样, 不显示边框。除非设置了背景图像, 否则边框顶部宽度的计算值将为 0, 即使指定的值是其他东西。在表单元格和边框折叠的情况下, none 值的优先级最低: 如果设置了任何其他冲突边框, 则会显示它。
hidden
与 none 关键字一样, 不显示边框。除非设置了背景图像, 否则边框顶部宽度的计算值将为 0, 即使指定的值是其他东西。在表单元格和边框折叠的情况下, 隐藏值具有最高优先级: 如果设置了任何其他冲突边框, 则不会显示它。
dotted
显示一系列圆点。点的间距不是由规范定义的, 而是特定于实现的。点的半径是计算出的边框顶端宽度的一半。
dashed
显示一系列短方端虚线或线段。这些段的确切大小和长度不是由规范定义的, 而是特定于实现的。
solid
显示单个、直、实线。
double
显示两条直线, 它们相加的像素大小由边框宽度或边框顶端宽度定义。
groove
显示具有雕刻外观的边框。它与山脊相反。
ridge
显示具有拉伸外观的边框。它与凹槽相反。
inset
显示使元素显示为嵌入的边框。这是一开始的反面。当应用于带边框折叠设置为折叠的表单元格时, 此值的行为类似于 groove。
outset
显示使元素显示为浮雕的边框。它与插页相反。当应用于带边框折叠设置为折叠的表单元格时, 此值的行为类似于脊。
正式语法
HTML
| none | hidden | dotted | dashed |
| solid | double | groove | ridge |
| inset | outset |
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;} 输出 规范 Specification
Status
Comment
CSS Backgrounds and Borders Module Level 3The definition of 'border-style' in that specification.
Candidate Recommendation
No change.
CSS Level 2 (Revision 1)The definition of 'border-style' in that specification.
Recommendation
Adds hidden keyword value.
CSS Level 1The definition of 'border-style' in that specification.
Recommendation
Initial definition.
浏览器兼容性 Feature
Chrome
Edge
Firefox (Gecko)
Internet Explorer
Opera
Safari
Basic support
1.0
20 or earlier (12)
1.0 (1.7 or earlier)1
4.0
3.5
1.0
Feature
Android
Edge
Firefox Mobile (Gecko)
IE Mobile
Opera Mobile
Safari Mobile
Basic support
2.6
20 or earlier (12)
1.0 (1.9.2)1
7.0
(Yes)
3.0
在Firefox 50之前，圆角（带border-radius）的边框样式总是呈现为好像border-style被设置为solid一样。这已在Firefox 50中修复。
CSS 中文开发手册