【精美分割】分割线（6）

2012-03-27 15:21:52|  分类：【精美分割】 |字号 订阅

一、基本分割线代码

1: <HR>

2: <HR align=center width=515 color=#00686b SIZE=2>

align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度

二、特效（效果并不是孤立的，可相互组合）

1、两头渐变透明

<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width=515 color=#00686b SIZE=3>

2、纺锤形

<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width=515 color=#00686b SIZE=8>

3、右边渐变透明

<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width=515 color=#00686b SIZE=2>

4、左边渐变透明

<HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width=515 color=#00686b SIZE=3>

5、虚线

<HR style="border:1 dashed #987cb9" width=515 color=#00686b SIZE=1>

6、双线

<HR style="border:3 double #987cb9" width=515 color=#00686b SIZE=3>

7、立体效果

<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#00686b,direction:145,strength:6)" width=515 color=#00686b SIZE=1>

8、钢针效果

<HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#00686b,strength=6)" width="80%" color=#00686b SIZE=1>

9.垂直分割线

<TABLE border="1px" cellpadding="0" cellspacing="0" style="height:300px;border-left-style:solid; border-bottom-style:none;border-right-style:none;border-top-style:none">

10.字符分割线可随意创作

<DIV align=center><FONT color=#008080>щщщ.и8.ьlоg.163.соm-----------------------------2009</FONT></DIV>

щщщ.и8.ьlоg.163.соm---------------------------------------------------------------------------------------------------------2009

虚线分割

第一例：

代码

<HR style="BORDER-RIGHT: #00686b 1px dotted; BORDER-TOP: #00686b 1px dotted; BORDER-LEFT: #00686b 1px dotted; BORDER-BOTTOM: #00686b 1px dotted" noShade SIZE=1>

第二例：

代码

<DIV style="BORDER-TOP: #00686b 1px dashed; OVERFLOW: hidden; HEIGHT: 1px"></DIV>

第三例：用字符实现

代码

<DIV align=center><FONT color=#008080>-------------------------------------------------------------------------</FONT></DIV>

---------------------------------------------------------------------------------------------------------------------------------------------

文章分割线

文章中合理运用分割线，可使主题清晰、段落明了。样式如下：

１．   基本样式代码：

<hr width=300 size=1 color=#5151A2 align=center noshade>

２．　两端渐变透明代码：

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

３．右边渐变透明代码：

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

４．　虚线代码：

<hr width=80% size=1 color=#5151A2 style="border:1 dashed #5151A2">

５．　双线代码：

<hr width=80% size=3 color=#5151A2 style="border:3 double green">

６．　立体效果代码：

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

７．纺棰形代码：

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

８．　钢针效果代码：

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

注：其中 width 为线条的长度；color为颜色，size为厚度； align为线条位置，有left、right、center值；noshade 为有否立体效果。

动画直立分隔线

###########################################################################

第一例：

代码如下：

<HR align=center width=1  size=100 color=#00686b>

第二例：用表格实现

代码如下：

<TABLE  style="BORDER-LEFT: 1px solid;" align=center height=300  borderColor=#00686b >

<TBODY>

<TR>

<TD></TD></TR></TBODY></TABLE>

属性：

size: 设置水平分隔线的高度，单位：像素默认值是2

width: 设置水平分隔线的宽度， 单位：像素 % 默认值是100%

align: 设置水平分隔线的对齐方式。 默认值是center 还有left right

color: 设置水平分隔线的颜色。 默认值是black

noshade: 取消水平线的3d阴影