<css 八>border

最新推荐文章于 2016-04-22 23:34:48 发布

原创最新推荐文章于 2016-04-22 23:34:48 发布 · 298 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

css 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了网页设计中边框的基本术语及常用属性设置方法，包括边框的颜色、宽度和样式等，并通过实例展示了如何使用CSS来定义不同方向上的边框。

边框基本术语：

element : 元素。

padding : 元素或内容和边框的边距。
border : 边框，元素内容周围的线条。
margin : 外边距，和网页边角的距离。

边框常用内容：

border-color/style/width ：
	设置边框的属性、颜色、样式	
border-bottom-color/style/width： 
	设置边框的底部属性、颜色、样式
border-left-color/style/width：
	设置左边框的属性、颜色、样式
border-right-color/style/width：
	设置右边框的属性、颜色、样式
border-top-color/style/width：
	设置边框顶部的属性、颜色、样式

实例：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		p {
			常使用到的设置：
				border:1px;
				border-color:red;
				border-width:80px;
				border-style:solid;
			简写：
				border: 1px red 80px solid;
			borfer-left设置(简写):
				border-left:1px red 80px solid;
			borfer-right设置(简写):
				border-left:1px red 80px solid;	
			borfer-top设置(简写):
				border-top:1px red 80px solid;	
			borfer-bottom设置(简写):
				border-top:1px red 80px solid;	
		}
	</style>
</head>
<body>
	<p><b>这是一行字。</b></p><br />
</body>
</html>

注：其中数字后面的单位可以是：px、em、cx、%

关于border-style，具体效果：