html中水平分割线的九种特效_百科369

---

2. CSS方法

<hr style='text-align:left;width:600px;background-color:#CC66CC;height:15px' />

---

---

HTML中水平分割线的九种特效

1. 右边渐变透明

<hr style='filter:alpha(opacity=100,finishopacity=0,style=1)' width='90%' color='#FF0000' size='5' />

或

<hr style='filter:alpha(opacity=100,finishopacity=0,style=1);width:600px;background-color:#FF0000;height:5px' />

---

本例使用了CSS的alpha滤镜。

2. 左边渐变透明

<hr style='filter:alpha(opacity=0,finishopacity=100,style=1)' width='90%' color='#FF0000' size='5' />

或

<hr style='filter:alpha(opacity=0,finishopacity=100,style=1);width:600px;background-color:#FF0000;height:5px' />

---

3. 纺锤形

<hr style='filter:alpha(opacity=100,finishopacity=0,style=2)' width='90%' color='#FF0000' size='20' />

或

<hr style='filter:alpha(opacity=100,finishopacity=0,style=2);width:600px;background-color:#FF0000;height:20px' />

---

4. 两头渐变透明

<hr style='filter:alpha(opacity=100,finishopacity=0,style=3)' width='90%' color='#FF0000' size='10' />

或

<hr style='filter:alpha(opacity=100,finishopacity=0,style=3);width:600px;background-color:#FF0000;height:10px' />

---

5. 虚线

<hr style='border:1px dashed #F00' width='90%' size='1' />

或

<hr style='border:1px dashed #F00;width:600px;height:1px' />

---

本例使用了CSS的border属性。

6. 双线

<hr style='border:3px double #F00' width='90%' size='3' />

或

<hr style='border:3px double #F00;width:600px;height:3px' />

---

7. 立体效果

<hr style='filter:progid:DXImageTransform.Microsoft.Shadow(color:#FF0000,direction:145,strength:15)' color='#FF0000' width='90%' size='1' />

或

<hr style='filter:progid:DXImageTransform.Microsoft.Shadow(color:#FF0000,direction:145,strength:15);width:580px;background-color:#FF0000;height:1px' />

---

本例使用了CSS的Shadow滤镜。

8. 钢针效果

<hr style='filter:progid:DXImageTransform.Microsoft.Glow(color=#FF0000,strength=10)' width='90%' color='#FF0000' size='1' />

或

<hr style='filter:progid:DXImageTransform.Microsoft.Glow(color=#FF0000,strength=10);width:580px;background-color:#FF0000;height:1px' />

---

本例使用了CSS的Glow滤镜。

9. 垂直分割线

<table border='0' cellpadding='0' cellspacing='0' width='1'><tr><td height='100'><hr style='border:1px dashed #F00' width='1' size='100' /></td></tr></table>

或

<hr style='border:1px dashed #F00;width:1px;height:100px' />

---

注意：本例设置的是垂直虚线分割线。设置的<table>宽度（width）应该与<hr>标签设置的宽度一致；设置的<td>高度（height）应该与<hr />的size值一致。