CSS3来了，给我们带来了很多新鲜的技术。可能大家最关注的就是CSS3的圆角实现方法，其实用传统的CSS也可以实现圆角显示。在本文当中给大家介绍如何用CSS3和CSS2来实现圆角显示。

一、传统方法实现圆角显示

圆角在网页设计中经常被使用到，CSS3以前要实现圆角都要用其他的方法。这里使用javascript实现，具体方法如下：

   1. <script type="text/javascript" 
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
   2. <script type="text/javascript" src="js/jquery.corners.js"></script>  
   3. <script type="text/javascript">  
   4. $(function(){  
   5.     $('.box').corners('10px');  
   6. });  
   7. </script>  
   8. <div class="box">  
   9.     <!--CONTENT-->  
  10. </div>

二、CSS3圆角实现方法

CSS3圆角实现方法比较简单，不过要针对不同的浏览器设置不同的属性名称。

   1. <style type="text/css">  
   2. .box {  
   3. border-radius: 10px;  
   4. -moz-border-radius: 10px;  
   5. -webkit-border-radius: 10px;  
   6. }  
   7. </style>  
   8. <div class="box">  
   9.     <!--CONTENT-->  
  10. </div>

好了，关于用CSS3和CSS2来实现圆角显示就介绍到这里。