V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
chilaoqi
V2EX  ›  问与答

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

  •  
  •   chilaoqi · 2013-09-14 22:46:59 +08:00 · 4374 次点击
    这是一个创建于 4069 天前的主题,其中的信息可能已经有所发展或是发生改变。
    类似 ------------ page 1 -------------------

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

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

    ps,刚才发的贴被吞了么?
    9 条回复    1970-01-01 08:00:00 +08:00
    P233
        1
    P233  
       2013-09-14 23:32:22 +08:00
    我的办法是,外层 container 清除浮动

    内层三个元素全部 float:left

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

    中间 width 10%

    responsive 效果
    chilaoqi
        2
    chilaoqi  
    OP
       2013-09-15 08:34:49 +08:00
    @P233 嗯,好像挺科学,试过没问题么?
    baby
        3
    baby  
       2013-09-15 09:09:52 +08:00 via iPhone
    虚线用背景图,显示文字时背景设置白色挡住虚线。
    83f420984
        4
    83f420984  
       2013-09-15 09:21:08 +08:00 via Android
    @P233 想法非常不错呀!我以前是用背景做的
    83f420984
        5
    83f420984  
       2013-09-15 09:48:36 +08:00 via Android
    我试了下效果非常好
    romoo
        6
    romoo  
       2013-09-15 10:05:38 +08:00
    <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  
       2013-09-15 10:44:32 +08:00
    easytest
        8
    easytest  
       2013-09-15 11:10:33 +08:00
    @lingyired

    @romoo

    thanks a lot !
    chilaoqi
        9
    chilaoqi  
    OP
       2013-09-15 11:40:07 +08:00
    @lingyired perfect,刚才挑了最简单的实现了

    @romoo 恩,不错,也够简练了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3049 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 13:37 · PVG 21:37 · LAX 05:37 · JFK 08:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.