我这里说的是纯代码,是指的不使用图片实现圆角,图片实现圆角,这里就不说了。
纯代码实现圆角主要有3种方法:
第一种:CSS3圆角
#chaomao{ border-radius:2px 2px 2px 2px; }
上面代码的意思是左上、右上、右下、右下分别2px的圆角
当然也可以简写:border-radius:2px
方向是从左上到左下逆时针
也可以分别指定
#chaomao{ border-top-left-radius:4px 2px; border-top-right-radius:3px 4px; border-bottom-right-radius:6px 2px; border-bottom-left-radius:3px 4px; }
第二种:用CSS+html代码
百度知道的首页圆角就是用这种方法实现的
有点:兼容所有浏览器,
缺点:需要添加额外的HTML标签,维护比较麻烦
实现原理是利用多个空层,上面一层比下面少1px,从而使边角看起来是一个圆弧状
CSS代码
b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{ height:1px; font-size:1px; overflow:hidden; display:block; } .b1,.b8{ margin:0 5px; } .b2,.b7{ margin:0 3px; border-right:2px solid; border-left:2px solid; } .b3,.b6{ margin:0 2px; border-right:1px solid; border-left:1px solid; } .b4,.b5{ margin:0 1px; border-right:1px solid; border-left:1px solid; height:2px; }
第三种:利用jQuery圆角插件代码实现圆角
优点:兼容所有浏览器
缺点:需要使用jQuery插件
这是一个jQuery插件,使用的时候,需要jQuery文件一起,使用方法很简单
$("#chaomao").corner("5px")
它就实现了id值问哦chaomao的元素,5px的圆角