使用PHP/HTML画横线(虚线)代码教程

2015-12-11 23:22 阅读 1,247 次 评论关闭

在进行网页制作时往往要用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   下颜色。

具体效果见下图

只使用<hr/>代码即可实现画横线的功能,单比较单一,不够美观。实现效果如下:

使用PHP/HTML画横线(虚线)代码教程小结:

例子 1

border-style:dotted solid double dashed;
  • 上边框是点状
  • 右边框是实线
  • 下边框是双线
  • 左边框是虚线

例子 2

border-style:dotted solid double;
  • 上边框是点状
  • 右边框和左边框是实线
  • 下边框是双线

例子 3

border-style:dotted solid;
  • 上边框和下边框是点状
  • 右边框和左边框是实线

例子 4

border-style:dotted;
  • 所有 4 个边框都是点状

可能的值

描述
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:使用PHP/HTML画横线(虚线)代码教程 | 猎微网

评论已关闭!