使用PHP/HTML画横线（虚线）代码教程

安徽网络服务整理：在进行网页制作时往往要用PHP/HTML代码去画横线或者虚线，使用PHP/HTML代码去画横线或者虚线不难，关键是要填写的变量会比较多。猎微网今天分享如何使用PHP/HTML画横线（虚线）。

第一种（用实点画虚线）：<hr style=" height:2px;border:none;border-top:2px dotted #185598;" />

实现代码：

代码解读：

height:2px;是hr的高度

border:none;是没有边框

border-top:2px dotted #185598;是设置横线的样式

其中border-top:2px是上边框的厚度是2px；dotted 表示虚线的意思； #185598  颜色代码，当然也可以输入red、blue之类的颜色代码。

第二种（用断线画虚线）：<hr style="height:1px;border:none;border-top:1px dashed #0066CC;" />

实现代码：

代码解读：

在上面解读过的代码就不再重复啦！dashed表示的是虚线的意思，画虚线的元素是一小段短线，而dotted 表示的是用实点画虚线。

第三种：<hr style="height:1px;border:none;border-top:1px solid #555555;" />

实现代码：

代码解读：

solid表示是实的横线。

第四种：<hr style="height:3px;border:none;border-top:3px double red;" />

实现代码：

代码解读：

double表示双实横线。

第五种：<hr style="height:5px;border:none;border-top:5px ridge green;" />

实现代码：

代码解读：

ridge定义 3D 垄状边框。

第六种：<hr style="height:10px;border:none;border-top:10px groove skyblue;" />

实现代码：

代码解读：border-top:10px groove skyblue;    groove  上颜色、 skyblue   下颜色。