内容
一.边框
1.边框颜色
border-color 边框颜色(可以设置上边框，如:border-top-color,也可以整体设置，但是要注意顺序)
2.边框粗细
border-width 边框粗细(可以设置上边框，如:border-top-width,也可以整体设置，但是要注意顺序)
2.边框样式
border-style 边框样式(可以设置上边框，如:border-top-style,也可以整体设置，但是要注意顺序)
二.外边距
1.margin 盒子距离浏览器的距离 (可以设置上外边距，如:margin-top,也可以整体设置，但是要注意顺序)
2.居中 margin: 0px auto
三.内边距
1.padding 内容到盒子的距离 (可以设置上内边距，如:padding-top,也可以整体设置，但是要注意顺序)
四.盒子模型的尺寸
尺寸默认：padding+margin+wigth+border
box-sizing 方便计算盒子模型尺寸（默认为content-box，border-box代表随着内容的宽度高度变化而变化）
五.圆角
border-radius 圆角（左上，右上，右下，左下）
/*如果想要一个圆，那么必须满足宽和高一致，圆角取宽度或者高度的二分之一*/
/*如果想要半圆，那么必须满足宽是高的2倍，圆角取宽度的二分之一*/
/*如果想要四分之一圆，那么必须满足宽和高相等，圆角取宽度相等值*/
六.盒子阴影
box-shadow 默认为外阴影，内阴影为inset
box-shadow: 5px -5px 20px black;
例题：
例题一
<html>
<head>
<title>边框颜色</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border:3px pink solid;
/*border-top-color: aqua;
borer-left-color:blue;*/
/*上右下左*/
border-color:greenyellow pink deepskyblue mediumpurple ;
/*边框粗细*/
border-width: 20px;
/*边框样式*/
border-bottom-style: double;
}
</style>
</head>
<body>
<div>
盒子模型
</div>
</body>
</html>
例题二
<html>
<head>
<title></title>
<style type="text/css">
body{
margin: 0px;
}
.main{
border: 1px solid aqua;
width: 300px;
height: 150px;
/*margin-top: 5px;
margin-bottom: 5px;
margin-left: 10px;*/
/*margin: 50px 50px;*/
margin: 0px auto;
}
h1{
background-color: blue;
margin: 0px;
}
.fourth{
background-color: aquamarine;
}
.third{
background-color: plum;
}
.secondmain{
border: 1px solid aqua;
width: 300px;
height: 150px;
}
.fourth,.third{
padding: 15px 30px;
}
</style>
</head>
<body>
<div class="main">
<h1>会员登录</h1>
<div>
<form method="post" action="#">
<div class="third">
<span>用户名</span>
<input type="text" name="username"/>
</div>
<div class="fourth">
<span>密 码</span>
<input type="password" name="userpwd"/>
</div>
</form>
</div>
</div>
<div class="secondmain">
外边距测试
</div>
</body>
</html>
例题三
<!DOCTYPE html>
<html>
<head>
<title>图形</title>
<style type="text/css">
div{
border: 2px pink solid;
width: 200px;
height: 200px;
/* 如果想要一个圆，那么必须满足宽和高一致，圆角取宽度或高度的二分之一*/
border-radius: 50%;
}
.a1{
border: 2px aqua solid;
width: 200px;
height: 100px;
/* 如果想要半圆，那么必须满足宽是高的2倍，圆角取宽度的二分之一*/
border-radius: 100px 100px 0px 0px;
}
.a2{
border: 2px palegreen solid;
width: 100px;
height: 100px;
/* 如果想要四分之一圆，那么必须满足宽和高相等，圆角取宽度相等值*/
border-radius: 0px 0px 100px 0px;
}
</style>
</head>
<body>
<div>
</div>
<div class="a1">
</div>
<div class="a2">
</div>
</body>
</html>
例题四
<!DOCTYPE html>
<html>
<head>
<title>盒子阴影</title>
<style type="text/css">
div{
border: 3px solid aqua;
width: 200px;
height: 200px;
}
div:hover{
box-shadow: 5px -5px 20px pink;
}
</style>
</head>
<body>
<a>
<div class="div01">
</div>
</a>
</body>
</html>
