html几种美丽的分割线 | 您所在的位置:网站首页 › 我的世界分割线图片高清 › html几种美丽的分割线 |
普通
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‧° .★° .★° .★° .★° .★° .★° .★° .★° ☆°.﹒☆°.﹒ ☆°.﹒ ☆°.﹒ ☆°.﹒ ☆°.﹒ ≧﹏≦ ≧﹏≦ ≧﹏≦ ≧﹏≦ ≧﹏≦ ≧﹏≦ ≧﹏≦ ○( ̄﹏ ̄)○ ○( ̄﹏ ̄)○ ○( ̄﹏ ̄)○ ○( ̄﹏ ̄)○ ○( ̄﹏ ̄)○ ∩﹏∩*∩﹏∩*∩﹏∩*∩﹏∩*∩﹏∩*∩﹏∩*∩﹏∩* ●▂● ●▂● ●▂● ●▂● ●▂● ●▂● ●▂● ●▂● ●▂● ★〃☆﹋★〃☆﹋★〃☆﹋★〃☆﹋★〃☆﹋★〃☆﹋ ,.*♠(||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||)♠,.* ★〞☆〞★〞☆〞★〞☆〞★〞☆〞★〞☆〞★〞☆〞 >>>> +* ++++++++ *+ |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |