CSS双边框准圆角

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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>

</UL>

</body>

</html>

posted on 2008-06-26 09:05 lvr 阅读(207) 评论(0) 编辑收藏引用