CSS边框属性

最新推荐文章于 2024-06-12 09:49:17 发布

whyabc

最新推荐文章于 2024-06-12 09:49:17 发布

阅读量1.4k

点赞数

分类专栏： css

css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

边框风格属性(border-style)

这个属性用来设定上下左右边框的风格，它的值如下：

none (没有边框，无论边框宽度设为多大)

dotted (点线式边框)

dashed (虚线式边框)

solid (直线式边框)

double (双线式边框)

groove (槽线式边框)

ridge(脊线式边框)

inset (内嵌效果的边框)

outset (突起效果的边框)

<html> 
	<head> 
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>边框风格属性 border-style </title> 
		<style type="text/css"> 
		.d1{border-style:none;} 
		.d2{border-style:solid} 
		.d3 {border-style:dotted;} 
		.d4 {border-style:dashed;} 
		.d5 {border-style:double;} 
		.d6 {border-style:groove;} 
		.d7 {border-style:ridge;} 
		.d8 {border-style:inset;} 
		.d9 {border-style:outset;}
		</style> 
	</head> 
	<body> 
		<div class="d1">这个div的CSS边框风格(border-style)属性是none。</div> <br/> 
		<div class="d2">这个div的CSS边框风格(border-style)属性是solid。</div> <br/> 
		<div class="d3">这个div的CSS边框风格(border-style)属性是dotted。</div> <br/> 
		<div class="d4">这个div的CSS边框风格(border-style)属性是dashed。</div> <br/> 
		<div class="d5">这个div的CSS边框风格(border-style)属性是double。</div> <br/>
		<div class="d6">这个div的CSS边框风格(border-style)属性是groove。</div> <br/> 
		<div class="d7">这个div的CSS边框风格(border-style)属性是ridge。</div> <br/> 
		<div class="d8">这个div的CSS边框风格(border-style)属性是inset。</div> <br/> 
		<div class="d9">这个div的CSS边框风格(border-style)属性是outset。</div> <br/>
	</body> 
</html>

边框宽度属性(border-width)
这个属性用来设定上下左右边框的宽度，它的值如下：

medium (是缺省值)

thin (比medium细)

thick (比medium粗)
用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。

<html> 
	<head> 
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>边框宽度 border-width</title> 
		<style type="text/css">
			.d1{border-style:solid;}
			.d2{border-width:thin;border-style:solid;}
			.d3{border-width:thick;border-style:solid;}
			.d4{border-width:10px;border-style:solid;}
			.d5{border-width:5mm;border-style:solid;}
		</style>
	</head>
	<body>
		<div class="d1">这个div的CSS边框宽度(border-width)属性缺省值是medium。</div> <br> 
		<div class="d2">这个div的CSS边框宽度(border-width)属性值是thin。</div> <br> 
		<div class="d3">这个div的CSS边框宽度(border-width)属性值是thick。</div> <br> 
		<div class="d4">这个div的CSS边框宽度(border-width)属性值是10px。</div> <br> 
		<div class="d5">这个div的CSS边框宽度(border-width)属性值是5mm。</div><br> 
	</body>
</html>

边框颜色属性(border-color)

<html> 
	<head> 
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>边框颜色 border-color</title> 
		<style type="text/css">
			.d1{border-color:gray;border-style:solid;}
		</style>
	</head>
	<body>
		<div class="d1">这个div的CSS边框宽度(border-width)属性缺省值是medium。</div> <br>
	</body>
</html>

边框属性(border)
这个属性是边框属性的一个快捷的综合写法，它包含border-width, border-style和border-color。

<html> 
	<head> 
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>边框属性 border</title>
		<style type="text/css">
			.d1{border:5px solid gray;}
		</style>
	</head>
	<body>
		<div class="d1">
			这个div的边框属性：边框宽度(border-width)为5px；边框风格(border-style)为直线式；边框颜色为灰色。
		</div>
	</body>
</html>

单边边框属性
上下左右四个边框不但可以统一设定，也可以分开设定。如果上下左右的边框表现方式不一样，可以分别定义上下左右边框，如果一样可以统一使用border属性定义。
设定上边框属性，你可以使用border-top, border-top-width, border-top-style, border-top-color。
设定下边框属性，你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。
设定左边框属性，你可以使用border-left, border-left-width, border-left-style, border-left-color。
设定上边框属性，你可以使用border-right, border-right-width, border-right-style, border-right-color。

<html> 
	<head> 
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>单个边框属性 </title>
		<style type="text/css">
			.d1{border-top:5px solid #FF0000}
			.d2{border-bottom:5px solid #FF0000}
			.d3{border-left:5px solid #FF0000}
			.d4{border-right:5px solid #FF0000}
		</style>
	</head>
	<body>
		<div>单个边框属性：</div>
		<div class="d1">设置上边框用border-top</div>
		<div class="d2">设置下边框用border-bottom</div>
		<div class="d3">设置左边框用border-left</div>
		<div class="d4">设置右边框用border-right</div> 
	</body>
</html>

原文：http://wenku.baidu.com/link?url=7O-zgXFokFif_yLlMLdfREpMp7eXU-Wc0zVVR2WCve3lJkyJA6dz2ozpiHc2BYqLHHBif3hRTxhwTa-goCdEzp7_6gJrrinbnG4dgfUiERi