首先申明，我是个HTML菜鸟，对它非常的白痴。不清楚大学怎么混的。
给文本加边框：
老是看到 style="border: 3px solid red"这样的语句，可是不知道究竟是什么意思。solid?是什么呢，趁着任务刚结束上网学习了一下，嘿嘿，又自己亲自做了一遍，终于wakalimasita!
第一步：style="border:thin solid red"; 搞清楚"border"后面的三个参数的含义，对理解非常重要。
边框线的宽度是：thin（细线）；
边框线的类型是：solid（实线）；
边框线的颜色是：red（红色）； （PS:我们定义边框，实际上就是设定这三个参数值。）
第二步：边框线的宽度有三个标准值：thin（细线）、medium（中粗线）和thick（粗线），此外，也可以自定义宽度，如：1pt、5px、2cm等。
边框线的类型有九个确定值：none（无边框线）、 dotted（由点组成的虚线）、 dashed（由短线组成的虚线）、 solid（实线）、 double（双线，双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度）、 groove（3D沟槽状的边框）、 ridge（3D脊状的边框）、 inset（3D内嵌边框，颜色较深）、 outset（3D外嵌边框，颜色较浅）。（注意：如果系统不支持这些边框的属性值，那么除了none, solid外的其它七个都会被solid代替。）
边框线的颜色：可以用十六进制的颜色代码，如#00ffcc。
OK.学习完了哟。
TIPS: 给一段文本加边框，可把CSS加在〈P〉标记里；
给几段文本加边框，先把那几段文本用DIV标记括起来，再把CSS加在〈DIV〉标记里；
若是要给一行文本加几个不同的边框，则需要把文本放在表格里，再把CSS分别加到〈TD〉标记里。
下面是我做的小例子，可直接复制到一个空的文本文件，并将该文本文件重命名为类似于border.html。
代码如下：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="border:thin solid red"><span>这是一个实例，我</span>
<span>给一段文字加了不同</span>
<span>的边框，只是为了</span>
<span>说明边框线的颜色、粗细是可变的.</span></p>
<div style="border:thin solid red">
<p>这是一个实例，我给一段文字加了不同的边框，只是为了说明边框线的颜色、粗细是可变的.</p>
<p><span>这是一个实例，我</span>
<span>给一段文字加了不同</span>
<span>的边框，只是为了</span>
<span>说明边框线的颜色、粗细是可变的.</span></p>
</div>
<br><br><br>
<table>
<caption>给一行文本加几个不同的边框</caption>
<tr>
<td style="border:thin solid red">这是一个实例，我</td>
<td style="border:thin solid green">给一段文字加了不同</td>
<td style="border:thick solid red">的边框，只是为了</td>
<td style="border:thick solid blue">说明边框线的颜色、粗细是可变的.</td>
</tr>
</table>
</body>
</html>
给导航菜单加分隔线
画边框的单边与上例的边框的四条边类似，一个边框的四条边的属性如下：
边框线名称：border-top（上边框线）、border-right（右边框线）、border-bottom（下边框线）和boder-left（左边框线）；每条边框线的类型、宽度和颜色的取值与“border”属性相同。如本例中要定义每个单元格的左边框线为白色线，线的宽度为"1px"的实线，则CSS代码是这样的：style="border-left: 1px solid #ffffff"。
在单独定义边框线时，若不给出某个值，那么就取其默认的初始值。在dreamweaver中定义CSS非常方便，不用编写代码；把常用的边框线一次定义好，放在外连式CSS文件中，要用时调用一下就行了，非常方便。
代码如下：
<html>
<body>
<table>
<caption>给一行文本加几个不同的边框</caption>
<tr>
<td style="border:thin solid red">这是一个实例，我</td>
<td style="border:thin dotted green;border-left:1px solid white">给一段文字加了不同</td>
<td style="border:thick solid red;border-left:1px solid white">的边框，只是为了</td>
<td style="border:thick solid blue;border-left:1px solid white">说明边框线的颜色、粗细是可变的.</td>
</tr>
</table>
</body>
</html>
在一个边框中采用不同宽度和颜色的边框线：
把四条边的属性值分类放在一起，如本例的代码是这样的：
style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。 从上面可以看出，我把边框线的类型、宽度和颜色归类在一起定义了，这里请注意几点：
一、四条边框线的位置顺序是：上边框线、右边框线、下边框线、左边框线；
二、我在本例中边框线的类型只取了一种实线类型，实际上四条边也可以分别定义不同的类型；
三、属性值可以定义一个、两个、三个或者四个。
如果仅定义一个属性值，则其余三个自动取相同值，如：border-style:solid与border-style:solid solid solid solid的效果完全一样；
如果仅给出两个或三个值，那么缺失边的属性值将取与对边相同的值。如：boder-width:thin thick与border-width:thin thick thin thick效果相同，border-width:1px 2px 3px与border-width:1px 2px 3px 2px的效果相同。
<html>
<body>
<p style="border-style:solid;border-width:thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff">
<span>不同宽度和颜色的边框线</span>
</p>
</body>
</html>
4940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
