qiuai
V2EX  ›  问与答

在背景色是黑色的前提下,如何用CSS实现一条#C4C4C4的边框下面还有一条#FFF的边框...

  •  
  •   qiuai · Jun 29, 2013 · 4356 views
    This topic created in 4887 days ago, the information mentioned may be changed or developed.
    在背景色是黑色的前提下,如何用CSS实现一条#C4C4C4的边框下面还有一条#FFF的边框...
    17 replies  •  1970-01-01 08:00:00 +08:00
    qiuai
    qiuai
    OP
    Jun 29, 2013
    1
    额...没人看么
    haker
    haker
    Jun 29, 2013
    2
    两个选择器拼
    qiuai
    qiuai
    OP
    Jun 29, 2013
    3
    @haker =.=主要是觉得不好玩...所以问问看有没有什么其他的解决方案.
    gonghao
    gonghao
    Jun 29, 2013
    4
    @qiuai 不考虑IE兼容性的话,可以用 outline 或者用 after 伪类也能行~
    loading
    loading
    Jun 29, 2013 via iPhone
    5
    css3:box-shadow
    qiuai
    qiuai
    OP
    Jun 29, 2013
    6
    @loading 有IE下的方案么?没有的话就这个了...谢谢
    @gonghao 嗯.....还是box-shadow吧
    alexrezit
    alexrezit
    Jun 29, 2013
    7
    @qiuai
    建议用 gradient border.
    shadow 不是做这个用的.
    juicy
    juicy
    Jun 29, 2013
    8
    如果可以改html的话,可以内部再来个辅助容器。。。
    qiuai
    qiuai
    OP
    Jun 29, 2013
    9
    @alexrezit 谢谢.我看看
    loading
    loading
    Jun 29, 2013 via iPhone
    10
    或者用js加辅助容器
    otakustay
    otakustay
    Jun 30, 2013
    11
    box-shadow因为不记入盒模型,当border用难免产生一些不便,几个方案比较合适:
    1. 用:before造伪元素,好处是支持IE8,缺点是麻烦
    2. border-image+gradient,缺点是IE到11才有
    3. 背景图,全兼容,图片也不用大,版本高点的浏览器datauri写在css中支持到IE8,低版本的外链图片永久缓存
    4. gradient做背景图,不过背景图同样没记在盒模型中要留出padding给它,没啥优势
    5. outline,和box-shadow没啥区别

    所以我还是推荐背景图算了……
    qiuai
    qiuai
    OP
    Jun 30, 2013
    12
    @otakustay 明白了.昨天研究了下,就直接用相邻元素的border-top做了.本来以为会有个什么东西来实现双层border的..
    alexrezit
    alexrezit
    Jun 30, 2013
    13
    @qiuai
    所以说还是用 gradient 算了... 虽然不兼容脑残 IE...
    83f420984
    83f420984
    Jun 30, 2013 via Android
    14
    其实用辅助容器加两条有颜色的背景框图片也可以,这样什么IE都兼容
    qiuai
    qiuai
    OP
    Jun 30, 2013
    16
    @ghbjy1128 outline似乎是不支持-top之类?也就不能只为下边框增加外边框了..
    @83f420984 嗯.
    @alexrezit =.=嗯...
    byron
    byron
    Jun 30, 2013
    17
    新手飘过。
    我和我的小伙伴们都惊呆了。。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2025 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 62ms · UTC 12:23 · PVG 20:23 · LAX 04:23 · JFK 07:23
    ♥ Do have faith in what you're doing.