HR线条样式CSS定制

最新推荐文章于 2024-08-08 15:02:59 发布
最新推荐文章于 2024-08-08 15:02:59 发布
阅读量2.7w 收藏 3
点赞数 1
分类专栏： Web Design 文章标签： css border filter url 照片 html
在一个页面里有许多<hr>  就在<style>里改变做样!!

例如
这里CSS指线宽度90%   高度3px 离上下右下左距离 10px 0px 10px 0px
<style>hr{width: 90%;height: 3px;margin: 10 0 10 0;}</style>  
在页面有了<HR>就会受到有改变hr{}的影响

HTML要贴:

<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;">
看起来点点好像有点大  而且还有原背景的色

这时要多加入一个高度调整他
<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;width: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;width: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;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>

补充日期: 2005-10-03 23:33:35

以下是引用片段：

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

<br><br><br><br><br><br><br><br><br><br><br><br>
<hr size="10" color="#000080" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100)">
<br><br>
<hr size="10" color="#ffccff" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0)">
<br><br>
<hr size="10" color="#0000cc" style="filter:alpha(opacity=0,finishopacity=100,style=2)">
<br><br>
<hr size="10" color="#cc0000" style="filter:alpha(opacity=0,finishopacity=100,style=3)">
<br><br>
<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='red',endColorstr='blue')">
<br><br>
<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#004040',endColorstr='#C0FFFF')">
<br><br>
<hr style="color:ffff00;height:10;border:3 solid #000000">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#c0c0ff',endColorstr='#0000FF'); WIDTH: 100%;HEIGHT: 8px">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#ff0000',endColorstr='#ffeeee'); WIDTH: 100%;HEIGHT: 8px" >
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#FFFFEE',endColorstr='#EEDD00'); WIDTH: 100%;HEIGHT: 8px">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#008800',endColorstr='#ddffdd'); WIDTH: 100%;HEIGHT: 18px">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#006600',endColorstr='#88ff88'); WIDTH: 100%;HEIGHT: 18px">


 

补充日期: 2005-10-04 00:35:49

<body style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#008800',endColorstr='#ddffdd');">

 

 

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

 

 

 

<br><br><br><br><br><br><br><br><br><br><br><br>
<hr size="10" color="#000080" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100)">
<br><br>
<hr size="10" color="#ffccff" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0)">
<br><br>
<hr size="10" color="#0000cc" style="filter:alpha(opacity=0,finishopacity=100,style=2)">
<br><br>
<hr size="10" color="#cc0000" style="filter:alpha(opacity=0,finishopacity=100,style=3)">
<br><br>
<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='red',endColorstr='blue')">
<br><br>
<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#004040',endColorstr='#C0FFFF')">
<br><br>
<hr style="color:ffff00;height:10;border:3 solid #000000">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#c0c0ff',endColorstr='#0000FF'); WIDTH: 100%;HEIGHT: 8px">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#ff0000',endColorstr='#ffeeee'); WIDTH: 100%;HEIGHT: 8px" >
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#FFFFEE',endColorstr='#EEDD00'); WIDTH: 100%;HEIGHT: 8px">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#008800',endColorstr='#ddffdd'); WIDTH: 100%;HEIGHT: 18px">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#006600',endColorstr='#88ff88'); WIDTH: 100%;HEIGHT: 18px">

 

