MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

概述

border-style 是一个 CSS 简写属性,用来设定元素所有边框的样式。

注意:border-style 默认值是 none,这意味着如果您只修改 border-widthborder-color 是不会出现边框的,除非您还将这个属性修改到 nonehidden 以外的值。

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

语法

/* Apply to all four sides */
border-style: dashed;

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

取值

<br-style>
关键字用于描述边框样式。它可以有以下取值:
none
 
和关键字 hidden 类似,不显示边框。在这种情况下,如果没有设定背景图片,border-width 计算后的值将是 0,即使先前已经指定过它的值。在单元格边框重叠情况下,none 值优先级最低,意味着如果存在其他的重叠边框,则会显示为那个边框。
hidden
 
和关键字 none 类似,不显示边框。在这种情况下,如果没有设定背景图片,border-width 计算后的值将是 0,即使先前已经指定过它的值。在单元格边框重叠情况下,hidden 值优先级最高,意味着如果存在其他的重叠边框,边框不会显示。
dotted
 
显示为一系列圆点。标准中没有定义两点之间的间隔大小,视不同实现而定。圆点半径是 border-width 计算值的一半。
dashed
 
显示为一系列短的方形虚线。标准中没有定义线段的长度和大小,视不同实现而定。
solid
 
显示为一条实线。
double
 
显示为一条双实线,宽度是 border-width
groove
 
显示为有雕刻效果的边框,样式与 ridge 相反。
ridge
 
显示为有浮雕效果的边框,样式与 groove 相反。
inset
 
显示为有陷入效果的边框,样式与 outset 相反。当它指定到 border-collapsecollapsed 的单元格时,会显示为 groove 的样式。
outset
 

显示为有突出效果的边框,样式与 inset 相反。当它指定到 border-collapse 为 collapsed 的单元格时,会显示为 ridge 的样式。

正式语法

<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

/* 定义表格外观 */
table {
    border-width: 3px;
    background-color: #52E396;
}
tr, td {
    padding: 2px;
}

/* border-style 示例 */
.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 3
border-style
Candidate Recommendation No change
CSS Level 2 (Revision 1)
border-style
Recommendation Added the 2-, 3- and 4-value syntaxes
CSS Level 1
border-style
Recommendation  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.6 1.0 (1.9.2) 7.0 (Yes) 3.0

另请参阅

文档标签和贡献者

 此页面的贡献者: liuzeyafzy, Sebastianz, Breezewish
 最后编辑者: liuzeyafzy,