驾驭<hr />标签

<hr>标签是html4用来制作水平线的。如果你在网页制作中使用了<hr />标签来制作水平分隔线,你知道在没有样式设置的情况下,他是很难看的。<hr/>在各浏览器的显示常常是100%的宽度,2px的高度,3D边框风格渲染。默认情况是不太好看,或者也不符合你的网页风格,但是你给<hr/>标签设置了样式,这样他看起来就不会那么难看,同时也更能适合你的页面风格。但是,你千万要小心,因为有一些浏览器对<hr/>渲染出来的风格是不一样的。大家先来看一朋友在其页中运用的<hr/>在Firefox 和IE下的效果:

从上图中很明显得知,你在样式中设置<hr/>的边框样式,在各浏览器下显示是不一样的

				hr {border-top: 1px solid #ddd;}
			

此时在IE下显示是1px的边框线;但在Firefox,Opera等浏览器下显示的却是2px的边框,如果你把边值从新设置:

				hr{border: none;}
			

此时效果又不一样,在Firefox,Opera等浏览器下不会显示任何边框,可是在IE下却照常有一条1px的细线显示。

上面是<hr/>线宽在浏览器下显示不一样,其实他的颜色设置也是不一样的:<hr/>在IE下是通过前景色“color”来控制他的颜色;而在Firefox和Opera等现代浏览器下只有背景色“background-color”才能控制他的颜色。换句话说,只有前景色和背景色设置一样时,他们才会显示一样的颜色。

				hr{color:red;}/*这样设置只会在IE下有效果*/
			
				hr{background-color: red;}/*这样设置只有Firefox和Opera等现代浏览器下有效果*/
			

所以为了达到各浏览器下显示效果一样,你需要对<hr/>同时设置前景色和背景色,并且他们的值要设置成相同的值:

				hr{color:red;background-color:red;}
			

这样下来,在Opera下还是无法工作,因为在给线条定色之前,Opera还需要给他定义一个高度:

				hr{color:red;background-color:red;height:1px;border:none;}
			

这样下来,你的<hr/>在各浏览器渲染将在达到一致的风格,不过在下建议最好在加上两个属性,这要在IE6下运行将更稳定:

				hr{color:red;background-color:red;height:1px;line-height:1px;font-size:0;border:none;}
			

现在解决了<hr/>制线线条的粗细和颜色问题,最后他还有一个对齐问题,比如说你想让50%宽度的线条,左对齐或者右对齐,你肯定会想到使用float属性,进行左浮动或者右浮动,如:

				hr{
					color:red;
					background-color:red;
					height:1px;
					line-height:1px;
					font-size:0;
					border:none;
					width: 50%;
					float: right;
				}
			

这样下来在IE下是不能正常运行的,为了能让他在IE下正常工作,需要把代码改成:

				hr{
					color:red;
					background-color:red;
					height:1px;
					line-height:1px;
					font-size:0;
					border:none;
					width: 50%;
					float: right;
					display:block;/*改变hr的显示风格*/
					text-align:right;/*右对齐*/
				}
			

上面介绍了如何让<hr/>标签制作的水平分隔线能在所有浏览器下渲染成一样的风格。那么下面我们使用上面的知识和CSS3的渐变效果,来制作一些效果好看的分隔线。

首先来看第一个实例,制作普通的水平分隔线,代码如下:

HTML Markup

				<hr class="normal" />
			

CSS Code:

				hr.normal {
					background: #ddd;/*改变现代浏览器下线条色*/
					color: #ddd;/*改变IE浏览器下线条色,最好和Background-color设置一样的色*/
					clear:both;/*可以用来清除浮动*/
					float: none;/*取消浮动,可以不设置*/
					width: 100%;/*显式定义宽度*/
					height: 1px;/*改变部分浏览器下的默认高度*/
					line-height: 1px;/*保证IE下高度效果一致,不留白色空白区*/
					font-size: 0;/*设置为0,以确保IE6下不留空白区*/
					border: none 0;/*取消默认边框,以背景和高度代替边框效果*/
					margin: 0 0 1.4em;
				}
			

上面是制作普通水平分隔线的效果,如果你在你的制作中经常使用hr来制作水平线,你可以将其写入你的base.css样式中,下面我们接着来看两种CSS3制作的效果:两边淡化效果以及浮雕效果。

1、褪色的边缘效果

			<hr class="faded" />
			
				hr.faded {
				  clear: both; 
				  float: none; 
				  width: 100%; 
				  height: 1px;
					line-height: 1px;
					font-size: 0;
					border: none 0;
				  margin: 1.4em 0;
				  border: none; 
				  background: #ddd;
				  background-image: -webkit-gradient(linear,left bottom,right bottom,color-stop(0, rgb(255,255,255)), color-stop(0.1, rgb(221,221,221)),color-stop(0.9, rgb(221,221,221)),color-stop(1, rgb(255,255,255)));
				 background-image: -webkit-linear-gradient(left center,rgb(255,255,255) 0%,rgb(221,221,221) 10%,rgb(221,221,221) 90%,rgb(255,255,255) 100%);
				  background-image: -moz-linear-gradient(left center,rgb(255,255,255) 0%,rgb(221,221,221) 10%,rgb(221,221,221) 90%,rgb(255,255,255) 100%);
				  background-image: -o-linear-gradient(left center,rgb(255,255,255) 0%,rgb(221,221,221) 10%,rgb(221,221,221) 90%,rgb(255,255,255) 100%);
				}
			

2、浮雕效果

Html Markup

				<hr class="carved" />
			

CSS Code

				hr.carved {
				  clear: both; 
				  float: none; 
				  width: 100%; 
				  height: 2px;
					line-height: 2px;
					font-size: 0;
				  margin: 1.4em 0;
				  border: none 0; 
				  background: #ddd;
				  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.5, rgb(221,221,221)),color-stop(0.5, rgb(255,255,255)));
				  background-image: -webkit-linear-gradient(center top,rgb(221,221,221) 50%,rgb(255,255,255) 50%);
				  background-image: -o-linear-gradient(center top,rgb(221,221,221) 50%,rgb(255,255,255) 50%);
				  background-image: -moz-linear-gradient(center top,rgb(221,221,221) 50%,rgb(255,255,255) 50%);
				}
			

效果

上面三种效果,第一种是常用效果,第二种和第三种是使用了CSS3的渐变功能美化了一下,但是在IE6-8或者不支持CSS3属性的浏览器是不能正常显示的,将会以直线显示。

最后归纳一点:<hr />是html一个标签,主要运用于制作水平分隔线,由于其在各浏览器下解析不一致,为了能让各浏览器渲染出来的风格一致,我将常规状态下的样式代码贴在下面,不过我个人建议制作水平分隔线尽量不要去使用<hr />标签,以免带来意想不到的Bug,制作水平分隔线大家可以直接使用元素的Border来制作,简单而兼容性强。

<hr>常规化状态下样式:

				hr {
					background: #ddd;/*改变现代浏览器下线条色*/
					color: #ddd;/*改变IE浏览器下线条色,最好和Background-color设置一样的色*/
					clear:both;/*可以用来清除浮动*/
					float: none;/*取消浮动,可以不设置*/
					width: 100%;/*显式定义宽度*/
					height: 1px;/*改变部分浏览器下的默认高度*/
					line-height: 1px;/*保证IE下高度效果一致,不留白色空白区*/
					font-size: 0;/*设置为0,以确保IE6下不留空白区*/
					border: none 0;/*取消默认边框,以背景和高度代替边框效果*/
					margin: 0 0 1.4em;
				}
			

如需转载烦请注明出处:W3CPLUS

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-hr

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部