CSS参考手册
背景和边框 | Backgrounds & Borders
边框样式 | 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-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
:none
-
border-right-style
:none
-
border-bottom-style
:none
-
border-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-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;}
输出
规范
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中修复。
背景和边框 | Backgrounds & Borders相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。