<HR style="width: 90%;height: 3px;margin: 10 0 10 0;">
<style>
hr {margin:0;HEIGHT: 25;width:100%;border:4px ridge;COLOR:333;}
</style>
<HR>
線條可以改變多種形狀
線條樣式屬性原設值樣式是solid
要改成是虛線條是dotted
例子是這樣
<HR style="border:1px dotted red;">
看起來點點好像有點大 而且還有原背景的色
這時要多加入一個高度調(diào)整他
<HR style="border-top:1px dotted red;HEIGHT:0;">
這樣原來背景條色就沒了!線條也變細
你使用HEIGHT:1;這樣是原預設值
你的線條已被固定了 但你想在排版時!能讓線條靠上下左右的距離
利用position:relative;
他是在原地被移動時可用的上 比如說要再往上移 往右移!看下句
<HR style="position:relative;top:-15;right:80; border-top:1px dotted red;HEIGHT:0;">
一般樣式:
<HR style="COLOR: red;border-style:dotted; HEIGHT: 8;">
<HR style="COLOR: red;border-style:double; HEIGHT: 20;">
<HR style="COLOR: red;border-style:outset; HEIGHT: 8;">
<HR style="COLOR: red;border-style:inset; HEIGHT: 18;">
<HR style="COLOR: fff;border-left: 1px double red;border-bottom: 1x double red;HEIGHT: 20;">
<HR style="border:8px ridge #FFB600;COLOR:000;HEIGHT: 50;width:100px;top:-25;right:80;position:relative;">
線條創(chuàng)成圖片變的比較多采多亮:
<style>
hr {height:10px;border: 1px solid red;background:url(http://tw.yimg.com/a/tw/wenchuan/0813lifea.gif) repeat-x;}
</style><HR>
HR做為廣告樣子:
<style>
hr {background:red url(http://tw.yimg.com/i/tw/sms/act/20041124.jpg) repeat;width:100%;height:120px;border: 1px solid red;}
</style>
<HR>
HR做為我的照片樣式:
<style>
hr {background:redurl(http://tw.img.match.yahoo.com/img/show//2/A/9/B/personals-1117330768-580902/photo_s1.jpg")no-repeat;width:75;height:75;border:0;>}
</style>
<HR>
線條隱藏:
<style>hr{display:none;}</style>
<HR>
改線條色 也可讓線更細:
<style>hr{border-bottom: 1px solid red;}</style>
<HR>
改線條色 高度是原預設:
<style>hr{COLOR: #eee; HEIGHT: 1px;}</style>
<HR>
<body bgcolor="#000000">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:100;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:150;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:200;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:250;">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:300;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:350;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:400;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:450;">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:500;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:550;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:600;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:650;">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:700;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:750;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:800;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:850;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:900;">
<hr size="10" color="#000080"style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100)">
<hr size="10" color="#ffccff"style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0)">
<hr size="10" color="#0000cc" style="filter:alpha(opacity=0,finishopacity=100,style=2)">
<hr size="10" color="#cc0000" style="filter:alpha(opacity=0,finishopacity=100,style=3)">
<hr size="10"style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='red',endColorstr='blue')">
<hr size="10"style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#004040',endColorstr='#C0FFFF')">
<hr style="color:ffff00;height:10;border:3 solid #000000">
<hr style="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#c0c0ff',endColorstr='#0000FF');WIDTH: 100%;HEIGHT: 8px">
<hr style="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#ff0000',endColorstr='#ffeeee');WIDTH: 100%;HEIGHT: 8px" >
<hr style="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#FFFFEE',endColorstr='#EEDD00');WIDTH: 100%;HEIGHT: 8px">
<hr style="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#008800',endColorstr='#ddffdd');WIDTH: 100%;HEIGHT: 18px">
<hr style="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#006600',endColorstr='#88ff88');WIDTH: 100%;HEIGHT: 18px">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:100;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:150;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:200;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:250;">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:300;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:350;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:400;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:450;">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:500;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:550;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:600;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:650;">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:700;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:750;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:800;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:850;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:900;">
<hr size="10" color="#000080"style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100)">
<hr size="10" color="#ffccff"style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0)">
<hr size="10" color="#0000cc" style="filter:alpha(opacity=0,finishopacity=100,style=2)">
<hr size="10" color="#cc0000" style="filter:alpha(opacity=0,finishopacity=100,style=3)">
<hr size="10"style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='red',endColorstr='blue')">
<hr size="10"style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#004040',endColorstr='#C0FFFF')">
<hr style="color:ffff00;height:10;border:3 solid #000000">
<hr style="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#c0c0ff',endColorstr='#0000FF');WIDTH: 100%;HEIGHT: 8px">
<hr style="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#ff0000',endColorstr='#ffeeee');WIDTH: 100%;HEIGHT: 8px" >
<hr style="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#FFFFEE',endColorstr='#EEDD00');WIDTH: 100%;HEIGHT: 8px">
<hr style="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#008800',endColorstr='#ddffdd');WIDTH: 100%;HEIGHT: 18px">
<hr style="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#006600',endColorstr='#88ff88');WIDTH: 100%;HEIGHT: 18px">