备案网站建设方案书asp.net 网站管理工具 安全
- 设置边框样式（border-style）
用于定义页面中边框的风格，常用属性：
none：没有边框线，即忽略所有边框的宽度（默认值）
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
在设置边框样式时，既可以对盒子的单边进行设置，也可以综合设置四条边的样式，常用属性：
border-top-style：上边框样式
border-right-style：右边框样式
border-bottom-style：下边框样式
border-left-style：左边框样式
border- style：上边框样式 右边框样式 下边框样式 左边框样式
border- style：上边框样式 左右边框样式 下边框样式
border- style：上下边框样式 左右边框样式
border- style：上下左右边框样式
案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置边框样式</title>
<style type="text/css">h2{border-style: solid; /*四条边框相同--单实线*/}.one{border-style: dotted double; /*上下为点线左右为双实线*/}.two{border-style: dashed dotted solid;/*上虚线、左右点线、下实线*/}
</style>
</head><body>
<h2>边框为单实线</h2>
<p class="one">上下边框为点线。左右边框为双实线</p>
<p class="two">上边框虚线、左右边框点线、下边框实线</p>
</body>
</html>
注意：点线dotted和虚线dashed样式存在兼容性问题。实际网页制作中，通常使用插入背景图像的形式实现点线或虚线的边框效果。
2. 设置边框宽度（border-width）
常用取值单位：像素px，常用属性：
border-top-width：上边框宽度
border-right-width：右边框宽度
border- botttom-width：下边框宽度
border- left-width：左边框宽度
border-width：上边框宽度[右边框宽度 下边框宽度 左边框宽度]
案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置边框高度</title>
<style type="text/css">.one{border-width: 6px;}.two{border-width: 4px 2px;}.three{border-width: 6px 4px 3px;}p{border-style: solid;}
</style>
</head><body>
<p class="one">边框宽度-2px。边框样式-单实线。</p>
<p class="two">边框宽度-上下3px，左右1px。边框样式-单实线。</p>
<p class="three">边框宽度-上3px，左右1px，下2px。边框样式-单实线。</p>
</body>
</html>
注意：在设置边框时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。
3. 设置边框颜色（border-color）
取值为预定义的颜色值、十六进制#RRGGBB或RGB格式rgb(r,g,b)，实际工作中最常用
的是十六进制#RRGGBB。
边框的默认颜色为元素本身的文本颜色，对于没有文本的元素，其默认边框为父元素的
文本颜色。属性：
border-top-color:上边框颜色
border- right-color:右边框颜色
border-bottom-color:下边框颜色
border-left-color:左边框颜色
border- color:上边框颜色[右边框颜色 下边框颜色 左边框颜色]
案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置边框颜色</title>
<style type="text/css">h2{border-style: solid; /*综合设置边框样式*/border-top-color: #ff0000; /*单独设置上边框颜色*/}p{border-style: solid; /*综合设置边框样式*/border-color: #ccc #ff0000; /*设置边框颜色：两个值为上下、左右*/}
</style>
</head><body>
<h2>设置边框颜色</h2>
<p>设置边框颜色</p>
</body>
</html>
注意：设置边框颜色时同样必须设置边框的样式，如果未设置样式或设置为none，则其他边框属性无效。
4. 综合设置边框
基本格式：border：宽度 样式 颜色；（宽度 样式 颜色的顺序不分先后，省略部分取默
认值，样式不能省略）。
案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>综合设置边框</title>
<style type="text/css">h2{border-top: 3px dashed #243d52; /*单侧符合属性设置各边框*/border-right: 10px double #63abe8;border-bottom: 5px double #85f2da;border-left: 10px solid #1a5fad;}.wangya{border: 15px solid #4a4c5e; /*border复合属性设置各边框相同*/}</style>
</head><body>
<h2>综合设置边框</h2>
<img class="wangya" src="pic1.png" alt="网页平面设计" />
</body>
</html>
```