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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4506 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

边框

FFF

CSS

17 条回复 • 1970-01-01 08:00:00 +08:00

qiuai

PRO

2013-06-29 15:26:19 +08:00

额...没人看么

haker

2013-06-29 15:38:32 +08:00

两个选择器拼

qiuai

PRO

2013-06-29 15:44:04 +08:00

@haker =.=主要是觉得不好玩...所以问问看有没有什么其他的解决方案.

gonghao

2013-06-29 15:50:48 +08:00

@qiuai 不考虑IE兼容性的话，可以用 outline 或者用 after 伪类也能行～

loading

2013-06-29 16:05:12 +08:00 via iPhone

css3：box-shadow

qiuai

PRO

2013-06-29 16:10:33 +08:00

@loading 有IE下的方案么?没有的话就这个了...谢谢
@gonghao 嗯.....还是box-shadow吧

alexrezit

2013-06-29 16:16:03 +08:00

@qiuai
建议用 gradient border.
shadow 不是做这个用的.

juicy

2013-06-29 16:20:13 +08:00

如果可以改html的话，可以内部再来个辅助容器。。。

qiuai

PRO

2013-06-29 16:22:04 +08:00

@alexrezit 谢谢.我看看

loading

2013-06-29 16:29:15 +08:00 via iPhone

或者用js加辅助容器

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

PRO

2013-06-30 08:18:33 +08:00

@otakustay 明白了.昨天研究了下,就直接用相邻元素的border-top做了.本来以为会有个什么东西来实现双层border的..

alexrezit

2013-06-30 08:26:17 +08:00

@qiuai
所以说还是用 gradient 算了... 虽然不兼容脑残 IE...