DIV边框样式实线点线虚线双线凹槽凸槽
1、无边框样式：这里我们来建一个100px,100px的边框，背景颜色为黄色，没有边框样式，具体的代码如下：
<html>
<head>
<title>CSS边框样式</title>
<style type="text/css">
#contion{
height:100px;
width:100px;
border-style:none;
}
</style>
</head>
<body>
<div id="contion">
我是div
</div>
</body>
</html>
可以看到如下图执行的效果图，没有显示边框所显示的信息。
2、实线：这里给边框设置实线的样式，边框线颜色为红丝，宽度为一个像素具体的代码如下：
<html>
<head>
<title>CSS边框样式</title>
<style type="text/css">
#contion{
height:100px;
width:100px;
border-style:solid;
border-color:red;
border-width:1px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="contion">
我是div
</div>
</body>
</html>
如下图看到了一个红色的框线，实线了实线框线的功能。
3、点线：这里设置div的框线样式为点线，框线的颜色为红色，框线的宽度为3px，具体的代码如下：
<html>
<head>
<title>CSS边框样式</title>
<style type="text/css">
#contion{
height:100px;
width:100px;
border-style:dotted;
border-color:red;
border-width:3px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="contion">
我是div
</div>
</body>
</html>
可以看到如下图的效果。
4、虚线：设置框线样式为虚线，框线颜色为红色，框线宽度为3px，具体的代码如下所示：
<html>
<head>
<title>CSS边框样式</title>
<style type="text/css">
#contion{
height:100px;
width:100px;
border-style:dashed;
border-color:red;
border-width:3px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="contion">
我是div
</div>
</body>
</html>
具体的执行效果如下图所示，框线变成了虚线。
5、双实线：这里我来设置div的框线为双实线，颜色为红色，宽度为三个像素，具体的代码如下：
<html>
<head>
<title>CSS边框样式</title>
<style type="text/css">
#contion{
height:100px;
width:100px;
border-style:double;
border-color:red;
border-width:3px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="contion">
我是div
</div>
</body>
</html>
如下图所示的效果，可以看到框线变成了双实线了。
6、凹槽：这里设置div的框线样式为凹槽，框线的颜色为红色，框线的宽度为10px，具体的代码如下：
<html>
<head>
<title>CSS边框样式</title>
<style type="text/css">
#contion{
height:100px;
width:100px;
border-style:groove;
border-color:red;
border-width:10px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="contion">
我是div
</div>
</body>
</html>
如下图，可以看到现在div的外框像一个相框的样式了。
7、凸槽：设置div的框线的样式为凹槽，框线的颜色为红色，框线的宽度为10px，具体的代码如下：
<html>
<head>
<title>CSS边框样式</title>
<style type="text/css">
#contion{
height:100px;
width:100px;
border-style:ridge;
border-color:red;
border-width:10px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="contion">
我是div
</div>
</body>
</html>
如下图，可以看到外边框凸槽的具体样式了。