星.河.璀.璨
关注
专栏目录
css定义hr水平线条
longxiaobin00的博客
08-12 670
text-align:左对齐 color:线条颜色 border-top:上边框线 border-bottom:下边框线 height:线条包括边框的总高度 显示效果为上中下三条线
【CSS技巧】关于<hr>的属性设置
weixin_30906425的博客
07-15 1432
<hr>的颜色设置 <hr style="border:0;background-color:#ff0000;height:1px;"> 如果不加border:0;的话，虽然颜色改变了，但是会显示一条黑色的边框。如果不加height:1px;的话，在chrome会显示不出来。也可以用下面的代码实现： <hr style="border-color:#...
CSS 设置hr样式
最新发布
本人小可爱
08-08 649
【代码】CSS 设置hr样式。
html里的hr的各种样式,html中各种hr样式
weixin_34688110的博客
06-24 1192
第一种height:2px;是hr的高度border:none;是没有边框border-top:2px dotted #185598;是设置横线的样式dotted 虚线#185598 颜色------------------------------------------------------------------------------------------------------...
CSS 画一条0.5px的线的方法（ 4种 ）
大剑师兰特的GIS世界
04-13 3364
在CSS中直接设置`border-width`为0.5px通常不会得到理想中的0.5个物理像素宽度的线条，尤其在高DPI屏幕下，由于浏览器会对小于1px的数值进行四舍五入处理，所以直接写0.5px可能会被渲染成1px的线条。
CSS系列005——画直线
hanbing1307的博客
03-10 1427
【代码】CSS系列005——画直线。
css中hr标签的各种用法
12-09
然而，通过CSS，我们可以进一步定制`<hr>`标签的外观，使其在设计中发挥更多作用。本文将详细介绍`<hr>`标签的各种CSS用法。 1. **基本使用** `<hr>`标签默认会生成一条横跨页面的单线条。例如： ```html <hr> ...
CSS——hr水平线样式
09-05
改变线条样式 要改变水平线的样式，我们可以使用border属性。例如，要将水平线变成虚线，可以使用以下样式： `<HR style="border:1px dotted red;">` 这将将水平线变成红色的虚线。 添加高度 如果我们想要将...
html基础教程之分析总结一下＜li＞和＜hr＞的样式定义
01-20
通过熟练掌握`<li>`和`<hr>`元素的CSS样式定义，开发者可以创造出更多元、更美观的网页布局，提升用户体验。对于初学者而言，理解并实践这些基础概念是掌握HTML和CSS的关键步骤。同时，不断学习和分享新的知识，如在...
非常简洁的CSS布局-线条 简洁 白色.rar
02-20
此外，`hr`元素用于创建水平分隔线，可以通过CSS定制其样式。 2. **简洁性（Simplicity）**：简洁的CSS布局强调代码的可读性和维护性。这通常意味着避免过多的复杂选择器和嵌套，使用预处理器如Sass或Less来组织...
htmlcss的一些样式
ln1138932964的博客
11-17 175
一条两头尖的线条 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width:200; height:2px; background: -webkit-linear-g
html中的css线条样式,详解CSS制作Web页面条纹背景样式的技巧
weixin_39873741的博客
06-03 1344
一、横向条纹如下代码：CSS Code复制内容到剪贴板background:linear-gradient(#fb320%,#58a80%)上面代码表示整个图片的上部分20%和下部分20%是对应的纯色，只有中间的部分是渐变色。如果让中间的部分逐渐缩小，当中间部分变为0即上下两种颜色的七点和终点相同是，就没有了渐变而变成了两种颜色的色条:CSS Code复制内容到剪贴板background:li...
hr css样式大全
xigl0727的专栏
08-28 7325
以下是引用片段： Fu&lN:mjv#@0hr在css受支持的并不多!也似乎足够 只是改变有些不同而已中国经济网 经济博客#u!E wg~+WnB中国经济网 经济博客"v5}X4F-J"g!MK.e在一个页面里有许多  就在里改变做样!!中国经济网 经济博客v(|1T)@o9^ eO0i8dG9p`0例如leZ3EU!_]E0这里CSS指线宽度90% 
css如何改变横线＜hr/＞标签的颜色
S筱潇S四维Smile
03-17 2398
<hr style='background-color:blue; height:1px; border:none;''/> hr标签是线条，其颜色要用background-color； 再给线条设置一个height，正常粗细就是1px，设置完后线条变粗； 那是因为hr有默认的border，需要将它的边框去掉，设为border:none 以上三点缺一不可 ...
css中如何设置hr的样式？css <hr>标签多种样式（图文）
lin123_00的博客
05-11 1万+
在对html网页进行美化的时候，肯定少不了要用的hr标签进行修饰页面，但默认的hr标签样式对页面的修饰起不到什么好的作用，有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作。那么如何在css中给hr标签设置样式呢？本章就给大家介绍css设置hr标签的几种样式。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） 一、hr的是什么意思 简单来说，hr就是html页面上的一条水平分隔
CSS三种漂亮的＜hr＞水平线样式
热门推荐
美奇软件开发工作室
03-11 4万+
hr.style-one {/*内嵌水平线*/width:80%;margin:0 auto;border: 0;height: 0;border-top: 1px solid rgba(0, 0, 0, 0.1);border-bottom: 1px solid rgba(255, 255, 255, 0.3);}hr.style-two {/*透明渐变水平线*/width:80%;margin...
关于html中hr的颜色设置
wmqdn的专栏
05-14 1万+
转载： http://blog.163.com/try0212%40126/blog/static/5286737020077675317964/ 这个代码在我的短暂网页制作生涯中还没有用到过。不过下午girlfriend问及颜色设置问题。照着一般代码的属性猜了一下。说在就应该可以的。 试着写了一个简单的页面。果然变为红色。 又在百度上搜了一下。还有其他的可选属性，一并列下。 HTM
CSS---各种分割线
This My Life - chisj
01-21 1万+
直接上代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- .hr0{ height:1px;border:none;border-top:1px dashed #1E
定义HR的一些基本样式
Missyouzhang的专栏
04-02 1402
1、两头渐变透明：   --------------------------------------------------------------------------------   2、纺锤形：   --------------------------------------------------------------------------------   3
css水平分割线hr
06-23
CSS中的`<hr>`（Horizontal Rule）元素用于创建一个水平线，也称为水平分割线，通常用于分隔页面内容或...3. 级联和继承：`hr`元素的大多数样式可以通过CSS继承，例如`color`。但有些属性，如`width`，需要明确设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值