分割线用CSS样式做出来的效果

一：单个标签实现分隔线：. ; ; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; 　　text-align: center; }

二：巧用背景色实现分隔线：. 20px; }

三：inline-block实现分隔线：.demo_line_03{ width:600px; } .demo_line_03 b{ background: #ddd; margin-top: 4px; display: inline-block; width: 180px; height: 1px; _overflow: hidden; vertical-align: middle; } .demo_line_03 span{ display: inline-block; width: 220px; vertical-align: middle; }

四：浮动实现分隔线：.; } .demo_line_04 b{ background: #ddd; margin-top: 8px; float: left; width: 26%; height: 1px; _overflow: hidden; }

五：利用字符实现分隔线:<div class="demo_line_05">———————————<span>小小分隔线字符来实现</span>————————————</div>

.; 20px; }

效果图：

巴特西

分割线用CSS样式做出来的效果

最新文章

热门文章