CSS多种方法实现分隔线

2020-01-27 14:19:19

字体：大中小

来源：转载

供稿：网友

代码中演示了几种用CSS实现分隔线的方法，有的是使用单标签实现，有的是使用颜色搭配来实现，有的则是使用inline-block实现，或者用浮动来实现，当然也可直接用字符来现，具体选用哪一种方法，就看你的爱好了，仁者见仁，智者见智。

<!DOCTYPE HTML><html><head><meta charset="UTF-8" /><title>CSS实现分隔线的几种方法</title><style>[url=home.php?mod=space&uid=597245]@charset[/url] "utf-8";body,h1,h2,h3,h4,p,ul,li,ol,dl,dt,dd,input,textarea,figure,form{margin:0;padding:0}body,input,textarea{font-size:12px;font-family:microsoft yahei}body{text-align:center;color:#33383D;}ul,ol{list-style:none}img{border:0}button,input {line-height:normal;*overflow:visible}input,textarea{outline:none}a{color:#3B8DD1;text-decoration:none}a:hover{color:#8CAC52}.demo-header{position:relative;height:22px;background-color:#33363B;line-height:22px;padding:2px 10px;text-align: left;}.demo-name{color: #ccc;}.demo-title,.demo-footer{height:0;overflow:hidden}.demo-container{clear: both;padding:40px 10px 20px;text-align:left;margin:0 auto;line-height: 18px;}.demo h2{font-size: 15px;padding-bottom: 6px;margin-bottom: 20px;border-bottom: solid 1px #ddd;}</style></head><body><div class="demo-container demo">	<style type="text/css">.demo{	width: 600px;}.line_01{    padding: 0 20px 0;    margin: 20px 0;    line-height: 1px;    border-left: 200px solid #ddd;    border-right: 200px solid #ddd;    text-align: center;}.line_02{    height: 1px;    border-top: 1px solid #ddd;    text-align: center;}.line_02 span{    position: relative;    top: -12px;    background: #fff;    padding: 0 20px;}.line_03{    width:600px;}.line_03 b{    background: #ddd;    margin-top: 4px;    display: inline-block;    width: 180px;    height: 1px;    _overflow: hidden;    vertical-align: middle;}.line_03 span{    display: inline-block;    width: 220px;    vertical-align: middle;text-align: center;}.line_04{    width:600px;}.line_04{    overflow: hidden;    _zoom: 1;}.line_04 b{    background: #ddd;    margin-top: 12px;    float: left;    width: 26%;    height: 1px;    _overflow: hidden;}.line_04 span{    padding: 0 10px;    width: 32%;    float: left;    text-align: center;}.line_05{    letter-spacing: -1px;    color: #ddd;}.line_05 span{    letter-spacing: 0;    color: #222;    margin:0 20px;}</style><div class="line_01">小小分隔线 单标签实现</div><br><br><div class="line_02"><span>小小分隔线 巧用色实现</span></div><br><br><div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div><br><br><div class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></div><br><br><div class="line_05">———————————<span>小小分隔线 字符来实现</span>————————————</div></div></body></html>

上一篇：9种样式CSS3 渐变按钮集合

下一篇：纯CSS3实现的饼形图和倒三角统计图效果