hr 标签的使用

标签可以产生一条分割线，并且可以设置颜色，位置，粗细
今天在使用hr标签的时候出现了问题，在网页中每个横线的显示是一样的，转成pdf格式之后，本来蓝色的线条，有的显示为蓝色，有的显示为灰色，放大后颜色一样，但是有一个灰色的边框。
原因：hr是一个块级元素，本身有默认的边框，颜色为灰色。

（1）可以通过高度首先设为0 然后设置边框的颜色这样就不会出现灰色边框

 hr{
height:0px; 
border-top:5px solid #31AFFC; 
}

（2）把边框设置为0，设置hr的高度，然后使用背景色实现显示

 hr{
border:0;
height:3px;
text-align:center;
background-color:#31AFFC;
}

（3）

#two{
border:none;
height:3px;
background-color:#CC0099;
}/* CSS Document */

#three{
height:0px; 
border-top:5px solid #31AFFC; 
}
#four{
height:10px;
background-color:white;
}

第一种是默认的，第二个和第三个是去掉边框自己设置的，这样不会出现导出pdf的时候颜色样式不一样。
第四个是只设置了高度和背景颜色，可以看出默认的灰色边框。（PS：图片上传一直失败！！！！）

秒客网

hr 标签的使用

相关文章