chilaoqi
V2EX  ›  问与答

css实现虚线装订线特效,怎么精炼的实现

  •  
  •   chilaoqi · Sep 14, 2013 · 5145 views
    This topic created in 4629 days ago, the information mentioned may be changed or developed.
    类似 ------------ page 1 -------------------

    这样,p border: 1px dashed; overflow: hidden?

    前端的同学能给个精炼的代码么?谢谢

    ps,刚才发的贴被吞了么?
    9 replies    1970-01-01 08:00:00 +08:00
    P233
        1
    P233  
       Sep 14, 2013
    我的办法是,外层 container 清除浮动

    内层三个元素全部 float:left

    左右两个元素 width:45%; border-top: 1px dashed, margin-top

    中间 width 10%

    responsive 效果
    chilaoqi
        2
    chilaoqi  
    OP
       Sep 15, 2013
    @P233 嗯,好像挺科学,试过没问题么?
    baby
        3
    baby  
       Sep 15, 2013 via iPhone
    虚线用背景图,显示文字时背景设置白色挡住虚线。
    83f420984
        4
    83f420984  
       Sep 15, 2013 via Android
    @P233 想法非常不错呀!我以前是用背景做的
    83f420984
        5
    83f420984  
       Sep 15, 2013 via Android
    我试了下效果非常好
    romoo
        6
    romoo  
       Sep 15, 2013
    <div><p>page 1</p></div>

    .div{position: relative; border-bottom: 1px solid #5C5C5C;}
    p{position: absolute; top: **px; left: 50%; margin-left: -**px; background: #fff;}
    lingyired
        7
    lingyired  
       Sep 15, 2013
    easytest
        8
    easytest  
       Sep 15, 2013
    @lingyired

    @romoo

    thanks a lot !
    chilaoqi
        9
    chilaoqi  
    OP
       Sep 15, 2013
    @lingyired perfect,刚才挑了最简单的实现了

    @romoo 恩,不错,也够简练了
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   959 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 45ms · UTC 21:51 · PVG 05:51 · LAX 14:51 · JFK 17:51
    ♥ Do have faith in what you're doing.