CSS双线边框研究（2）

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

由图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,双线

投稿

CSS双线边框研究（2）

猜你喜欢

SQLServer 2000 升级到 SQLServer 2008 性能之需要注意的地方之一

美化段落文本 1

Dreamweaver给你的网页盖个章

加载 Javascript 最佳实践

使用Title提升可访问性二

IE8将是IE的最后一个版本？

asp源码如何显示数据库字段的结构？

用一条SQL实现：一行多个字段数据的最大值

HTTP Headers 傻瓜教程[译]

WEB前端开发规范文档

asp操作Excel类源码

纯数字不重复排列的另类方法

快速掌握ASP连接11种数据库的常用语法

ASP Google的translate API代码

如何优化JavaScript脚本的性能

MYSQL中怎样设列的默认值为Now()的介绍

查看ASP详细错误提示信息的图文设置方法

JS获取页面窗口实际大小函数

oracle 存储过程和函数例子

新 API 寻求让 JavaScript 操作本地文件