利用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;}