利用css画横线或竖线

横线：

利用css画横线，可以简单的使用<hr>标签实现，但是如果要实现左右渐变的效果的话，则需要多费一点功夫了，以下有个简单例子：

html代码：（这里使用.是为了让其有值可以显示不为空，也可改为其他值，该值显示在横线中间）

 <p class="line">.</p>

css代码：

.er-theme .line{
    position:relative;
    text-align:center;
}
.er-theme .line:before,.er-theme .line:after {
    content: "";
    width: 50%;
    height: 4px;
    position: absolute;
    top:50%;
}
.er-theme .line:before {
    background: -webkit-linear-gradient(right, #da7676  , #eee);
    background: -o-linear-gradient(left, #da7676  , #eee);
    background: -moz-linear-gradient(left,#da7676  , #eee);
    background: linear-gradient(to left, #da7676  , #eee);
    left: 2px;
}
.er-theme .line:after {
    background: -webkit-linear-gradient(left, #da7676  , #eee);
    background: -o-linear-gradient(right, #da7676  , #eee);
    background: -moz-linear-gradient(right,#666 , #eee);
    background: linear-gradient(to right, #da7676 , #eee);
    right: 2px;
}

利用这个基本的结构，可以根据需求改变

如果要画竖线的话，就需要使用代码来实现，相对来说也比较简单，如下：

html代码：

  <div class="Line"></div>

css代码：

Line{
 float: left; width: 0.1em; height: 5em; margin-right: 1em; background: #d4c4c4;}