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

CSS双线边框研究（2）

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

标签：边框,css,双线

由图3可以看出，浏览器的表现差别主要在于双线边框的双线之间的颜色，IE 6/7 以及Opera，双线之间是透明的，所以透出了父元素li的背景色，而其他的浏览器（包括IE 8）则使用了Input的背景色填充双线之间。

因此建立以下测试：

<!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>[提示：你可先修改部分代码，再按运行]

其显示如图4所示。

图4 改变双线边框颜色的效果测试

由图4可以发现，IE 6/7 以及Opera中，设定input边框色与自身背景色相同，可以出现类似图1的外观表现，而其他浏览器则是设定input边框色与父元素背景色相同可以实现类似图1的外观。

之所以是类似，因为图1的边框颜色与其自身背景色不同。

虽然没有实现设计效果，但是借这个例子，可以让我们了解double类型的边框特性，扩展了思路。

第一页上一页 1

投稿

CSS双线边框研究（2）

猜你喜欢