border属性：在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。
语法：border： border-width | border-style | border-color;
border-width：边框宽度。可以指定长度值。如1px，1em（单位为px，pt，em等）。或者使用关键字medium（默认），thick，thin。
border-top-width：设置元素上边框宽度
border-right-width：设置元素右边框宽度
border-bottom-width：设置元素下边框宽度
border-left-width：设置元素左边框宽度
border-style：边框样式。
border-top-style：设置元素上边框样式
border-right-style：设置元素右边框样式
border-bottom-style：设置元素下边框样式
border-left-style：设置元素左边框样式
属性值有：
none：无边框。
hidden：隐藏边框。对于表，hidden 用于解决边框冲突。
dotted：点状边框。
dashed：虚线边框。
solid：实线边框。
double：双线边框。两条单线与其间隔的和等于指定的border-width值。
groove：3D凹槽边框。
ridge：3D垄状边框。
inset：凹边框。
outset：凸边框。
border-color：边框颜色。
实例
1.1 边框各样式效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{ width: 1000px; height: 20px; margin: 30px; text-align: center;}
div.dotted{ border: 5px dotted #000000;}
div.dashed{ border: 5px dashed #000000;}
div.solid{ border: 5px solid #000000;}
div.double{ border: 5px double #000000;}
div.groove{ border-width: 5px; border-style: groove; border-color: #CCCCCC #EFEFF4;}
div.ridge{ border-width: 5px; border-style: ridge; border-color: #CCCCCC #EFEFF4;}
div.inset{ border-width: 5px; border-style: inset; border-color: #CCCCCC #EFEFF4;}
div.outset{ border-width: 5px; border-style: outset; border-color: #CCCCCC #EFEFF4;}
</style>
</head>
<body>
<div class="dotted">dotted</div>
<div class="dashed">dashed</div>
<div class="solid">solid</div>
<div class="double">double</div>
<div class="groove">groove</div>
<div class="ridge">ridge</div>
<div class="inset">inset</p>
<div class="outset">outset</div>
</body>
</html>
效果图.png
1.2 四条边颜色样式相同
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{ width: 300px; height: 150px; border: 1px solid #000000; }
</style>
</head>
<body>
<div>四个边颜色样式相同</div>
</body>
</html>
效果图.png
1.3 四条边颜色不同，样式相同
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{ width: 300px; height: 150px; border-width: 2px; border-style: solid; border-color: #000000 #2AC845 #FF0000 #AA0000; }
</style>
</head>
<body>
<div>四个边颜色不同，样式相同</div>
</body>
</html>
效果图.png
1.4 四条边颜色相同，样式不同
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{ width: 300px; height: 150px; border-width: 2px; border-style: dotted dashed solid double; border-color: #000000;}
</style>
</head>
<body>
<div>四条边颜色相同，样式不同</div>
</body>
</html>
效果图.png
1.5 设置上边框宽度、样式、颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{ margin: 15px auto; width: 300px; height: 150px; }
div.top_w{ border-width: 5px 1px 1px 1px; border-style: solid; border-color: #CF2D28; }
div.top_s{ border-width: 1px; border-style: dotted solid solid solid; border-color: #CF2D28;}
div.top_c{ border-width: 1px; border-style: solid; border-color: #000000 #CF2D28 #CF2D28 #CF2D28; }
</style>
</head>
<body>
<div class="top_w">设置上边框宽度</div><br />
<div class="top_s">设置上边框样式</div><br />
<div class="top_c">设置上边框颜色</div>
</body>
</html>
效果图.png
1.6 设置右边框宽度、样式、颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{ margin: 15px auto; width: 300px; height: 150px; }
div.right_w{ border-width: 1px 5px 1px 1px; border-style: solid; border-color: #CF2D28; }
div.right_s{ border-width: 1px; border-style: solid dashed solid solid; border-color: #CF2D28;}
div.right_c{ border-width: 1px; border-style: solid; border-color: #CF2D28 #000000 #CF2D28 #CF2D28; }
</style>
</head>
<body>
<div class="right_w">设置右边框宽度</div><br />
<div class="right_s">设置右边框样式</div><br />
<div class="right_c">设置右边框颜色</div>
</body>
</html>
效果图.png
1.7 设置下边框宽度、样式、颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{ margin: 15px auto; width: 300px; height: 150px; }
div.bottom_w{ border-width: 1px 1px 5px 1px; border-style: solid; border-color: #CF2D28; }
div.bottom_s{ border-width: 1px; border-style: solid solid dashed solid; border-color: #CF2D28;}
div.bottom_c{ border-width: 1px; border-style: solid; border-color: #CF2D28 #CF2D28 #000000 #CF2D28; }
</style>
</head>
<body>
<div class="bottom_w">设置下边框宽度</div><br />
<div class="bottom_s">设置下边框样式</div><br />
<div class="bottom_c">设置下边框颜色</div>
</body>
</html>
效果图.png
1.8 设置左边框宽度、样式、颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{ margin: 15px auto; width: 300px; height: 150px; }
div.left_w{ border-width: 1px 1px 1px 5px; border-style: solid; border-color: #CF2D28; }
div.left_s{ border-width: 1px; border-style: solid solid solid dashed; border-color: #CF2D28;}
div.left_c{ border-width: 1px; border-style: solid; border-color: #CF2D28 #CF2D28 #CF2D28 #000000;}
</style>
</head>
<body>
<div class="left_w">设置左边框宽度</div><br />
<div class="left_s">设置左边框样式</div><br />
<div class="left_c">设置左边框颜色</div>
</body>
</html>
效果图.png
以上对border边框属性进行了基础操作，大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解，那就在回复区畅所欲言吧，小编定会吸取精华~如有写错欢迎大家回复，小编以后定会更加细心_
网友评论