html几种美丽的分割线

普通

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


 

虚线:


<HR style="border:1 dashed #987cb9" width="80%" color=#987cb9 SIZE=1>

双线:


<HR style="border:3 double #987cb9" 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>


垂直分割线

<table border="1px" cellpadding="0" cellspacing="0" style="height:265px;border-left-style:solid; border-bottom-style:none;border-right-style:none;border-top-style:none">

其他

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 ̄)!~ 彌(。 ̄= ̄)!~ 陀(。 ̄□ ̄)!~ 佛(。 ̄△ ̄)!~


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


\☆\★/☆\★/☆\★/☆\★/☆\★/☆\★/


◇。☆。.0◇。☆。.0◇。☆。.0◇。☆。.0


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


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


‧°∴°﹒☆°.♥‧°∴°☆.﹒♥‧°∴°﹒☆°.♥‧°∴°☆.﹒♥


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


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


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


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


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


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


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


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

.·°∴ ☆..·°.·°∴ ☆..·°.·°∴ ☆..·° 


– ‐‐——– ‐‐—— 


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


…·~·…οΟ○ の ○Οο…·~·… 

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

++++++++++++++++++++++++ 


#。。。#。。。#。。。#。。。#。。。#。。。#。。。# 

*═—═—═—**═—═—═—* 


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

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


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

*...*...*. ..*...*...* 

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

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

☆.☆.☆.☆.☆. ☆.☆.☆.☆.☆.☆. 

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


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


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

╔*~◤◆☆..... .......☆◆◢~*╗


 

  • 63
    点赞
  • 267
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xosg

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值