CSS的边框，这个是一个比较简单的样式，我们就直接通过一个案例来解释吧：
相关代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>borde style</title>
<style>
.box{
width: auto;
height: auto;
}
.small_box{
width: 200px;
height: 30px;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
}
#green_solid,#green_dotted,#green_dashed,#green_double,#green_groove,#green_ridge,#green_inset,#green_outset{
width: 300px;
height: 300px;
padding: 20px,0px,20px,50px;
margin-right: 20px;
margin-bottom: 30px;
float: left;
position: relative;
}/*注意，上面使用了代码重复的解决办法*/
#green_solid{
border: 5px solid green;
}
#green_dotted{
border: 5px dotted green;
}
#green_dashed{
border: 5px dashed green;
}
#green_double{
border: 5px double green;
}
#green_groove{
border: 5px groove greenyellow;
}
#green_ridge{
border: 5px ridge greenyellow;
}
#green_inset{
border: 5px inset greenyellow;
}
#green_outset{
border: 5px outset greenyellow;
}
</style>
</head>
<body>
<div class="box">
<div id="green_solid">
<div class="small_box">
box with a solid border
</div>
</div>
<div id="green_dotted">
<div class="small_box">
box with a dotted border
</div>
</div>
<div id="green_dashed">
<div class="small_box">
box with a dashed border
</div>
</div>
<div id="green_double">
<div class="small_box">
box with a double border
</div>
</div>
</div>
<div class="box">
<div id="green_groove">
<div class="small_box">
box with a groove border
</div>
</div>
<div id="green_ridge">
<div class="small_box">
box with a ridge border
</div>
</div>
<div id="green_inset">
<div class="small_box">
box with a inset border
</div>
</div>
<div id="green_outset">
<div class="small_box">
box with a outset border
</div>
</div>
</div>
</body>
</html>
上面的案例，解释了几种常见的边框样式。（注意，因为本人界面的问题，将border宽度值设置的很小，可能不够明显，大家可以选择对其放大查看长啥样子。）
注：以上材料内容均来自：http://ife.baidu.com/%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E7%8F%AD/css/styleCv.html
标签：box,outset,greenyellow,边框,green,5px,border,CSS From： https://www.cnblogs.com/TomHard/p/16726381.html