abstract：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box {width: 200px;height: 200px;border: 2px soli
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
border: 2px solid lightcoral;
}
.box1 {
width: 200px;
height: 200px;
border-top: 1px dotted red;
border-right: 1px dashed #ff6500;
border-bottom: 1px solid rgb(255,254,0);
border-left: 1px double lightblue;
margin-top: 20px;
}
.box2 {
width: 200px;
height: 200px;
border: 20px solid blue;
border-radius: 10px;
border-image: url(static/images/2.png);
margin-top: 20px;
}
.box3 {
width: 200px;
height: 200px;
border: 1px solid green;
border-radius: 50%;
box-shadow: 5px 10px 10px #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
<!-- css边框样式和颜色
css中用border来指定一个元素的边框样式和颜色，
语法如：border: 1px(边框的粗细) solid（边框线条类型） red（边框的颜色）;
一、border-style值：
1. none: 默认无边框
2. solid: 定义实线边界
3. double: 定义两个边界
4. dotted: 定义一个点线框
5. dashed: 定义一个虚线框
6. groove: 定义3D沟槽边界。效果取决于边界的颜色值
7. ridge: 定义3D脊边界，效果取决于边界的颜色值
8. inset: 定义一个3D嵌入边框，效果取决于边界的颜色值
9. outset: 定义一个3D突出边框。效果取决于边界的颜色值
二、边框的宽度
1. 指定长度值：比如2px或 0.1em
2. 使用3个关键字之一，它们分别是thin ,medium(默认值) ，thick.
三、边框的颜色（有三种指定颜色的方法）
1. name － 指定颜色的名称，如“red”
2. RGB －指定颜色的RGB值，如：rgb(255,255,255)
3. Hex -指定16进制颜色值，如："#ff6500"
四、单独设置边框的各边
1. 边框左边： border-left
2. 边框上边： border-top
3. 边框右边： border-right
4. 边框下边： border-bottom
五、css3新增边框样式
1. 边框圆角： border-radius 如： border-radius: 5px; border-radius: 50%;
2. css3盒阴影： box-shadow 如：box-shadow: 10px 10px 5px red;
3. css3边界图片： border-image -->
Correcting teacher：天蓬老师Correction time：2019-02-03 15:18:41
Teacher's summary：边框的四条条的样式简写也非常的重要, 抽空学习一下