在之前的画三角形的文章中已经提到了边框（border）的样式，在此呢简单总结一下。
边框（border）分为三部分：宽度、样式、颜色。
同时边框按方向分又分为4个方向（已顺时针为例）：上、右、下、左。
1、边框的基本样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框样式</title>
<style>
#div1 {
width:200px;
height:200px;
border: 5px solid red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
border:5px solid red 表示边框的样式为：粗细程度为5px，样式为solid（实线），颜色为red（红色）。
这三个值的顺序可随意调整，但是各个值之间要以空格分隔。
边框样式分为：solid（实线）、dotted（点线）、dashed（虚线）。dotted和dashed的效果在不同的浏览器上会有细微的不同。
边框颜色可以使用三种方式来定义：
1、颜色英文。如：red、blue、green等等
2、RGB颜色值。如：rgb(204,249,252)
3、16进制颜色值。如：#ccf9fc
2、边框方向：
默认情况下只写border的话设置的是4个边框的样式。
4个边框分别为：上、右、下、左。
border-top：上边框
border-right：右边框
border-bottom：下边框
border-left：左边框
4个边框的样式这是方式同border的样式设置，在此不做解释。
需要注意的一个地方是在这是边框样式的时候如果需要将边框隐藏，可以将边框的颜色值设置为transparent，即表示隐藏。如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框样式</title>
<style>
#div1 {
width:200px;
height:200px;
border-right:30px solid transparent;
border-bottom:30px solid green;
border-left:30px solid transparent;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
如果要设置某个没有某个边框，可以使用none。如：border-top:none;表示没有上边框。
边框样式到此结束，以后将会进一步更新。
574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
