css border 边框属性

边框样式属性border-style用于指定要在网页上显示的边框类型。

语法

border-style: 样式值;

属性值

有一些边框样式值与边框样式属性一起使用来定义边框。

值说明
none它没有定义任何边框。
dotted
用于定义虚线边框(点号)。
dashed
用于定义虚线边框(破折号)。
solid用于定义实心边框。
double
它定义了两个具有相同边框宽度值的边框。
groove它定义了一个 3d 凹槽边框。根据border-color值生成效果。
ridge它定义了一个 3d 脊状边框。根据border-color值生成效果。
inset它定义了一个 3d 嵌入边框。根据border-color值生成效果。
outset它定义了一个 3d 初始边框。根据border-color值生成效果。

多边框定义

当然，一个块级元素有4个边，所以，border-style可以同时设置四个边框不同的样式。其语法为：

border-style: 上边 [右边 下边 左边];

例如：

{borer-style: dashed solid solid solid;}    /*四个值为上、右、下、左*/
/*或*/
P{borer-style: dashed solid solid;}       /*三个值为上、左右、下・/
/*或*/
P{borer-style: dashed solid;}       /*2个值为上下、左右・/

例子

 <!DOCTYPE html>
<html>
<head>
<title>css 边框样式 border-style</title>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">无边框.</p>
<p class="dotted">虚线边框.</p>
<p class="dashed">虚线边框.</p>
<p class="solid">实线边框.</p>
<p class="double">双边框.</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">山脊边框。.</p>
<p class="inset">嵌入边框。.</p>
<p class="outset">初始边框</p>
<p class="hidden">隐藏边框。.</p> </body>
</html>

效果如图所示：

css 边框属性 border

再看一个多边框同时定义的例子：

 <!DOCTYPE html>
<html>
<head>
<title>css 边框样式 border-style 多边框定义</title>
<style>
	p.one{
		border-style: dashed solid solid solid;/*四个值为上、右、下、左*/
	}
	.two{
		border-style: dashed solid solid; /*三个值为上、左右、下*/
	}
	.thre{border-style: dashed solid;}       /*2个值为上下、左右・/
</style>
</head>
<body>
<p class="one">4个值</p>
<p class="two">3个值</p>
<p class="thre">2个值</p>

</body>
</html>
效果如图：

css border-style 边框样式