CSS定义HR水平线的几种样式，不要小看了HR水平线哦，用好了会给你的网页增色不少，这一段代码分别定义了几种漂亮的HR样式及颜色，供你参考，如果喜欢，直接拷贝代码就用吧。

 效果如下
 
  

 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  3. <head> 
  4.  <title>CSS定义HR水平线</title> 
  5.  <style type="text/css"> 
  6.  <!-- 
  7. .hr0{ height:1px;border:none;border-top:1px dashed #0066CC;} 
  8. .hr1{ height:1px;border:none;border-top:1px solid #555555;} 
  9. .hr2{ height:3px;border:none;border-top:3px double red;} 
  10. .hr3{ height:5px;border:none;border-top:5px ridge green;} 
  11. .hr4{ height:10px;border:none;border-top:10px groove skyblue;} 
  12.  --> 
  13.  </style> 
  14. </head> 
  15. <body> 
  16. <hr class="hr0" /> 
  17. <hr class="hr1" /> 
  18. <hr class="hr2" /> 
  19. <hr class="hr3" /> 
  20. <hr class="hr4" /> 
  21. </body> 
  22. </html>