HR线条样式CSS定制

这里CSS指线宽度90%   高度3px 离上下右下左距离 10px 0px 10px 0px

<style>hr{ 90%;height: 3px;margin: 10 0 10 0;}</style>  

在页面有了<HR>就会受到有改变hr{}的影响

HTML要贴:

<HR style=" 90%;height: 3px;margin: 10 0 10 0;">

<style>

hr {margin:0;HEIGHT: 25;100%;border:4px ridge;COLOR:333;}

</style>

<HR>

线条可以改变多种形状

线条样式属性原设值样式是solid

要改成是虚线条是dotted

例子是这样

<HR style="border:1px dotted red;">

看起来点点好像有点大  而且还有原背景的色

这时要多加入一个高度调整他

<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;">

补充日期: 2005-10-03 23:31:10

一般样式：

<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;100px;top:-25;right:80;position:relative;">

线条创成图片变的比较多采多亮：

<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;100%;height:120px;border: 1px solid red;}

</style>

<HR>

HR做为我的照片样式：

<style>

hr {background:red url(http://tw.img.match.yahoo.com/img/show//2/A/9/B/personals-1117330768-580902/photo_s1.jpg") no-repeat;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>