CSS表格 CSS外边距

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>

效果：

CSS表格 CSS外边距

CSS边框

微信关注