01_05.border属性_border的属性取值为dotted是-优快云博客

本文详细介绍了CSS中边框属性的使用方法，包括border-style、border-color、border-width等属性的单独设置及综合运用，同时讲解了如何通过border属性简化边框设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<link rel="stylesheet" type="text/css" href="style/01_06_border.css">
	</head>
	<body>
		1.设置border-style属性
		<div id="b1"></div>
		2.只设置border-color、border-width属性（tip：如不设置border-type属性，默认为none）
		<div id="b2"></div>
		3.设置border属性，完爆上面的属性
		<div id="b3"></div>
		
		<hr />
		!!border属性有多个同类属性值时，其值遵循上、右、下、左的次序渲染。
		<hr />
		4.设置上、右、下、左边框相同的属性
		<div id="b4"></div>
		5.设置两类属性：（1）上、下边框相同（2）左右边框相同
		<div id="b5"></div>
		6.设置三类属性：（1）上边框（2）左、右边框相同
		<div id="b6"></div>


	</body>
</html>

#b1{
	width: 50px;
	height: 50px;
	background: green;
	border: solid;
}
#b2{
	width: 50px;
	height: 50px;
	background: green;
	border: red 3px;
}
#b3{
	width: 50px;
	height: 50px;
	background: green;
	border: dotted red 5px;
}
/*我是分割线————————————————————————————————————————*/
#b4{
	width: 50px;
	height: 50px;
	background: green;
	border: solid yellow 3px;
}
#b5{
	width: 50px;
	height: 50px;
	background: green;
	border-style: solid  dotted;
	border-color: red blue;
}
#b6{
	width: 50px;
	height: 50px;
	background: green;
	border-style: solid double dotted ;
	border-color: red  yellow blue;
}