墨涤
2015-05-17 22:01
如果你没看懂 
参考这里:
/*制作圆*/
//border-radius:25px;( 正确)
border-radius:25px;z(错误:用了中文的冒号,有木有。。。。。。)
				<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
<title>CSS制作立体导航</title>
<link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">
<style>
body{
 background: #ebebeb;
}
.nav{
 width:560px;
 height: 50px;
 font:bold 0/50px Arial;
 text-align:center;
 margin:40px auto 0;
     background: #f65f57;
 /*制作圆*/
         //border-radius:25px;
         border-radius:25px;
          /*制作导航立体风格*/
          box-shadow:10px 10px 5px #888888;
}
.nav a{
 display: inline-block;
 -webkit-transition: all 0.2s ease-in;
 -moz-transition: all 0.2s ease-in;
 -o-transition: all 0.2s ease-in;
 -ms-transition: all 0.2s ease-in;
 transition: all 0.2s ease-in;
}
.nav a:hover{
 -webkit-transform:rotate(10deg);
 -moz-transform:rotate(10deg);
 -o-transform:rotate(10deg);
 -ms-transform:rotate(10deg);
 transform:rotate(10deg);
}
.nav li{
 position:relative;
 display:inline-block;
 padding:0 16px;
 font-size: 13px;
 text-shadow:1px 2px 4px rgba(0,0,0,.5);
 list-style: none outside none;
}
/*使用伪元素制作导航列表项分隔线*/
        /*删除第一项和最后一项导航分隔线*/
.nav a,
.nav a:hover{
 color:#fff;
 text-decoration: none;
}
</style>
</head>
<body>
<ul>
     <li><a href="">Home</a></li>
     <li><a href="">About Me</a></li>
     <li><a href="">Portfolio</a></li>
     <li><a href="">Blog</a></li>
     <li><a href="">Resources</a></li>
     <li><a href="">Contact Me</a></li>
</ul>
</body>
</html>你的冒号是中文状态下 ...我已经修正了..
十天精通CSS3
243145 学习 · 2677 问题
相似问题