border-style

border-style 该属性是用作规定元素所有边框的样式。

 

语法

border-style: dashed
border-style: dotted dashed
border-style: hidden solid dashed
border-style: none solid dashed none
border-style: inherit
border-style: initial
border-style: unset

值

值描述
none 此关键词表示不显示边框，同hidden类似。
hidden 此关键词表示不显示边框，同none类似。
dotted 此关键词表示显示一系列原点。两点之间的间隔大小，视不同实现而定。圆点半径是border-width计算值的一半。
dashed 此关键词表示显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，由实现而定。
solid 此关键词表示显示为一条实线。
double 此关键词表示显示为一条双实线，宽度是border-width。
groove 此关键词表示显示为有雕刻效果的边框，样式同ridge相反。
ridge 此关键词表示显示有浮雕效果的边框，样式同groove相反。
inset 此关键词表示显示为友陷入效果的边框，样式与outset相反。当它指定到border-collapse的单元格时，会显示为groove的样式。
outset 此关键词表示显示有突出效果的边框，样式与inset相反。当它指定到border-collapse为collapsed的单元格时，会显示为ridge的样式。

例子

HTML 

<div id="red">
</div>

CSS 

#red {
     height: 200px;
     border: 2px red;
     border-style: dotted;
     }

执行结果

参考

相关链接

外部链接


跳至内容顶部