CSS中1px虚线边框的方法

2024-09-05 12:21:44

字体：大中小

来源：转载

供稿：网友

这是一个虚线边框，只为说明在IE中存在1px概念的一个bug，在IE中{border:2px dashed #999;}与{border:1px dashed #999}基本上看不出什么差别，但可以用标准化浏览器分辩出来。因此您在用的时候要注意代码的兼容性。

<!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><title>1PX的概念错误</title><style>h3{	position:absolute;	top:-15px;	left:30px;	margin:0;	padding:0 5px;	line-height:25px;	background:red;	border:1px solid #000;}.outer ,.outer2 {	position:relative;	float:left;	width:300px;	border:2px dashed #000;	margin-top:20px;	margin-left:20px;	background:#ffffcc;}.inner {	position:absolute;	border:1px solid white;	width:100%;	height:100%;	position:relative;	z-index:100;	margin:-1px;}.outer p,.outer2 p  {padding:5px;margin:10px 0 0;}.outer h3 a, .outer2 h3 a{	line-height:20px;	font-size:70%;	border:1px solid #000;	background:#ffffcc;	text-decoration:none;	vertical-align:top;	padding:0 5px;}.outer2 {border:1px dashed #000}</style></head><body><div class="outer">   <div class="inner">     <h3>优秀的边框更多 ></h3>    <p>本例只为说明在IE中存在1px概念的一个bug，在IE中{border:2px dashed #999;}与{border:1px dashed #999}基本上看不出什么差别，但可以用标准化浏览器分辩出来。</p>  </div></div><div class="outer2">   <h3>这个边框存在质量问题更多 ></h3>  <p>常用网页特效代码，是一个以学习为主的源码站。</p></div></body></html>

上一篇：表格行换色代码

下一篇：支持COOKIE保存的层拖动实例