只写了里面的，外面的不太好写
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>圆形导航</title>
<link rel="stylesheet" href="css/common.css">
<style type="text/css">
.div1{
width: 405px
height: 405px
border-radius: 50%
margin-top: 40px
margin-left: 40px
background-color: #fff
position: relative
}
.div2{
width: 200px
height: 200px
background-color: #999
color:#fff
text-align: center
line-height: 200px
}
.div2:nth-child(1){border-top-left-radius: 100%}
.div2:nth-child(2){border-top-right-radius: 100%}
.div2:nth-child(3){border-bottom-left-radius: 100%}
.div2:nth-child(4){border-bottom-right-radius: 100%}
.div3{
position: absolute
width: 200px
height: 200px
border-radius: 100%
top: 100px
left: 100px
z-index: 5
background-color: red
color: #fff
border: 3px solid #fff
text-align: center
line-height: 200px
box-shadow: 0 0 15px rgba(255,255,255,.6)
}
</style>
</head>
<body>
<div class="div1 clearfix">
<div class="fl div2 mb-5">导航1</div>
<div class="fr div2 mb-5">导航1</div>
<div class="fl div2">导航1</div>
<div class="fr div2">导航1</div>
<div class="div3">综合服务</div>
</div>
</body>
</html>
圆角在html5以前是不能用代码实现的，及时你用滤镜实现但是IE6不是很好支持滤镜，用代码实现很就是，复杂、麻烦、闲得慌，用图片实现是最好的，你用ps画一个你想要的圆角框作为div的背景，就O啦，备注，html5ie8以下的版本不支持
以下代码解决你的问题
圆形导航.html 文件代码清单如下：
<!doctype html><html lang="zh">
<head>
<meta charset="utf-8">
<title>圆形导航</title>
<link rel="stylesheet" href="circlenav.css">
</head>
<body>
<ul>
<li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li><li><a href="#">10</a></li>
</ul>
</body>
</html>
circlenav.css 文件代码清单如下：
ul {padding: 16px 0 16px 10px
border: 1px solid rgb(210, 210, 210)
width: 500px
list-style-type: none
background: rgb(250, 250, 250)
}
li {
display: inline
margin-right: 10px
}
a {
display: inline-block
padding: 10px 0
width: 36px
border-radius: 18px
font-size: 16px
font-weight: bolder
text-align: center
text-decoration: none
color: rgb(153, 119, 7)
background: rgb(234, 35, 74)
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）