制作导航菜单分隔线的总结:用css3

经过百度统计中国中使用谷歌浏览器比较多，我很奇怪，我身边的同事很少用谷歌，唯一我用谷歌的原因就是看上它调试能力和模拟手机。

下面是我个人制作的预览用谷歌浏览器.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .nav{max-width:960px;height:30px;background: #f0ad4e;line-height:30px;border-radius:15px;  text-align:center;margin:40px auto 0;
            box-shadow: 0 2px 0 #ddd,-2px 0 #ddd;}
        ul li{list-style: none;float:left;padding:0 30px;}
        .nav ul li{

            background:  no-repeat right/ 1px 15px linear-gradient(to right, #dd2926,#a82724);

        }
        .nav ul li:last-child {background:none;}

        a{text-decoration: none;color:#ffffff;
            display: inline-block;
            -webkit-transition: all 0.2s ease-in;
        }
        a:hover {
            -webkit-transform: rotate(10deg);
        }
    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </ul>
</div>
</body>
</html>

字体旋转到10度分隔线