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

This topic created in 4700 days ago, the information mentioned may be changed or developed.

边框

FFF

CSS

17 replies • 1970-01-01 08:00:00 +08:00

qiuai

PRO

Jun 29, 2013

额...没人看么

haker

Jun 29, 2013

两个选择器拼

qiuai

PRO

Jun 29, 2013

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

gonghao

Jun 29, 2013

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

loading

Jun 29, 2013 via iPhone

css3：box-shadow

qiuai

PRO

Jun 29, 2013

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

alexrezit

Jun 29, 2013

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

juicy

Jun 29, 2013

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

qiuai

PRO

Jun 29, 2013

@alexrezit 谢谢.我看看

loading

Jun 29, 2013 via iPhone

或者用js加辅助容器

otakustay

Jun 30, 2013

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

Jun 30, 2013

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

alexrezit

Jun 30, 2013

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