html代码编写：自定义hr标签的显示效果

    最近在为一个小公司做网站，所有的东西都要靠自己来设计，做前台的html代码一直是我的弱项，没有美术细胞，抓破脑袋也做不出什么好看的页面，好在多少懂一点css，勉强能搞一点特效出来。

    不过也遇到一个问题，在用<hr>标签来分割内容的时候，总觉得效果很丑，和网页的风格相差很远，用一张图片放在下边做分割感觉又很麻烦，于是就想能不能自己定义<hr>标签的样式？去一些网站上找了一下，果然找到了一些比较漂亮的<hr>标签样式，但把别人的css代码移植到自己的网页里边总和别人的有区别，感觉比较丑。没办法，只好自己摸索了，经过多次尝试，发现可以这样来定义<hr>标签的样式，在css文件中写下如下代码：

hr{
 height:1px;
 background:url(../images/hrbglight.gif) repeat-x;
 margin:0;
 padding:0;
 border:hidden;
}

    意思就是设置hr的显示高度为1像素，背景为自己定义的一张图片，去掉hr的挤开和衬垫内容，当然，有需要也可以自己再加上几个像素，然设置hr的border为不显示，这样设置之后hr显示的内容就是我们在背景图片中定义的开状，一般来说是在x轴上重复，当然也可以不重复或在y轴上重复。其中，把border设置为hidden是关键骤，因为不这样的话hr的显示效果将是背景图和hr本来的效果叠加产生的效果。

    另外，还发现hr有很多其它的显示效果，比如：dashed,dotted等，如果懒得自定义其它效果可以试着指定border的样式，这样可能也会有较好的效果。相信还有很多别的方法，可以让<hr>标签有很好的显示效果，不过既然问题已经解决了我也懒得再去研究了……不过希望这篇文章能让像我一样的网站开发小菜有一些收获。