學習CSS邊框屬性的用法，border-bottom主要是定義下邊框，因此可以使用這個屬性為鏈接定義下劃線，而且可以改變a hover時候的underline，因為Underline必竟有限制，不如CSS border-bottom更靈活，以下來看個例子：實現頁面鏈接不同的下滑線顏色效果：
01
<Html>
02
<head>
03
<title>鏈接下劃線顏色實例</title>
04
<style>
05
.F00{ border-bottom:1px solid #F00}
06
/*設置對象下邊框為紅色 */
07
.00F{ border-bottom:1px solid #00F; color:#090}
08
/*設置對象下邊框為藍色 文字為綠色 */
09
.333{ border-bottom:1px solid #333}
10
/*設置對象下邊框為黑色 */
11
#n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}
12
#n a{ padding:0 4px; color:#333}
13
</style>
14
</head>
15
<body>
16
<p><strong><a href="/">不同顏色下劃線</a>實例效果如下：</strong></p>
17
<p>DIVCSS布局實例之自定義文字下劃線顏色-<span class="F00">下劃線紅色</span></p>
18
<p>DIVCSS布局實例之自定義文字下劃線顏色-<span class="00F">下劃線藍色，文字為綠色</span></p>
19
<p>DIVCSS布局實例之自定義文字下劃線顏色-<span class="333">下劃線黑色</span></p>
20
</body>
21
</Html>
最終運行效果：
DIV CSS布局實例之自定義文字下劃線顏色-下劃線紅色
DIV CSS布局實例之自定義文字下劃線顏色-下劃線藍色，文字為綠色
DIV CSS布局實例之自定義文字下劃線顏色-下劃線黑色