纯代码实现CSS圆角

我这里说的是纯代码,是指的不使用图片实现圆角,图片实现圆角,这里就不说了。

纯代码实现圆角主要有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;
}

 意思很简明

火狐等浏览器也支持自己的私有圆角属性

Firefox支持border-radius(圆角):-moz-border-radius:2px

webkit内核的Safari和Chrome支持border-radius(圆角):-webkit-border-radius:2px

Opera支持border-radius(圆角):border-radius:2px

CSS3实现圆角最简单了,可惜IE6-8不支持

第二种:用CSS+html代码

百度知道的首页圆角就是用这种方法实现的

有点:兼容所有浏览器,

缺点:需要添加额外的HTML标签,维护比较麻烦

 实现原理是利用多个空层,上面一层比下面少1px,从而使边角看起来是一个圆弧状

HTML代码:

<div>
    <strong class="b1"></strong>
    <strong class="b2"></strong>
    <strong class="b3"></strong>
    <strong class="b4"></strong>
    <div class="content">文字内容</div>
</div>

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的圆角

© 版权声明
THE END
点赞124 分享
评论 抢沙发

请登录后发表评论