CSS3与CSS1实现双线框方法的比较

网络整理 - 07-29
  初看标题,您可能还反应不过来什么是“双线框”。下面的图可以让您看到什么是所谓的“双线框”,这在网页设计中比较常见。


图6: 去掉了内边框的双线框

  自然,如图7的常见效果就无法做到了:

点击图片打开新窗口浏览


图7: 常见双线框效果

  既然标题是CSS3 VS CSS1,那么CSS1的实现方法已经有了,我们再看看CSS3的实现方式吧。很简单,我们要用到的正是我之前所写文章“CSS3 border-colors创建惊艳多重边框色“中的多重边框色:border-colors。

  也就是说,只需要多每组的颜色进行一些设置,就可以实现border-style方案所纠结的问题。但这种方法也存在着瓶颈,因为当前并非所有浏览器都对CSS3支持良好。

  看看DEMO:css3 double border双线框效果的2种实现方式。您可以在该DEMO内的border-colors方法里修改一些颜色和边框的宽度,就能实现从图1到图6,至于图7,只是背景色由纯色变成了渐变色而已。如果您了解CSS3的gradient属性,这个也很容易实现。