CSS边框


元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。

属性 描述
border 简写属性,用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

案例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>演示CSS边框属性</title>
<style type="text/css">
	div{
		height:100px;
		/*
		简写属性中的值的数量问题:
			1)如果是有4个值的情况: 上    右  下  左
			2)如果是有2,3个值的情况: 参考对面的值
			3)如果有1个值的情况:全部都是这个值
		*/
	
		/*边框颜色(默认是黑色)*/
		/*border-color: red;*/
		
		/*
		border-top-color:red;
		border-left-color:blue;
		border-bottom-color:green;
		border-right-color:gray;
		*/
		
		/*边框粗细(默认值3px)*/
		/*border-width: 10px;*/
		
		/*
		border-top-width: 5px;
		border-left-width: 10px;
		border-bottom-width: 15px;
		border-right-width: 20px;
		*/
		
		/*边框类型(注意:默认情况下是none,none没有边框) 所以这个属性必须带上才能显示边框*/
		/*border-style: solid;*/
		
		/*
		border-top-style: solid;    
		border-left-style:dashed; 
		border-bottom-style:dotted;   
		border-right-style:double;
		*/
		
	
		border:20px solid red; 
	}
</style>



</head>
<body>
  <div>一点教程网(http://www.yiidian.com)</div>
</body>
</html>

效果: