Html --用简单的<hr>实现多样化分割效果
最基本的:<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>实现多样化分割效果的更多相关文章
- 最简单的可取消多选效果(以从水果篮中挑选水果为例)【jsDEMO】
[功能说明] 最简单的可取消多选效果(以从水果篮中挑选水果为例) [html代码说明] <div class="box" id="box"> < ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 简单的圆形图标鼠标hover效果 | CSS3教程
演示 本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果.这种效果在不少时尚的酷站上都有.本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animation ...
- 简单的用jQuery做遮罩效果
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- 史上最简单的js+css3实现时钟效果
今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...
- 简单说 JavaScript实现雪花飘落效果
说明 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval. 效果图 解释setTimeout() setTimeout函 ...
- ViewFlipper的简单使用实现图片轮播效果
/** * ViewFlipper: * 安卓系统自带的一个多页面管理控件,它可以实现子页面的自动切换 * 为ViewFlipper加入View: * (1)在layout布局文件静态导入子View ...
- jquery实现简单鼠标经过图片预览效果
html结构:<div class="prebtn"><img src=""/></div> css代码:#preview{ ...
- jq,js简单实现类似Angular.js数据绑定效果
刚了解了下Angular.js,发现Angular.js绑定数据方面非常方便,套下教程demo: <div ng-app="myApp" ng-controller=&quo ...
随机推荐
- 【PRINCE2是什么】PRINCE2认证之七大主题(1)
进入第一个主题,PRINCE2商业论证:PRINCE2指出,商业论证就是进行判断是否值得对项目进行投资,值不值的问题.PRINCE2的商业论证有四个 在项目开始时,开发商业论证.在整个项目生命周期中, ...
- 解决浏览器Chrome net::ERR_BLOCKED_BY_CLIENT
问题: 开发的公司内部后台应用页面显示异常,获取不到资源 F12 提示 net::ERR_BLOCKED_BY_CLIENT 很困惑,用Chrome打开页面就异常,IE什么的就没问题- 原因:广告拦截 ...
- JavaScript随笔5
事件(1) 鼠标的点击坐标: 火狐不支持 IE event.clientX//可视区坐标 event.clientY FF ev.clientX ev.clientY 兼容: var oEvent = ...
- IOC的理解
转载http://www.cnblogs.com/xdp-gacl/p/4249939.html 很不错的文章,虽说是java的,但是.net也通用,所以复制一分,拿来看看挺不错的. 1.1.IoC是 ...
- 微软MVP攻略 (如何成为MVP?一个SQL Server MVP的经验之谈)
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 初衷 什么是微软MVP? 成为微软MVP的条件? 如何成为微软MVP? (一) 申请时间划分 (二) 前期准备 (三) ...
- Hawk 4.2 过滤器
过滤器可以在流中,过滤掉不符合条件的文档.当然也可勾选反向,此时只会留下不符合条件的文档. 空对象过滤器 最为常用,需要列名,可以过滤掉所有内容为Null,或字符串全部都是空字符的情况 数值范围过滤 ...
- angular2系列教程(一)hello world
今天我们要讲的是angular2系列教程的第一篇,主要是学习angular2的运行,以及感受angular2的components以及模板语法. 例子 这个例子非常简单,是个双向数据绑定.我使用了官网 ...
- Chrome浏览器必装的扩展工具
名称 作用 下载地址 Postman 模拟各种http请求 点击下载 JSON Viewer 访问json结果自动视图化 点击下载 Axure RP Extension for Chrome 查看Ax ...
- 真实记录疑似Linux病毒导致服务器 带宽跑满的解决过程
案例描述 由于最近我在重构之前的APP,需要和server端进行数据交互,发现有一个现象,那么就是隔1~2天总会发生获取数据超时的问题,而且必须要重启服务器才能解决.早在之前,我有留意到这个问题,但是 ...
- SQL语句优化
(1) 选择最有效率的表名顺序 ( 只在基于规则的优化器中有效 ) : ORACLE 的解析器按照从右到左的顺序处理 FROM 子句中的表名, FROM 子句中写在最后的表 ( 基础表dri ...