普通

<HR>

<HR align=center width=300 color=#987cb9 SIZE=1>
align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度

特效（效果并不是孤立的，可相互组合）

1、两头渐变透明：
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>

2、纺锤形：
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color=#987cb9 SIZE=10>

3、右边渐变透明：
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#987cb9 SIZE=3>

4、左边渐变透明：
<HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 SIZE=3>

虚线：

双线：

7、立体效果：
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="80%" color=#987cb9 SIZE=1>

CSS渲染<hr>

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
/* Red border */
hr.new1 {border-top: 1px solid red;
}/* Dashed red border */
hr.new2 {border-top: 1px dashed red;
}/* Dotted red border */
hr.new3 {border-top: 1px dotted red;
}/* Thick red border */
hr.new4 {border: 1px solid red;
}/* Large rounded green border */
hr.new5 {border: 10px solid green;border-radius: 5px;
}
</style>
</head>
<body><h2>Style HR</h2>
<p>Default:</p>
<hr>
<p>Different styles of HR:</p>
<hr class="new1">
<hr class="new2">
<hr class="new3">
<hr class="new4">
<hr class="new5"></body>
</html>

8、钢针效果：
<HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)" width="80%" color=#987cb9 SIZE=1>

垂直分割线

其他

body{background-color: #f0f0f0;width: 700px;float: center;
}hr.style1{border-top: 1px solid #8c8b8b;
}hr.style2 {border-top: 3px double #8c8b8b;
}hr.style3 {border-top: 1px dashed #8c8b8b;
}hr.style4 {border-top: 1px dotted #8c8b8b;
}hr.style5 {background-color: #fff;border-top: 2px dashed #8c8b8b;
}hr.style6 {background-color: #fff;border-top: 2px dotted #8c8b8b;
}hr.style7 {border-top: 1px solid #8c8b8b;border-bottom: 1px solid #fff;
}hr.style8 {border-top: 1px solid #8c8b8b;border-bottom: 1px solid #fff;
}
hr.style8:after {content: '';display: block;margin-top: 2px;border-top: 1px solid #8c8b8b;border-bottom: 1px solid #fff;
}hr.style9 {border-top: 1px dashed #8c8b8b;border-bottom: 1px dashed #fff;
}hr.style10 {border-top: 1px dotted #8c8b8b;border-bottom: 1px dotted #fff;
}hr.style11 {height: 6px;background: url(http://ibrahimjabbari.com/images/hr-11.png) repeat-x 0 0;border: 0;
}hr.style12 {height: 6px;background: url(http://ibrahimjabbari.com/images/hr-12.png) repeat-x 0 0;border: 0;
}hr.style13 {height: 10px;border: 0;box-shadow: 0 10px 10px -10px #8c8b8b inset;
}hr.style14 { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}hr.style15 {border-top: 4px double #8c8b8b;text-align: center;
}
hr.style15:after {content: '\002665';display: inline-block;position: relative;top: -15px;padding: 0 10px;background: #f0f0f0;color: #8c8b8b;font-size: 18px;
}hr.style16 { border-top: 1px dashed #8c8b8b;
}
hr.style16:after { content: '\002702'; display: inline-block; position: relative; top: -12px; left: 40px; padding: 0 3px; background: #f0f0f0; color: #8c8b8b; font-size: 18px;
}hr.style17 {border-top: 1px solid #8c8b8b;text-align: center;
}
hr.style17:after {content: '§';display: inline-block;position: relative;top: -14px;padding: 0 10px;background: #f0f0f0;color: #8c8b8b;font-size: 18px;-webkit-transform: rotate(60deg);-moz-transform: rotate(60deg);transform: rotate(60deg);
}hr.style18 { height: 30px; border-style: solid; border-color: #8c8b8b; border-width: 1px 0 0 0; border-radius: 20px;
}
hr.style18:before { display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: #8c8b8b; border-width: 0 0 1px 0; border-radius: 20px;
}

华丽的分割线(逃)

◆*．◆*．◆*．◆*．◆*．◆*．◆*．◆*．◆*．◆*．

★,,♫◦★,,♫◦★,,♫◦★,,♫◦★,,♫◦★,,♫◦★,,♫◦★,,♫◦

__♥_♠_ ♦---♦ _♠_♥__"" __♥_♠_ ♦---♦ _♠_♥__

>♥★◦° ★◦° ★◦° ★◦° ★◦° ★◦° ★◦° ★◦° ★◦° ★◦°♥< ▪▫►▪▫►▪▫►▪▫►▪▫►▪▫►▪▫►▪▫►▪▫►▪▫►▪▫►▪▫►▪▫►▪▫►

*☻;:*♥+ゞ*☻;:*♥+ゞ*☻;:*♥+ゞ*☻;:*♥+ゞ*☻;:*♥+ゞ

♣◊▪▫⇔♣◊▪▫⇔ ♣◊▪▫⇔ ♣◊▪▫⇔ ♣◊▪▫⇔ ♣◊▪▫⇔

°o‧° °o‧° °o‧° °o‧° °o‧° °o‧° °o‧° °o‧° °o‧°

．★° ．★° ．★° ．★° ．★° ．★° ．★° ．★°

☆°．﹒☆°．﹒ ☆°．﹒ ☆°．﹒ ☆°．﹒ ☆°．﹒

≧﹏≦　≧﹏≦　≧﹏≦　≧﹏≦　≧﹏≦　≧﹏≦　≧﹏≦　

○(￣﹏￣)○ ○(￣﹏￣)○ ○(￣﹏￣)○ ○(￣﹏￣)○ ○(￣﹏￣)○

∩﹏∩＊∩﹏∩＊∩﹏∩＊∩﹏∩＊∩﹏∩＊∩﹏∩＊∩﹏∩＊

●▂● ●▂● ●▂● ●▂● ●▂● ●▂● ●▂● ●▂● ●▂●

★〃☆﹋★〃☆﹋★〃☆﹋★〃☆﹋★〃☆﹋★〃☆﹋

,.*♠(||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||)♠,.*

★〞☆〞★〞☆〞★〞☆〞★〞☆〞★〞☆〞★〞☆〞

>>>> +* ++++++++ *+ <<<<

*.;:。ˍ+.,:☆：﹉*.;:。ˍ+.,:☆：﹉*.;:。ˍ+.,:☆：﹉*.*.;:。

χ,.*,.χ,.*,.χ,.*,.χ,.*,.χ,.*,.χ,.*,.χ,.*,.χ,.*,.χ,.*,.χ,.*,.χ,.*,.χ

♨*,.*,.*ˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍ*,.*,.* ♨

♣,.*。°♣,.*。°♣,.*。°♣,.*。°♣,.*。°♣,.*。°♣,.*。°♣,.*。°

♀﹌★♂﹋☆♀﹌★♂﹋☆♀﹌★♂﹋☆♀﹌★♂﹋☆

☻,*.,*.☺☻,*.,*.☺☻,*.,*.☺☻,*.,*.☺☻,*.,*.☺☻,*.,*.☺

*,.*♫_____________________♪____________________♫*,.*

[☼*,.,.**,.,.*,.,.**,.,.*,.,.**,.,.*,.,.**,.,.*,.,.**,.,.*,.,.**,.,.*☼]

♥,.*,.♥,.*,.♥,.*,.♥,.*♥,.*,.♥,.*,.♥,.*,.♥,.*,.♥,.*,.♥,.*,.♥,.*,.♥

?*,.*?*,.*?*,.*?*,.*?*,.*?*,.*?*,.*?*,.*?*,.*?*,.*?*,.*?

*,.▤‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥▤,.*

[▧,*.▧]﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍[▧,*.▧]

(▦*,*.*▦––––––––––––––––––––▦*,*.*▦)

★*"`'*-.,_,.-*'`"*-.,_☆,.-*`'`*-.,_,.-*`'`*★-.,_,.-*`

∴°﹒☆°．﹒°∴°﹒★°．﹒∵‧°∴°﹒☆°°∴°﹒﹒‧°∴°﹒☆°

♫˚♪• ♫˚♪• ♫˚♪• ♫˚♪•♫˚♪• ♫˚♪• ♫˚♪• ♫˚♪• ♫˚♪•♫˚♪•

☆彡☆。.:*:?'゜★。、:*:。☆彡☆。.:*:?'゜★。、:*:。☆。

╭☆╭★╭♬ ╭☆╭★╭♬ ╭☆╭★╭♬ ╭☆╭★╭♬

♥♫o‧°♥∴☆ ♥‧°☆∴°★‧° ♥♫o‧°♥∴☆ ♥‧°☆∴♥♫o‧

．﹒‧°∴°☆．﹒‧°∴°﹒☆°．﹒‧°∴°☆．﹒‧°∴°☆

─═★:;*─═☆:;*─═★:;*─═☆:;*─═★:;*─═☆:;*

∴°﹒:+:-*-*-*-*-*-*-*-*-*☆★☆*-*-*-*-*-*-*-*-*-*-*-*:+:‧°∴

☆－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－☆

★－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－★

☆﹌★★﹌☆﹋★★﹌☆﹋★★﹌☆﹋★★﹌☆﹋★★

〝＊﹉◇﹊◆﹉＊﹊◇﹊◆﹉＊＊﹉◆﹊◇◇﹉＊〞

,.*♠( *－…… ::::--------------…… -------------::::…… －* )♠*.,

:*:･･:*:･ﾟ･:,｡*:..｡o○:*:･･:*:･:*:･･:*:･ﾟ･:,｡*:..｡o○:*:･･:*:･

★×**×★☆×**×★☆×**×★☆×**×★☆×**×★☆×**×★

≡※≡※≡※≡※≡※≡※≡※≡※≡※≡※≡※≡※≡※≡※≡※

Ψ ╬ Ψ ╬ Ψ ╬ Ψ ╬ Ψ ╬ Ψ ╬ Ψ ╬ Ψ ╬ Ψ ╬

↗☆★ ↙ ↗☆★ ↙↗☆★ ↙↗☆★ ↙↗☆★ ↙

ﾟ･*:.｡. .｡.:*･ﾟ･:,｡ﾟ･:,｡★ﾟ･:,｡ﾟ･:,｡☆ﾟ･*:.｡. .｡.:*･ﾟ

☻ ☺ ☼ ☻ ☺ ☼ ☻ ☺ ☼ ☻ ☺ ☼ ☻ ☺ ☼ ☻ ☺ ☼

ੀ;:*彡ౄ:*.:ੀ;:*彡ౄ:*.:ੀ;:*彡ౄ:*.:ੀ;:*彡ౄ:*.:

๑ ๑ ๑ ๑ ๑ ๑ ๑ ๑ ๑ ๑ ๑ ๑

ﾟ･*:.｡. .｡.:*･:;;::*:｡o○ﾟ･*:.｡. .｡.:*･:;;::*:｡o○

☆¤·.¸¸.·´¯`·.¸¸.¤☆๑Nop๑☆¤·.¸¸.·´¯`·.¸¸.¤☆

~ ○( º ㉦ º )○ ~ ○( º ㉦ º )○ ~ ○( º ㉦ º )○ ~ ○( º ㉦ º )○ ~

ౄ?:;;::*:ஃ:.;ౄ?:;;::*:ஃ:.;ౄ?:;;::*:ஃ:.;ౄ?:;;::*:ஃ:.;

o(๕_๕) ♥ (๖_๖)o o(๕_๕) ♥ (๖_๖)o o(๕_๕) ♥ (๖_๖)o o(๕_๕) ♥ (๖_๖)o

阿(。￣O￣)!~ 彌(。￣=￣)!~ 陀(。￣□￣)!~ 佛(。￣△￣)!~

☆~※~★~☆~※~★~☆~※~★~☆~※~★~☆~※~★~

＼☆＼★／☆＼★／☆＼★／☆＼★／☆＼★／☆＼★／

◇。☆。．０◇。☆。．０◇。☆。．０◇。☆。．０

`*-.,.-*`♩`*-.,.-*`♪`*-.,.-*`♫`*-.,.-*`♬`*-.,.-*`♩`*-.,.-*`♪`*-.,.-*`♫`*-.,.-*`

≡≡≡≡≡≡≡≡≡≡≡≡≡≡▶▷►◈◄◀◁≡≡≡≡≡≡≡≡≡≡≡≡≡≡

‧°∴°﹒☆°．♥‧°∴°☆．﹒♥‧°∴°﹒☆°．♥‧°∴°☆．﹒♥

♩≡ ♪ ≡♫ ≡♬≡♩≡ ♪≡ ♩≡ ♪ ≡♫ ≡♬≡♩≡ ♪≡ ♩≡ ♪ ≡♫ ≡♬≡

☆彡.*゜★彡.*゜☆彡.*゜★彡.*゜☆彡.*゜★彡.*゜☆彡.*゜★彡.*゜

∮╬☻╬☺╬∮╬☻╬☺╬∮╬☻╬☺╬∮╬☻╬☺╬∮╬☻╬☺╬

☜♣☞‧☜♣☞‧☜♣☞‧☜♣☞‧☜♣☞‧☜♣☞‧☜♣☞‧

※ § ? ※ § ? ※ § ? ※ § ? ※ § ? ※ § ? ※ § ?

─═♤═─‧─═♥═─‧─═♤═─‧─═♥═─‧─═♤═─

×°★×╳×∮°≠╭★×°★×╳×∮°≠╭★×°★×╳×∮°≠╭★

【↙☆】∥♀〃♂∥【↙☆】∥♀〃♂∥【↙☆】∥♀〃♂∥

．·°∴ ☆．．·°．·°∴ ☆．．·°．·°∴ ☆．．·°

– ‐‐——– ‐‐——

━┉… ●━━……━━● …┉━

…·～·…οΟ○ の ○Οο…·～·…

.*""*.·°∴ ☆…·…·…·…·…·…·…·☆．．·°*""*.

＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋

＃。。。＃。。。＃。。。＃。。。＃。。。＃。。。＃。。。＃

＊═—═—═—＊＊═—═—═—＊

-------∽-★-∽------∽-★-∽--------

□■□■□■□■□■□■□■□■□■□■□
╰☆╮　　　　　　　　　　　 ╰★╮

＊═—═—═—＊の＊═—═—═—＊
＿ ? ▁ ▂ ▃ ▄ ; ▆ ▇ █ ▏ ▎ ▍ ▌ ▋ ▊ ▉ ◢

＊．．．＊．．．＊．．．＊．．．＊．．．＊

→☆→☆→☆→☆→ ←★←★←★←★←★←

╠═╬═╬═╬═╬ ═╬═╬═╬═╬═╬═╣

☆．☆．☆．☆．☆． ☆．☆．☆．☆．☆．☆．

★~☆·☆.~*∴*~★*∴ *·∴~*★*∴*★~☆·☆.~*∴*~★

☆°．·∴°♀? ·★° ．·♂?∴°☆°．·∴°♀? °

?~。~。~。~。~。~。 ~。~。~。~。~。~。~。~?

╔＊～◤◆☆．．．．．．．．．．．．☆◆◢～＊╗

html几种美丽的分割线相关推荐

[html代码] 几种美丽的分割线
一.普通 1.<HR> 2.<HR align=center width=300 color=#987cb9 SIZE=1> align 线条位置(可选left.right.c ...
【HTML代码】几种美丽的分割线
一.普通 1.<HR/> 2. <HR align=center width=300 color=#987cb9 SIZE=1/> align 线条位置(可选left.righ ...
网站模型|可以帮助你以一种美丽、独特的方式展示你的网站设计。
一个好的网站模型设计可以帮助你以一种美丽.独特的方式展示你的网站设计.哪里获取网站模型网址?一流设计导航|16map 分享设计师最喜欢的网站网址和工具,以及创建你的网站模型的技巧! 一流设计导航为 ...
cdoj1344卿学姐种美丽的花
地址:http://acm.uestc.edu.cn/#/problem/show/1344 题目: 卿学姐种美丽的花 Time Limit: 8000/4000MS (Java/Others) ...
2016 UESTC Training for Data Structures O - 卿学姐种美丽的花树状数组+等差数列
O - 卿学姐种美丽的花 Time Limit: 8000/4000MS (Java/Others) Memory Limit: 125535/65535KB (Java/Others) Su ...
有一种美丽.....叫做放弃...
有一种美丽.....叫做放弃! 一次默默的放弃,放弃一个心仪却无缘份的朋友: 放弃某种投入却无收获的感情: 放弃某种心灵的期望: 放弃某种思想. 这时就会生出一种伤感,然而这种伤感并不妨碍自己去重新开 ...
征服者驱动程序下载_征服者纸上的五种美丽免费字体
征服者驱动程序下载 Conqueror papers are launching a paper range and as part of the promotion, manufacturer Ar ...
《暗恋是一种美丽的情愫》
我是一个注定要为情所累的人.在刚刚懂得爱为何物的年纪,上天让我遭遇了他–一个我终生都无法释怀的男孩,可是他的心中早已有人进驻. 那段日子,一颗无以倾诉的心每日深陷彷徨于一种无助的迷恋之中,不可自拔.仿 ...
英文书法字体免费字体下载_您可以免费下载45种美丽的字体
现在是时候清除您早已被遗忘的装有字体的百宝箱,并在年底之前引入新字体了. 在这个集合中,我收集了2015年以来的45种免费字体,您可以将它们添加到漂亮的字体库中,以用于2016年项目. 当然,就像一个 ...
45种美丽、免费的字体，适用于潮流的网页设计
适当的挑选字体样式应用在网页设计中,就是网页设计师将适当的主题和心情放在网页中.这些免费的网页字体是由一群天才设计师和字体工厂创造出来的. 本文收集了45种字体,你可以自由下载并使用这些字体. 清爽. ...

html几种美丽的分割线

普通

特效（效果并不是孤立的，可相互组合）

虚线：

双线：

CSS渲染<hr>

垂直分割线

其他

华丽的分割线(逃)

html几种美丽的分割线相关推荐

最新文章

热门文章