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

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

  •  
  •   qiuai · 2013-06-29 15:14:21 +08:00 · 3426 次点击
    这是一个创建于 4150 天前的主题,其中的信息可能已经有所发展或是发生改变。
    在背景色是黑色的前提下,如何用CSS实现一条#C4C4C4的边框下面还有一条#FFF的边框...
    17 条回复    1970-01-01 08:00:00 +08:00
    qiuai
        1
    qiuai  
    OP
       2013-06-29 15:26:19 +08:00
    额...没人看么
    haker
        2
    haker  
       2013-06-29 15:38:32 +08:00
    两个选择器拼
    qiuai
        3
    qiuai  
    OP
       2013-06-29 15:44:04 +08:00
    @haker =.=主要是觉得不好玩...所以问问看有没有什么其他的解决方案.
    gonghao
        4
    gonghao  
       2013-06-29 15:50:48 +08:00
    @qiuai 不考虑IE兼容性的话,可以用 outline 或者用 after 伪类也能行~
    loading
        5
    loading  
       2013-06-29 16:05:12 +08:00 via iPhone
    css3:box-shadow
    qiuai
        6
    qiuai  
    OP
       2013-06-29 16:10:33 +08:00
    @loading 有IE下的方案么?没有的话就这个了...谢谢
    @gonghao 嗯.....还是box-shadow吧
    alexrezit
        7
    alexrezit  
       2013-06-29 16:16:03 +08:00
    @qiuai
    建议用 gradient border.
    shadow 不是做这个用的.
    juicy
        8
    juicy  
       2013-06-29 16:20:13 +08:00
    如果可以改html的话,可以内部再来个辅助容器。。。
    qiuai
        9
    qiuai  
    OP
       2013-06-29 16:22:04 +08:00
    @alexrezit 谢谢.我看看
    loading
        10
    loading  
       2013-06-29 16:29:15 +08:00 via iPhone
    或者用js加辅助容器
    otakustay
        11
    otakustay  
       2013-06-30 00:48:46 +08:00
    box-shadow因为不记入盒模型,当border用难免产生一些不便,几个方案比较合适:
    1. 用:before造伪元素,好处是支持IE8,缺点是麻烦
    2. border-image+gradient,缺点是IE到11才有
    3. 背景图,全兼容,图片也不用大,版本高点的浏览器datauri写在css中支持到IE8,低版本的外链图片永久缓存
    4. gradient做背景图,不过背景图同样没记在盒模型中要留出padding给它,没啥优势
    5. outline,和box-shadow没啥区别

    所以我还是推荐背景图算了……
    qiuai
        12
    qiuai  
    OP
       2013-06-30 08:18:33 +08:00
    @otakustay 明白了.昨天研究了下,就直接用相邻元素的border-top做了.本来以为会有个什么东西来实现双层border的..
    alexrezit
        13
    alexrezit  
       2013-06-30 08:26:17 +08:00
    @qiuai
    所以说还是用 gradient 算了... 虽然不兼容脑残 IE...
    83f420984
        14
    83f420984  
       2013-06-30 08:38:53 +08:00 via Android
    其实用辅助容器加两条有颜色的背景框图片也可以,这样什么IE都兼容
    ghbjy1128
        15
    ghbjy1128  
       2013-06-30 09:01:26 +08:00
    qiuai
        16
    qiuai  
    OP
       2013-06-30 09:05:25 +08:00
    @ghbjy1128 outline似乎是不支持-top之类?也就不能只为下边框增加外边框了..
    @83f420984 嗯.
    @alexrezit =.=嗯...
    byron
        17
    byron  
       2013-06-30 10:34:59 +08:00
    新手飘过。
    我和我的小伙伴们都惊呆了。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1654 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:53 · PVG 00:53 · LAX 08:53 · JFK 11:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.