html中 <hr >的几种不同的语句及效果

来源：互联网发布：淘宝网页如何制作编辑：程序博客网时间：2024/06/05 18:51

HTML中基本的水平线<未完待续……>

1. HTML方法

<hr align="left" width="600px" color="#FF0000" size="15" />

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值一致。

**************************************************************************************************8

代码如下：

[html] view plain copy
 print?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>html中水平分割线的九种特效示例-baike369.com</title>  
</head>  
  
<body>  
  
<h1>html中水平分割线的九种特效示例</h1>  
<h2>基本的水平分割线</h2>  
<p>1. html方法</p>  
<hr align="left" width="500px" color="#FF0000" size="15" />  
<p>2. CSS方法</p>  
<hr style="text-align:left;width:500px;background-color:#C6C;height:15px" />  
<h2>html中水平分割线的九种特效</h2>  
<p>1. 右边渐变透明：</p>  
<hr style="filter:alpha(opacity=100,finishopacity=0,style=1)" width="90%" color="#FF0000" size="5" />  
<p>2. 左边渐变透明：</p>  
<hr style="filter:alpha(opacity=0,finishopacity=100,style=1)" width="90%" color="#FF0000" size="5" />  
<p>3. 纺锤形：</p>  
<hr style="filter:alpha(opacity=100,finishopacity=0,style=2)" width="90%" color="#FF0000" size="20" />  
<p>4. 两头渐变透明：</p>  
<hr style="filter:alpha(opacity=100,finishopacity=0,style=3)" width="90%" color="#FF0000" size="10" />  
<p>5. 虚线：</p>  
<hr style="border:1px dashed #F00" width="90%" size="1" />  
<p>6. 双线：</p>  
<hr style="border:3px double #F00" width="90%" size="3" />  
<p>7. 立体效果：</p>  
<hr style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#FF0000,direction:145,strength:15)" color="#FF0000" width="90%" size="1" />  
<p>8. 钢针效果：</p>  
<hr style="filter:progid:DXImageTransform.Microsoft.Glow(color=#FF0000,strength=10)" width="90%" color="#FF0000" size="1" />  
<p>9. 垂直分割线：</p>  
<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>  
  
</body>  
</html>  

0 0