CSS双线边框研究
2009年8月9日
昨天有人在群里问图1的边框效果是否能实现。
边框效果图
有人给出答案，需要嵌套一个元素实现。我当时粗粗写了个测试页面，但是时间太晚了，也没有细弄，今天把想法写出来。
CSS的边框border属性经常会用到，但是，其参数值到底有几个？未必大家都知道。
以下是《CSS属性、浏览器兼容与网页布局》中关于边框样式的部分内容：
8.8.3 边框样式
只定义边框的宽度并不会使元素显示边框，因为边框样式的默认设定为“none（无）”，边框样式规定了边框的线型（实线，双线，点线等），而且也包括4个方向的属性：border-top-style、border-right-style、border-bottom-style、border-left-style和缩写属性border-style。
其具体定义列表如下：
- 语法：
- border-top-style: none | hidden | <关键字> | inherit
- border-right-style: none | hidden | <关键字> | inherit
- border-bottom-style: none | hidden | <关键字> | inherit
- border-left-style: none | hidden | <关键字> | inherit
- 说明：
- 设定元素边框的线型
- 值：
- none：没有边框。该值迫使border-width的计算值为0。
- hidden：和none相似，除非在表格元素中解决边框冲突时。
- 线型的关键字包括：
- dotted：
- 边框是一系列的点。
- dashed：
- 边框是一系列的短线条的段。
- solid：
- 边框是一条单一的线。
- double：
- 边框有两条实线。两条线宽和其中的空白的宽度之和等于border-width的值。
- groove：
- 边框看上去好象是雕刻在画布之内。
- ridge：
- 和grove相反：边框看上去好象是从画布中凸出来。
- inset：
- 该边框使整个框看上去好象是嵌在画布中。
- outset：
- 和inset相反：该边框使整个框看上去好象是从画布中凸出来。
- 初始值：
- none
- 继承性：
- 不继承
- 适用于：
- 所有元素
- 媒体：
- 视觉
- 计算值：
- 同指定值
浏览器不同，边框样式的显示也有所不同，如图2所示。
图2 不同浏览器边框样式的不同表现形式
由图2读者还可以发现，边框在背景之上。
从上图，可以发现double类型的边框，和图1想实现的效果比较类似，是否可以利用？
.test1 .text1 { border:1px double #06F; }
.test1 .text2 { border:2px double #06F; }
.test1 .text3 { border:3px double #06F; }
.test1 .text4 { border:7px double #06F; }
.test1 .text5 { border:8px double #06F; }
.test1 .text6 { border:9px double #06F; }
<ol class="test1"> <li><input type="text" name="username" value="border-width:1px;" class="text1" /></li> <li><input type="text" name="username" value="border-width:2px;" class="text2" /></li> <li><input type="text" name="username" value="border-width:3px;" class="text3" /></li> <li><input type="text" name="username" value="border-width:7px;" class="text4" /></li> <li><input type="text" name="username" value="border-width:8px;" class="text5" /></li> <li><input type="text" name="username" value="border-width:9px;" class="text6" /></li> </ol>
在各浏览器内的显示如图3所示。
图3 不同宽度的double在各浏览器内的表现
由图3可以看出，浏览器的表现差别主要在于双线边框的双线之间的颜色，IE 6/7 以及Opera，双线之间是透明的，所以透出了父元素li的背景色，而其他的浏览器（包括IE 8）则使用了Input的背景色填充双线之间。
.test2 input { background:#666; border:3px double; color:#ccc; padding:2px; }
.test2 .text1 { border-color:#ccc; }
.test2 .text2 { border-color:#666; }
.test2 .text3 { border-color:#CFF; }
<ol class="test2"> <li>input边框与自身背景色不同：<input type="text" name="username" value="border-color:#ccc;" class="text1" /></li> <li>input边框与自身背景色相同：<input type="text" name="username" value="border-color:#666;" class="text2" /></li> <li>input边框与父元素背景色相同：<input type="text" name="username" value="border-color:#cff;" class="text3" /></li> </ol>
其显示如图4所示。
图4 改变双线边框颜色的效果测试
由图4可以发现，IE 6/7 以及Opera中，设定input边框色与自身背景色相同，可以出现类似图1的外观表现，而其他浏览器则是设定input边框色与父元素背景色相同可以实现类似图1的外观。
之所以是类似，因为图1的边框颜色与其自身背景色不同。
虽然没有实现设计效果，但是借这个例子，可以让我们了解double类型的边框特性，扩展了思路。
看完冰河世纪先再看这个，哈哈！