CSS3圆角实现以及传统方法圆角实现

2009年9月11日 发表评论 阅读评论

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来实现圆角显示就介绍到这里。

http://it.dengchao.org
声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: CSS3圆角实现以及传统方法圆角实现
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.