双线框之CSS3 VS. CSS1

　　初看标题，你可能还反应不过来什么是“双线框”。没关系，因为这个叫法可能只是我“杜撰”的，或许它有其它的叫法，不过不必深究。

　　我想，如果有张图来让你看到什么是我所谓的“双线框”，那么，接下来应该可以让你我的距离拉近一些。

　　
　　Figure 1: 常规双线框

　　有了Figure 1的图示，估计很多人已想到了实现该图效果的方法。是的，就算没有CSS3，实现这样的效果也是信手拈来。

　　其实，看到double border这样的字眼，应该就会想到，border-style（在CSS1中已实现，故所有现代浏览器均支持）有个double参数值。double所表现出来的效果就是如Figure 1般：2条有间隔（你所看到的这个白色间隔并不是1根白色的线条，而是真正的缝隙）的线条。

　　需要说明的是：border-style的double参数值需要border-width在不小于3px的情况下使用，2条线条与之间的间隔之和等于border-width的值。

我们来看看Figure 1的border-style实现（Code 1）：

　　你可以试着将Code 1的3px进行修改，会发现，2条线条和间隔，这3者总是自动去对这个值进行分配，所以无法有针对的指定对2条线条和间隔的width。也就是说，你无法实现2条1px的线条夹着1个3px的间隔，也无法实现2条3px的线条夹着1个1px的间隔。

　　当然，上面所说的这点，并不是最纠结的问题。真正影响实际应用的问题在于：

1. 无法为2根线条指定不同的颜色；
2. 无法单独为这个间隔指定背景色；
3. 无法只保留外边框而去掉内边框。

　　也就是说你可以通过Code 1的方法去实现Figure 1，并且也能实现如下列的Figure 2和Figure 3。

　　
　　Figure 2: 带背景色的双线框

　　
　　Figure 3: 背景色不包括border的双线框

　　但却做不到如下列的Figure 4，Figure 5，Figure 6。

　　
　　Figure 4: 2条线条颜色不同的双线框

　　
　　Figure 5: 间隔设置了颜色的双线框

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

　　自然，如Figure 7的常见效果就无法做到了。

　　
　　Figure 7: 常见双线框效果

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

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

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