关注前端开发
关注用户体验

CSS巧妙实现分隔线的几种方法

前几天一@同事看新浪微博里有个类似分隔线的提示,就自己试了几种方法来实现这个分隔线。下面就是简单实现分隔线的几种方法,个人比较喜欢第二种,我也给出了最后第五种比较2的写法,请大家拍砖,或者提供其他好的方法。

单个标签实现分隔线:

 

点此查看实例展示

 

.demo_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;
}

优点:代码简洁

巧用背景色实现分隔线:

 

点此查看实例展示

 

.demo_line_02{
    height: 1px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.demo_line_02 span{
    position: relative;
    top: -8px;
    background: #fff;
    padding: 0 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{
    width:600px;
}
.demo_line_04{
    overflow: hidden;
    _zoom: 1;
}
.demo_line_04 b{
    background: #ddd;
    margin-top: 8px;
    float: left;
    width: 26%;
    height: 1px;
    _overflow: hidden;
}

优点:NUN

利用字符实现分隔线:

 

点此查看实例展示

 

<div class="demo_line_05">———————————<span>小小分隔线 字符来实现</span>————————————</div>
.demo_line_05{
    letter-spacing: -1px;
    color: #ddd;
}
.demo_line_05 span{
    letter-spacing: 0;
    color: #222;
    margin:0 20px;
}

优点:代码简洁 以上简单介绍了分隔线的写法,也许还有其它比较合适的写法,看环境各取所需吧!

未经允许不得转载:大前端 » CSS巧妙实现分隔线的几种方法
分享到:更多 ()

评论 32

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #24

    PL

    lxjwlt3年前 (2014-05-09)回复
  2. #23

    暂时还没遇到客户这样的需求,设计也还没遇到过,,,,

    Robin5年前 (2013-01-19)回复
  3. #22

    😎 第2种最好

    ICON5年前 (2013-01-08)回复
  4. #21

    我平时用的也是第二种,比较好。其它几种麻烦了点,第一种也还行。

    周威5年前 (2012-11-16)回复
  5. #20

    写的不错,我稍微扩展了一下,想了几个其他的办法:http://baoeni.com/blog/

    baoeni5年前 (2012-11-16)回复
  6. #19

    用字符的那个,万一字体不对路不是就有问题了?

    控达人5年前 (2012-08-07)回复
    • 你可以设置一个字体的

      浩子5年前 (2012-08-07)回复
  7. #18

    hr配上样式不是更简单?

    王叨叨5年前 (2012-06-21)回复
    • 宾果

      言冬5年前 (2012-08-22)回复
      • 什么意思?

        斌果4年前 (2013-05-18)回复
        • 哈哈,宾果~~

          言冬4年前 (2013-05-19)
  8. #17

    看来学习的东西很多啊。

    fengzheng1265年前 (2012-06-10)回复
  9. #16

    第一种方法非常简单,学习了.不过在IE6,7下会因为行高的原因只显示半个字,再加上position:relative属性让就OK了。

    初七5年前 (2012-05-29)回复
  10. #15

    第一种方法使用line-height不兼容

    hh5年前 (2012-05-29)回复
  11. #14

    想问下,你的代码高亮是怎么做的?

    mango5年前 (2012-05-08)回复
  12. #13

    总结的不错啦,我一直用的是第二种,没想到有这么多方法,呵呵。

    网站模板5年前 (2012-05-07)回复
  13. #12

    这个看不懂了。

    洛阳最好的医院5年前 (2012-05-07)回复
  14. #11

    不错呀!

    lft6185年前 (2012-05-05)回复
  15. #10

    喜欢大前端!!!

    yy5年前 (2012-05-04)回复
  16. #9

    分隔线很少用到啊。

    wmtimes5年前 (2012-05-04)回复
  17. #8

    学习了,见识了。
    建站论坛

    LONG5年前 (2012-05-03)回复
  18. #7

    挺有意思,一般人一下子想不到这么多方法。总结的好!

    前端组5年前 (2012-05-03)回复
  19. #6

    看来光知道css语法远远不够啊,创意无限啊

    互联网战5年前 (2012-05-02)回复
  20. #5

    不错诶,可以试试看

    FK博客5年前 (2012-05-02)回复
  21. #4

    呵呵 不错的总结 喜欢这个评论框集成的更能

    倡萌5年前 (2012-05-02)回复
  22. #3

    不错,收藏了

    一堵墙5年前 (2012-05-02)回复
  23. #2

    很不错的说,顺便占个前排~

    写代码5年前 (2012-05-02)回复
  24. #1

    来看看浩子,首页的XX弄好了 :mrgreen:

    蚂蚁在线5年前 (2012-05-02)回复
    • 路过这里。。。。不错

      Anguseleven5年前 (2013-02-17)回复

themebetter 国内更好的WordPress主题服务商

立即前往