|
普通
align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度
特效（效果并不是孤立的，可相互组合）
1、两头渐变透明：
2、纺锤形：
3、右边渐变透明：
4、左边渐变透明：
虚线：
双线：
7、立体效果：
CSS渲染
/* 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 HR
Default:
Different styles of HR:
8、钢针效果：
垂直分割线
其他
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‧°
．★° ．★° ．★° ．★° ．★° ．★° ．★° ．★°
☆°．﹒☆°．﹒ ☆°．﹒ ☆°．﹒ ☆°．﹒ ☆°．﹒
≧﹏≦ ≧﹏≦ ≧﹏≦ ≧﹏≦ ≧﹏≦ ≧﹏≦ ≧﹏≦
○(￣﹏￣)○ ○(￣﹏￣)○ ○(￣﹏￣)○ ○(￣﹏￣)○ ○(￣﹏￣)○
∩﹏∩＊∩﹏∩＊∩﹏∩＊∩﹏∩＊∩﹏∩＊∩﹏∩＊∩﹏∩＊
●▂● ●▂● ●▂● ●▂● ●▂● ●▂● ●▂● ●▂● ●▂●
★〃☆﹋★〃☆﹋★〃☆﹋★〃☆﹋★〃☆﹋★〃☆﹋
,.*♠(||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||)♠,.*
★〞☆〞★〞☆〞★〞☆〞★〞☆〞★〞☆〞★〞☆〞
>>>> +* ++++++++ *+ |