网页用样式模仿按钮图标

        有些网页需要用按钮来显示，能够跳转页面。实现这个很简单，用一个背景图片即可。

但是有些麻烦，需要美工专门设计图片。直接用样式就能够实现这个功能。

 效果：

代码：

       <div class="list">
         <ul>
            <li><a href="#">国内新闻</a></li>
            <li><a href="#">科技新闻</a></li>
            <li><a href="#">军事新闻</a></li>
            <li><a href="#">国际新闻</a></li>
         </ul>
       </div>

 

样式：

  .list ul li{ float:left; margin:6px 9px; width:100px; height:24px; line-height:24px; text-align:center; background:#fbf4e2; border:1px solid #dfd8be;
                     -webkit-border-radius:4px; -o-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
                     -webkit-box-shadow:0 2px 3px rgba(0,0,0,0.15),inset 0 -1px 1px #fff;
                     -o-box-shadow:0 2px 3px rgba(0,0,0,0.15),inset 0 -1px 1px #fff;
                     -moz-box-shadow:0 2px 3px rgba(0,0,0,0.15),inset 0 -1px 1px #fff;
                     box-shadow:0 2px 3px rgba(0,0,0,0.15),inset 0 -1px 1px #fff;}
.list ul li a{ display:block; cursor:pointer;}

外层的div样式就不写了，根据自己网站排版在自己指定区域即可。

样式能够实现类似按钮，在ie9下有圆角，ie9一下是没有的。