<hr>标签不止创建html水平线也可以画圆噢

  看到上面这张图,第一反应是用photoshop类似作图软件画出来的,但那是华丽丽的错觉。一个简单的<hr>标签就能完成漂亮的效果,而不仅仅是创建html水平线。想知道怎么实现吗?Let‘s do it!

  

<hr style="border-top: #ff0000 solid; color: #00ff00; border-bottom: #0000ff solid; height: 59px; width: 10;"> 

<hr style="height:50px; width:50px" color=orange>

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

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

  FILTER: Alpha 透明度设置的效果,实例

  Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

  Opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明。

  FinishOpacity:设置渐变的透明效果时,用来指定结束时的透明度,范围也是0 到 100。

  Style:设置渐变透明的样式,值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。

  StartX和StartY:代表渐变透明效果的开始X和Y坐标。

  FinishX和FinishY:代表渐变透明效果结束X和Y 的坐标。

  <hr>标签的属性

  更多实例:

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>

时间: 2024-10-12 05:48:36

<hr>标签不止创建html水平线也可以画圆噢的相关文章

HTML &lt;hr /&gt; 标签 在页面中创建一条水平线

一,定义和用法 <hr /> 标签在 HTML 页面中创建一条水平线. 水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分. 二,HTML 与 XHTML 之间的差异 在 HTML 中,<hr> 标签没有结束标签. 在 XHTML 中,<hr> 必须被正确地关闭,比如 <hr />. 在 HTML 4.01 中,hr 元素的所有呈现属性均不被赞成使用. 在 XHTML 1.0 Strict DTD 中,hr 元素的所有呈现属性均不被

课时18.h标签和p标签以及hr标签(掌握)

如何在webstorm中利用快捷键创建一个新的html的文件? 同时按下键盘上的ctrl+alt+insert(windows) 同时按下键盘上的ctrl+alt+n(os) h标签系列(header1-header6) 作用:用于给文本添加标题语义 格式:<h1>xxxxx</h1> 注意点: h标签是用来给文本添加标签题语义的,而不是用来修改文本的样式的 h标签一共有6个,从h1-h6,最多只能到6,超过6则无效(可以利用每一个h标签都独占一行,如果写到h7则会出现h7与h6标

Chromium为视频标签&lt;video&gt;创建播放器的过程分析

Chromium是通过WebKit解析网页内容的.当WebKit遇到<video>标签时,就会创建一个播放器实例.WebKit是平台无关的,而播放器实现是平台相关的.因此,WebKit并没有自己实现播放器,而仅仅是创建一个播放器接口.通过这个播放器接口,可以使用平台提供的播放器来播放视频的内容.这就简化了Chromium对视频标签的支持.本文接下来就分析Chromium为视频标签创建播放器的过程. 老罗的新浪微博:http://weibo.com/shengyangluo,欢迎关注! 以And

关于hr标签兼容个浏览器的代码

hr标签,相信大家都能熟悉,我们一般用它来产生横线的效果.我们可以对它定义“颜色”.“高度”.“宽度”.“边框”等样式. 在此只讨论“颜色”和“边框”对于不同版本浏览器的兼容性. 颜色: 火狐.IE7+= :通过background-color来指定. IE6-= :通过color指定. 方案:要为hr指定颜色,同时使用background-color和color. 边框: IE7+= :如不指定border:none,那么浏览器默认会为hr加上一定宽度的边框. IE6-= :浏览器默认不会为其

认识&lt;hr&gt;标签,添加水平横线

在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些.如下图所示: 语法: html4.01版本 <hr> xhtml1.0版本 <hr /> 注意: 1. <hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签. 2. <hr />标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改. 3. 大家

&lt;hr /&gt;标签的颜色和粗细设定

设置<hr />的颜色和粗细,不需要用到style,直接用标签的color和size属性: <hr color="red" size="0.5" /> <hr />标签默认还有margin值,可以用style去掉 原文地址:https://www.cnblogs.com/dige1993/p/8387758.html

TFS二次开发-基线文件管理器(4)-标签的创建

上一节已经完成了源码文件的读取,如果要将已经选择的文件保存为一个标签(Lable).在VS我们只能对一个目录做标签,非常的不方便.如果用下面的方法,将选择的文件路径保存为一个List在打标签,就非常的灵活了. 保存为List的方法很简单,需要递归将已经选择的书中的文件保存一下. 这里为了显示方便,我先将其存入一个Listbox中, listBox1.Items.Clear(); for (int i = 0; i < treeView1.Nodes.Count; i++) { TreeNode

js中标签的创建

第一种创建方法(页面加载完成后,页面代码将会被覆盖) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input type="button" value="创建一个p" id=

HR学习01——创建组织单位

创建组织单位: RH_OBJECT_CREATE REPORT ZLYHR01. DATA:LS_OBJ TYPE OBJEC, LV_STU TYPE GDSTR-SVECT, LV_TIT TYPE CHAR20, LV_SUBTYP TYPE SUBTYP, LS_P1000 TYPE P1000, LT_P1000 TYPE TABLE OF P1000. LS_OBJ-OTYPE = 'O'."对象类型 LS_OBJ-PLVAR = '01'."计划版本 CALL FUNCT