用CSS设计圆角菜单

1.首先来谈谈如何制作圆角
a。先写上如下代码：
<div class="item">
<div class="row1"></div>
    <div class="row2"></div>
    <div class="row3"></div>
    <div class="row4"></div>
    <p>Hoem</p>
</div>
b。对item容器进行设置
.item
{
width:100px;
margin:0 auto;
padding:0px;
font:14 Arial, Helvetica, sans-serif;
font-weight:bold;
}
c。对P段落进行设置
.item p
{
padding:0 0 2px 0;
margin:0px;
text-align:center;
background:#cc6;
border:solid 1px #000;
border-top-width:0px;
}
d。接下来对圆角4个div进行设置

.item div
{
height:1px;
overflow:hidden;
background:#cc6;
border-left:solid 1px #000;
border-right:solid 1px #000;
}
.item .row1{
margin:0 5px;
background-color:#000;
}
.item .row2{
margin:0 3px;
border:0 2px;
}
.item .row3
{
margin:0 2px;
}
.item .row4
{
margin: 0 1px;
height:2px;
}
综合代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
用CSS设计圆角菜单

<html xmlns="http://www.w3.org/1999/xhtml">
用CSS设计圆角菜单

<head>

<title>无标题文档</title>

这个是个例子代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
用CSS设计圆角菜单

<html xmlns="http://www.w3.org/1999/xhtml">
用CSS设计圆角菜单

<head>

<title>无标题文档</title>