如何控制HR标签制作的网页水平线的长度和颜色？

1、首先新建html文档，输入html5标准声明，如图所示。

2、然后输入html基本网页结构，如图所示。

3、接着输入hr标签<hr>是水平线，是单边标记，如图所示。

4、hr标签的常用属性，Size：设置水平线的粗细。

5、Width：设置水平线的宽度， Color：设置水平线的颜色，noshade：纯色显示，不带阴影效果。

6、最后运行网页，查看效果，如图所示，就完成了。

css3可以直接设置背景变色。

这是IE的代码

body

{

filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1)

}

代码主要有三个参数，依次是：startcolorstr, endcolorstr, 以及gradientType。

其中gradientType=1代表横向渐变，gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=”色彩” 代表渐变结尾的色彩。

Firefox或是Safari浏览器的代码：

filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)

opacity表示透明度，默认的范围是从0 到 100，finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。style用来指定透明区域的形状特征：0 代表统一形状，1 代表线形，2 代表放射状，3 代表矩形。startx 渐变透明效果开始处的 X坐标。 starty 渐变透明效果开始处的 Y坐标。 finishx 渐变透明效果结束处的 X坐标。 finishy 渐变透明效果结束处的 Y坐标。

自己试试，这些都是网上有的，我试过，还可以，但是要比较新的浏览器，IE要IE8以上吧。谷歌浏览器还好点。我觉得为了IE8以下的浏览器也能有渐变的效果还是用图片比较好，毕竟还有很多人用IE6、IE7的

---