css---盒子模型---边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				/*
				 * 使用width来设置盒子内容区的宽度
				 * 使用height来设置盒子内容区的高度
				 * 
				 * width和height只是设置的盒子内容区大小，而不是盒子的整个大小
				 * 盒子可见框的大小由内容区，内边框距和边框共同决定
				 * 
				 */
				width: 100px;
				height: 100px;
				/*
				 * 设置背景颜色
				 */
				background-color:#bfa;
				/*
				 * 为元素设置边框
				 * 	要为一个元素设置边框必须指定三个样式
				 * 			border-width:边框的宽度
				 * 			border-color:边框的颜色
				 * 			boder-style:边框的样式
				 * 			
				 */
				/*
				 * 边框大小
				 * 
				 * 使用border-width可以分别指定边框大小
				 * 			-如果在border-width指定了四个值
				 * 			则四个值会分别设置给上 右 下 左 ，按照顺时针的方向设置
				 * 
				 * 			-如果指定三个值
				 * 			则三个值会分别设置给 上 左右 下 
				 * 
				 * 			-如果两个值
				 * 			上下  左右
				 * 
				 * border-xxx-width
				 * xxx的值可能是top right bottom left专门用来设置指定边的宽度
				 */
				border-width: 10px;
				
				/*
				 * 边框的颜色
				 * 和宽度一样，color也提供四个方向的样式，可以分别指定边框颜色
				 */
				border-color: red;
				/*
				 * 边框样式
				 * 可选值：
				 * 		none:默认值，无边框
				 * 		solid:实线
				 * 		dotted：点状边框
				 * 		dashed:虚线
				 * 		doublie双线
				 * 
				 * style也可以分别指定四个边的边框样式，规则和width一样
				 * 同时他也提供border-xxx-style四个样式，分别设置四个边
				 */
				border-style: double;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			
		</div>
	</body>
</html>
css---盒子模型---边框

猜你喜欢
