CSS双线边框研究
来源：豆豆猫的窝 时间：2009-09-03 12:12:00
昨天有人在群里问图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在各浏览器内的表现
0
投稿猜你喜欢
Zen Coding: 一种快速编写HTML/CSS代码[译]
Microsoft VBScript 运行时错误 错误 800a0005 无效的过程调用或参数: chr
MySQL五个查询优化方法
SQL进行排序、分组、统计的10个新技巧
用CSS实现柱状图（Bar Graph）的方法（二）—基于表格元素的柱状图
HTTP状态码
asp获取完整url地址代码
asp解决防止表单重复提交的方法
如何读取一个.ini文件？
正则表达式不匹配某个字符串
2008年Logo设计10大趋势
Oracle 游标使用总结
如何根据用户银行帐户余额的多少进行显式的提交或终止？
ASP检测服务器相关的一些代码
2007流行网站导航设计欣赏
