实现了不用图片的圆角-CSDN博客

本文链接：https://blog.csdn.net/gjpdeyx/article/details/5494044

昨天下午实现了不用图片的圆角，今天发上来，大家分享分享。呵呵

以下分别是.html文件和.css文件，分别保存以后，放在同一个目录中，就可以看到效果了。

nav.html

<!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>
<link href="nav.css" rel="stylesheet" type="text/css" />
</head>

nav.css

@charset "utf-8";
/* CSS Document */

*{margin:0;padding:0;}
#nav{
width:976px;
height:88px;
margin:0 auto;
font:14px Arial;
font-weight:bold;
}
#nav p {
padding:0 0 2px 0;
text-align:center;
background:#F9ECE3;
border:1px solid #E3D2C2;
border-top-width:0;
}
#nav div{
height:1px;
overflow:hidden;
background:#F9ECE3;
border-left:1px solid #E3D2C2;
border-right:1px solid #E3D2C2;
}
#nav .row1{
margin:0 5px;
background:#E3D2C2;
}
#nav .row2{
margin:0 3px;
border:0 2px;
border-top:0px ;
border-bottom:0px ;
border-left:2px solid #E3D2C2;
border-right:2px solid #E3D2C2;
}
#nav .row3{
margin:0 2px;
border-top-width:0px ;
border-bottom-width:0px ;
border-left:1px solid #E3D2C2;
border-right:1px solid #E3D2C2;
}
#nav .row4{
margin:0 1px;
border-top-width:0px;
border-bottom-width:0px;
border-left:1px solid #E3D2C2;
border-right:1px solid #E3D2C2;
}
#nav .row5{
margin:0;
border-top-width:0px;
border-bottom-width:0px;
border-left:1px solid #E3D2C2;
border-right:1px solid #E3D2C2;
}
#nav .navBody{
width:975px;
height:80px;
background:#F9ECE3;
border-top-width:0px;
border-bottom-width:0px;
border-left:1px solid #E3D2C2;
border-right:1px solid #E3D2C2;
}