博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HR+CSS 分割线
阅读量:5039 次
发布时间:2019-06-12

本文共 2106 字,大约阅读时间需要 7 分钟。

 

实心线:<HR align=left width=490 color=#990099 SIZE=3 noShade> 

 

竖直线:<HR align=center width=1 color=red size=100> 
虚线:<hr size=1 style="color: blue;border-style:dotted;width:490px;color:#CCC"> 
双线:<hr size=1 style="COLOR:#ff9999;border-style:double;width:490px;color:#CCC"> 
立体: <hr size=8 style="COLOR: #ffd306;border-style:outset;width:490px;color:#CCC"> 
左边逐渐变透明:<hr size="2" color="#ff9966" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100);width:490;"> 
右边逐渐变透明:<hr size="2" color="#ff9966" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0);width:490;"> 
样式: 
代码如下: 
<hr STYLE="WIDTH: 100%; COLOR: #999; BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; HEIGHT: 1px; BORDER-BOTTOM-STYLE: dashed"></HR> 
用<hr>标签 
最基本的:<hr width=300 size=1 color=#5151A2 align=center noshade> 
其中 width 规定线条的长度,还可以是百分比;color 表示颜色,size 表示厚度; 
align 规定线条位置,有left(左对齐)、right(右对齐)、center(中对齐);noshade 表示是否有立体效果。 
两头渐变透明: (利用CSS滤镜处理) 
<hr width=80% size=3 color=#5151A2 style="FILTER: alpha(opacity=100,finishopacity=0,style=3)"> 
右边渐变透明: 
<hr width=80% size=3 color=#5151A2 style="FILTER: alpha(opacity=100,finishopacity=0,style=1)"> 
画虚线: 
<hr width=80% size=1 color=#5151A2 style="border:1 dashed #5151A2"> 
画双线: 
<hr width=80% size=3 color=#5151A2 style="border:3 double green"> 
立体效果: 
<hr width=80% size=3 color=#5151A2 style="filter:progid:DXImageTransform.Microsoft.Shadow(color#5151A2,direction:145,strength:15)"> 
纺棰形: 
<hr width=80% size=30 color=#5151A2 style="filter:alpha(opacity=100,finishopacity=0,style=2)"> 
钢针效果: 
<hr width=80% size=3 color=#5151A2 style="filter:progid:DXImageTransform.Microsoft.Glow(color=#5151A2,strength=10)"> 
也可以利用<table>标签 
如<table width="100%"><tr><td height="1" bgcolor="#FF0000"></td></tr></table>或者利用CSS里的background属性,更方便控制划线效果,比如像一个一像素的点(dot.gif) 
水平划线:<td style="background:url(dot.gif) repeat-x center">&nbsp;</td> 
垂直划线:<td style="background:url(dot.gif) repeat-y center">&nbsp;</td> 
当然还有其他很多方法,大家可以参考HTML及CSS相关资料

转载于:https://www.cnblogs.com/yqskj/archive/2012/11/07/2758648.html

你可能感兴趣的文章
【转载】 IP实时传输协议RTP/RTCP详解
查看>>
关于Xshell无法连接centos6.4的问题
查看>>
Linux系统的数据写入机制--延迟写入
查看>>
css3动画——基本准则
查看>>
SQLite详解,案例,手册
查看>>
创建自己的内容提供器
查看>>
SSRS 数据源访问Cube 无法创建订阅的解决方法
查看>>
Spring之SpringMVC
查看>>
[转载]限制排列与棋盘多项式{理论}
查看>>
cookie、session 整理
查看>>
js 设计模式——观察者模式
查看>>
[nowcoder]再编号
查看>>
redis学习小结
查看>>
pku 3041 Asteroids 二分图匹配——匈牙利算法求最小点覆盖
查看>>
天津赛区总结
查看>>
解决无法正常启动Oracle OEM控制台
查看>>
Flume采集Nginx日志到HDFS
查看>>
205. Isomorphic Strings
查看>>
C++ 类的两种定义方式
查看>>
一些命令和快捷键的全称
查看>>