一些好用的html线条脚本 [转]-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_5823/article/details/81971176

其中 width 规定线条的长度，还可以是百分比；color 是颜色，size 当然就是厚度了。 align 规定线条位置，left、right、center。 noshade 是否有立体效果 <*HR align=center width=300 color=#00ffff noShade SIZE=1*>

两头渐变透明：

<*hr width=80% size=3 color=#00ffff style="FILTER: alpha(opacity=100,finishopacity=0,style=3)"*>

右边渐变透明：

<*hr width=80% size=3 color=#00ffff style="FILTER: alpha(opacity=100,finishopacity=0,style=1)"*>

画虚线：

<*hr width=80% size=1 color=#00ffff style="border:1 dashed #00ffff"*>

画双线：

<*hr width=80% size=3 color=#00ffff style="border:3 double green"*>

立体效果：

<*hr width=80% size=3 color=#00ffff style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)"*>

钢针效果：

<*hr width=80% size=3 color=#00ffff style="filter:progid:DXImageTransform.Microsoft.Glow(color=#00ffff,strength=10)"*>

纺棰形：

<*hr width=80% size=30 color=#00ffff style="filter:alpha(opacity=100,finishopacity=0,style=2)"*>

==================================

横线
<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td height="1"></td>
</tr>
</table>
width="100"是宽度为100像素，height="1"是高度为1像素

坚线
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td width="1" height="100"></td>
</tr>
</table>
width="1"是宽度为1像素，height="100"是高度为100像素

横线：
<hr width=100 height=1>
竖线：
<hr width=1 height=100>

这样应该就可以了吧。

在网页中，一般要实现虚线效果。制作方法很多，在我们网站中，也介绍使用Fireworks制作虚线的效果。如果我们改用水平线制作虚线效果呢？制作方法就是使用CSS定义：

　　在<head>中预先定义好CSS：
<STYLE type=text/css>
.dotline {
BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted
}
</STYLE>
　　然后修改水平线的代码为：<hr class=dotline color=#000000 size=1>。按F12看看吧，效果是不是很不错！
　　或者不预定义好CSS样式，直接在<hr>中加入代码：
<hr style="BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted" color=#000000 size=1>

　　更为简单的方法：<hr style="border:1px dashed red; height:1px">