<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>CSS圆角1像素缺口</title>
<style type="text/css">
body{
padding:20px;
font-family:arial;
text-align:center;
}
p, li{
font-size:12px;
line-height:18px;
}
h3{
margin-bottom:6px;
}
.examplesGoHere{
text-align:left;
margin:0 auto;
}
.letsGiveItAFixedWidthOf200Pixels{
width:200px;
}
ul{
list-style:none;
margin-left:0;
padding-left:0;
margin-top:0;
}
ul li{
margin-bottom:8px;
margin-left:0;
padding-left:0;
}
.notchedListItems a{
display:block;
border:solid #666;
border-width:0 1px;
text-decoration:none;
outline:none;
color:#000;
background:#e4e4e4;
}
.notchedListItems a b{
display:block;
position:relative;
top:-1px;
left:0;
border:solid #666;
border-width:1px 0 0;
font-weight:normal;
}
.notchedListItems a b b{
border-width:0 0 1px;
top:2px;
padding:1px 6px;
}
.notchedListItems a:hover,.notchedListItems a:hover b{
background:#666;
color:white;
}
.feature{border:solid #647aae;
border-width:0 1px;
background:#b0c0e6; }
.feature div{
position:relative;
top:-1px;
left:0;
border:solid #647aae;
border-width:1px 0 0;
}
.feature div div{
top:2px;
border-width:0 0 1px;
padding:0px 6px;
}
</style>
</head>
<body>
<div class="examplesGoHere letsGiveItAFixedWidthOf200Pixels">
<h3>A list</h3>
<ul class="notchedListItems">
<li><a href="#"><b><b>About</b></b></a></li>
<li><a href="#"><b><b>Contact</b></b></a></li>
<li><a href="#"><b><b>Cssrain</b></b></a></li>
</ul>
<h3>A div</h3>
<div class="feature">
<div>
<div>
<p>This is an example of the notched corners as applied to a div container.</p>
<p>This is an example of the notched corners as applied to a div container.</p>
<p>This is an example of the notched corners as applied to a div container.</p>
</div>
</div>
</div>
<ul class="notchedListItems">
<li>
<a href="#"><b><b>CSS</b></b></a>
</li>
</ul>
</div>
</body>
</html> |
粤公网安备 44178102001207号
