HR+CSS 分割線


 

實心線:<HR align=left width=490 color=#990099 SIZE=3 noShade> 

 

豎直線:<HR align=center width=1 color=red size=100> 

虛線:<hr size=1 style="color: blue;border-style:dotted;width:490px;color:#CCC"> 


雙線:<hr size=1 style="COLOR:#ff9999;border-style:double;width:490px;color:#CCC"> 


立體: <hr size=8 style="COLOR: #ffd306;border-style:outset;width:490px;color:#CCC"> 


左邊逐漸變透明:<hr size="2" color="#ff9966" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100);width:490;"> 

右邊逐漸變透明:<hr size="2" color="#ff9966" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0);width:490;"> 

樣式: 

代碼如下: 

<hr STYLE="WIDTH: 100%; COLOR: #999; BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; HEIGHT: 1px; BORDER-BOTTOM-STYLE: dashed"></HR> 


用<hr>標簽 
最基本的:<hr width=300 size=1 color=#5151A2 align=center noshade> 
其中 width 規定線條的長度,還可以是百分比;color 表示顏色,size 表示厚度; 
align 規定線條位置,有left(左對齊)、right(右對齊)、center(中對齊);noshade 表示是否有立體效果。 

兩頭漸變透明: (利用CSS濾鏡處理) 
<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)"> 
也可以利用<table>標簽 
如<table width="100%"><tr><td height="1" bgcolor="#FF0000"></td></tr></table>或者利用CSS里的background屬性,更方便控制划線效果,比如像一個一像素的點(dot.gif) 
水平划線:<td style="background:url(dot.gif) repeat-x center">&nbsp;</td> 
垂直划線:<td style="background:url(dot.gif) repeat-y center">&nbsp;</td> 
當然還有其他很多方法,大家可以參考HTML及CSS相關資料


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM