CSS - border-style 属性

border-style 属性允许您选择以下边框样式之一 -

none − 无边框。（相当于边框宽度：0;)
solid − 边框是一条实线。
dotted - 边框是一系列点。
dashed - 边框是一系列短线。
double − 边框是两条实线。
groove - 边框看起来就像是雕刻在页面上的。
ridge - 边框看起来与凹槽相反。
inset - 边框使框看起来像嵌入在页面中。
outset − 边框使框看起来像是从画布中出来的。
hidden - 与none 相同，但在解决表元素的边界冲突方面除外。

您可以使用以下属性单独更改元素的底部、左侧、顶部和右侧边框的样式 -

border-bottom-style - 更改底部边框的样式。
border-top-style - 更改顶部边框的样式。
border-left-style - 更改左边框的样式。
border-right-style - 更改右边框的样式。

可能的值

上面定义的任何值。

适用于

所有 HTML 元素。

DOM 语法

object.style.borderStyle = "Any of the values defined above";

例

以下示例显示了所有这些边框样式 -


<html>
	 	<head>
	 	</head>
	 	<body>
	 	 	 <p style = "border-width:4px; border-style:none;">
	 	 	 	 	This is a border with none width.
	 	 	 </p>
	 	 	 <p style = "border-width:4px; border-style:solid;">
	 	 	 	 	This is a solid border.
	 	 	 </p>
	 	 	 <p style = "border-width:4px; border-style:dashed;">
	 	 	 	 	This is a dashed border.
	 	 	 </p>
	 	 	 <p style = "border-width:4px; border-style:double;">
	 	 	 	 	This is a double border.
	 	 	 </p>
	 	 	 <p style = "border-width:4px; border-style:groove;">
	 	 	 	 	This is a groove border.
	 	 	 </p>
	 	 	 <p style = "border-width:4px; border-style:ridge">
	 	 	 	 	This is a ridge 	border.
	 	 	 </p>
	 	 	 <p style = "border-width:4px; border-style:inset;">
	 	 	 	 	This is a inset border.
	 	 	 </p>
	 	 	 <p style = "border-width:4px; border-style:outset;">
	 	 	 	 	This is a outset border.
	 	 	 </p>
	 	 	 <p style = "border-width:4px; border-style:hidden;">
	 	 	 	 	This is a hidden border.
	 	 	 </p>
	 	 	 <p style = "border-width:4px;
	 	 	 	 	border-top-style:solid;
	 	 	 	 	border-bottom-style:dashed;
	 	 	 	 	border-left-style:groove;
	 	 	 	 	border-right-style:double;">
	 	 	 	 	Four different styles of borders on all the sides of the element.
	 	 	 </p>
	 	</body>
</html>

border-style - 简写

border-style 属性可以有四个值、三个值、两个值或一个值，如以下示例所示：


<html>
	 	<head>
	 	 	 <style type = "text/css">
	 	 	 	 	p.example1 {
	 	 	 	 	 	 border:4px solid;
	 	 	 	 	 	 border-style:dashed double ridge groove;
	 	 	 	 	}
	 	 	 	 	p.example2 {
	 	 	 	 	 	 border:4px solid;
	 	 	 	 	 	 border-style:dashed double ridge;
	 	 	 	 	}
	 	 	 	 	p.example3 {
	 	 	 	 	 	 border:4px solid;
	 	 	 	 	 	 border-style:dashed double ;
	 	 	 	 	}
	 	 	 	 	p.example4 {
	 	 	 	 	 	 border:4px solid;
	 	 	 	 	 	 border-style:dashed;
	 	 	 	 	}
	 	 	 </style>
	 	</head>

	 	<body>
	 	 	 <p class = "example1">
	 	 	 	 	<i>border-style</i> with four different values.
	 	 	 </p>
	 	 	 <p class = "example2">
	 	 	 	 	<i>border-style</i> with three different values.
	 	 	 </p>
	 	 	 <p class = "example3">
	 	 	 	 	<i>border-style</i> with two different values.
	 	 	 </p>
	 	 	 <p class = "example4">
	 	 	 	 	<i>border-style</i> with one value.
	 	 	 </p>
	 	</body>
</html>

打印本页