lvr

通过上下和左右边框的交叉margin:-1px实现

 

<!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=utf-8" />
<title>准圆角</title>
<style type="text/css" media="all">
ul 
{ list-style-type:none; margin:0 auto; padding:0; }
li 
{ float:left; margin: 10px }
li a 
{ display:block; border-width:1px 0; border-color:#FFD3B4; border-style:solid; color:#555; text-decoration:none; margin:4px 1px; }
li a:hover
{ border-color:#FE7701;background-color:#FFF4EF;}
li a span 
{ display:block; margin:0 -1px; border-width:0 1px; border-color:#FFD3B4; border-style:solid; background-color:#FFF4EF; padding:2px 6px; }
li a:hover span 
{ border-color:#FE7701;background-color:#FEEADF}
</style>
</head>
<body>
<UL>
  
<LI><href="#"><SPAN>准圆角</SPAN></A></LI>
  
<LI><href="#"><SPAN>准圆角</SPAN></A></LI>
  
<LI><href="#"><SPAN>准圆角</SPAN></A></LI>
</UL>
</body>
</html>
posted on 2008-06-26 09:05 lvr 阅读(131) 评论(0)  编辑 收藏 引用
只有注册用户登录后才能发表评论。

<2008年6月>
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345

最新评论