给导航设置圆角的代码：

c3 里面的属性：border-radius：7px；

1补充盒子问题

（盒子边框紧邻变粗问题）将两个盒子边框重叠并且设置定位提高层级避免盒子重叠，鼠标放上去只显示一个盒子的边框。

<style type="text/css">
div{
width:200px;
heigh:200px:
border:1px solid red;

margin-left=-1px;
}

div:hover{
border-color:blue;
position:relative
}
</style>

<body>
<div class="one"></div>
<div class="two"></div></body>

（盒子大小计算问题）在边框显示上做减法，不让边框显示超出图片大小  box-sizing：content-box（盒子默认计算方式）

<style type="text/css">

.box{
width:200px;
height:200px;
background-color:pink;}

.box:hover{
border:5px solid green;
/*改变盒子计算方式*/
box-sizing:border-box;
}</style

2补充图片垂直居中问题，两种方式

<style type-"text/css">
.box{
width:300px;
height:300px:
border:1px solid red;
text-align:center;
line-herght:300px;(行高)}

ing{vertical-align:middle;(借助div里的文字使得图片居中)}

</style></head>

<body>
<div class="box">
123<ing src="2.png"></div>
</body>
第一种方式
<style type-"text/css">
.box{
width:300px;
height:300px:
border:1px solid red;
text-align:center;
}
span{
height:100%;
display:inline-block;}(所以基线对齐)

img{
vertical-align:middle;}
</style></head>

<body>
<div class="box">
<img src="2.png">
<span></span></div>
</body>
第二种方式
同时还可以设置第三种方式
把span去掉在CSS里替换成
div:after{
content:"";
height:100%;
dispaly:inline-block;
vertical-align:middle;}
}
推荐方式 按照表格方式
img{
vertical-align:middle;}
推荐方式
.table{
width;300px;
height:300px:
border:1px solid red;

display:table;}

.td{display:table-cell;
text-align:center;
vertical-align:middle;}
<body>
<div class="table">
<div class="td">
      <img src-"2.png">
</div></div>
</body>