位置：首页>> 网络编程>> 网页设计>> CSS双线边框研究

CSS双线边框研究

　来源：豆豆猫的窝　发布时间：2009-09-03 12:12:00　

标签：边框,css,双线

昨天有人在群里问图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; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>浏览器解释double（双线）边框的差异</title><style type="text/css"></style></head><body><form action="#" name="test"> <fieldset> <legend>double值的表现</legend> <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> </fieldset> <fieldset> <legend><a name="test2">图1的实现方法</a></legend> <p>input { background:#666; border:3px <strong>double</strong>; padding:2px; }</p> <p>父元素 li { background:#CFF; }</p> <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> </fieldset></form></body></html>[提示：你可先修改部分代码，再按运行]

在各浏览器内的显示如图3所示。

图3 不同宽度的double在各浏览器内的表现

2 下一页

投稿

CSS双线边框研究

8.8.3 边框样式

猜你喜欢