最基本的:<hr width=300 size=1 color=#5151A2 align=center noshade>。

<!--其中 width 规定线条的长度,还可以是百分比;color 表示颜色,size 表示厚度;align 规定线条位置,有left、right、center;noshade 表示是否有立体效果-->

  两头渐变透明:

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

<hr>标签的作用是产生一线水平线

<hr>标签的属性包括

属性 值 描述 DTD align  center left right 规定水平线的排列。 TF noshade noshade  当设置为 true 时,水平线呈现为纯色(2D 效果)。

当设置为 false 时,水平线显示为双色凹槽(3D 效果)。

TF size  pixels % 规定水平线的厚度(高度)。 TF width  pixels % 规定了水平线的宽度。 TF 看下面的例子

<hr align="center">

<hr align="left">

<hr align="right">

<hr noshade="true">

<hr noshade="false">

<hr size="5">

<hr width="500px">

<hr align="left" noshade="false" size="4" width="500px" color="#ff0000">

显示结果分别为:

没有设置宽度的水平线默认为100%,所以前三条设置的对齐看不到效果

1、普通分隔线:<hr>

2、分隔线宽度属性:<hr width=50%> 或者 <hr width=250> (宽度为实际点数或百分比)

3、分隔线位置属性:<hr align=right width=50%> (位置分为 Left、Center、Right 三种)

4、分隔线厚度属性:<hr style="height:10px"> (奇怪,height=10 似乎不能起到效果)

5、分隔线无阴影属性:<hr style="height:10px" noshade>

6、分隔线彩色属性:<hr color=red> 或者 <hr color=#FF0000> (颜色可调)

7、渐变颜色的分隔线: <hr style="filter:alpha(opacity=5,finishopacity=100,style=1);height:10px" color=green>

<hr style="filter:alpha(opacity=100,finishopacity=5,style=1);height:10px" color=blue>

8、中心透明的分隔线: <hr style="filter:alpha(opacity=0,finishopacity=100,style=2);height:12px" color=orange>

<hr style="filter:alpha(opacity=0,finishopacity=100,style=3);height:12px" color=#FF00FF>

9、中心不透明的分隔线: <hr style="filter:alpha(opacity=100,finishopacity=0,style=2);height:15px" color=yellow>

<hr style="filter:alpha(opacity=100,finishopacity=0,style=3);height:15px" color=#00FFFF>

10、波浪线: <hr style="filter:wave(strength=9,freq=2,lightstrength=20,phase=9);height:15px" color=pink width=95%>

11、三色线: <hr style="border-top: #ff0000 solid; color: #00ff00; border-bottom: #0000ff solid; height: 9px">

12、虚线: <hr style="border-top: 2px dashed; border-bottom: 2px dashed; height: 2px" color=black>

13、竖线: <hr style="height:100px; width:4px" color=orange>

<hr style="filter:alpha(opacity=100,finishopacity=5,style=2); height:100px; width:5px" color=navy>

<hr style="filter:alpha(opacity=0,finishopacity=100,style=2);height:100px; width:4px" color=red>

额,来源记不清了。

Html --用简单的<hr>实现多样化分割效果的更多相关文章

  1. 最简单的可取消多选效果(以从水果篮中挑选水果为例)【jsDEMO】

    [功能说明] 最简单的可取消多选效果(以从水果篮中挑选水果为例) [html代码说明] <div class="box" id="box"> < ...

  2. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  3. 简单的圆形图标鼠标hover效果 | CSS3教程

    演示 本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果.这种效果在不少时尚的酷站上都有.本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animation ...

  4. 简单的用jQuery做遮罩效果

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  5. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  6. 简单说 JavaScript实现雪花飘落效果

    说明 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval. 效果图 解释setTimeout() setTimeout函 ...

  7. ViewFlipper的简单使用实现图片轮播效果

    /** * ViewFlipper: * 安卓系统自带的一个多页面管理控件,它可以实现子页面的自动切换 * 为ViewFlipper加入View: * (1)在layout布局文件静态导入子View ...

  8. jquery实现简单鼠标经过图片预览效果

    html结构:<div class="prebtn"><img src=""/></div> css代码:#preview{ ...

  9. jq,js简单实现类似Angular.js数据绑定效果

    刚了解了下Angular.js,发现Angular.js绑定数据方面非常方便,套下教程demo: <div ng-app="myApp" ng-controller=&quo ...

随机推荐

  1. 【PRINCE2是什么】PRINCE2认证之七大主题(1)

    进入第一个主题,PRINCE2商业论证:PRINCE2指出,商业论证就是进行判断是否值得对项目进行投资,值不值的问题.PRINCE2的商业论证有四个 在项目开始时,开发商业论证.在整个项目生命周期中, ...

  2. 解决浏览器Chrome net::ERR_BLOCKED_BY_CLIENT

    问题: 开发的公司内部后台应用页面显示异常,获取不到资源 F12 提示 net::ERR_BLOCKED_BY_CLIENT 很困惑,用Chrome打开页面就异常,IE什么的就没问题- 原因:广告拦截 ...

  3. JavaScript随笔5

    事件(1) 鼠标的点击坐标: 火狐不支持 IE event.clientX//可视区坐标 event.clientY FF ev.clientX ev.clientY 兼容: var oEvent = ...

  4. IOC的理解

    转载http://www.cnblogs.com/xdp-gacl/p/4249939.html 很不错的文章,虽说是java的,但是.net也通用,所以复制一分,拿来看看挺不错的. 1.1.IoC是 ...

  5. 微软MVP攻略 (如何成为MVP?一个SQL Server MVP的经验之谈)

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 初衷 什么是微软MVP? 成为微软MVP的条件? 如何成为微软MVP? (一) 申请时间划分 (二) 前期准备 (三) ...

  6. Hawk 4.2 过滤器

    过滤器可以在流中,过滤掉不符合条件的文档.当然也可勾选反向,此时只会留下不符合条件的文档. 空对象过滤器 最为常用,需要列名,可以过滤掉所有内容为Null,或字符串全部都是空字符的情况 数值范围过滤 ...

  7. angular2系列教程(一)hello world

    今天我们要讲的是angular2系列教程的第一篇,主要是学习angular2的运行,以及感受angular2的components以及模板语法. 例子 这个例子非常简单,是个双向数据绑定.我使用了官网 ...

  8. Chrome浏览器必装的扩展工具

    名称 作用 下载地址 Postman 模拟各种http请求 点击下载 JSON Viewer 访问json结果自动视图化 点击下载 Axure RP Extension for Chrome 查看Ax ...

  9. 真实记录疑似Linux病毒导致服务器 带宽跑满的解决过程

    案例描述 由于最近我在重构之前的APP,需要和server端进行数据交互,发现有一个现象,那么就是隔1~2天总会发生获取数据超时的问题,而且必须要重启服务器才能解决.早在之前,我有留意到这个问题,但是 ...

  10. SQL语句优化

    (1)      选择最有效率的表名顺序 ( 只在基于规则的优化器中有效 ) : ORACLE 的解析器按照从右到左的顺序处理 FROM 子句中的表名, FROM 子句中写在最后的表 ( 基础表dri ...