CSS3与CSS1实现双线框方法的比较
http://www.flypeng.com win10系统 发布时间:2015-08-29 11:20 来源:鹏鹏电脑知识网 浏览:加载中
  初看标题,您可能还反应不过来什么是“双线框”。下面的图可以让您看到什么是所谓的“双线框”,这在网页设计中比较常见。


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

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

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

  我们来看看图1的border-style实现:
.test{
 border:3px double #000;
}


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

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

  无法为2根线条指定不同的颜色;

  无法单独为这个间隔指定背景色;

  无法只保留外边框而去掉内边框。

  既然标题是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属性,这个也很容易实现。
如果你有好的win10资讯或者win10教程,以及win10相关的问题想要获得win10系统下载的关注与报道。
欢迎加入发送邮件到657025171#qq.com(#替换为@)。期待你的好消息!