使用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 下颜色。
值 | 描述 |
---|---|
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 | 规定应该从父元素继承边框样式。 |