我爱模板网 > 特效插件 > 图像特效 >  JS+css边框圆角代码,简单方便挂载正文

JS+css边框圆角代码,简单方便挂载

特效介绍
JS+css边框圆角代码

    JS+css边框圆角代码,简单方便挂载。没有用到任何圆角的图片,即使有图片,也是直角的,纯css+js实现的圆角效果。

圆角插件的优点:
1. 全面兼容所有浏览器
2. 圆角不需要图片,直接代码生成,省去制图的麻烦。
3. 自适应外框的大小,可广泛应用于布局区块中。
4. 封装难以控制的CSS代码,调用灵活方便。
5. 封装HTML结构,你只需定义你想要的结构,无冗余,更语义化。

圆角插件的缺点:
1. 不能定义线框的大小。如果你需要改变线框大小,本组件不适合你。
2. 圆角不够圆滑,如果你对圆角图片的精度要求较高,不宜采用本组件。
3. 线框颜色和背景色不宜采用对比太强烈的颜色,容易看出锯齿。
使用方法
1、在body区域引入下面的js代码:
<script type="text/javascript" src="js/bRoundCurve 1.0.js"></script>
<script type="text/javascript">
    b_RoundCurve("bottom","#F8B3D0","#FFF5FA",1);//普通圆角框
    b_RoundCurve("left2","#E0750F","#FFF2A5",3,"h3","","image/bg3.gif");//标题用背景图片
    b_RoundCurve("left1","#AE0474","#FB7D3F",3,"h3","","image/bg2.gif");//标题用背景图片
    b_RoundCurve("right1","#863313","#84D4CA",3,"h3","#BAB556");//标题只用纯色背景
    b_RoundCurve("right2","orange","",3,"h3","");//标题不带背景色
    b_RoundCurve("right3","#A0C044","#E9F2CC",3,"h3","","image/bg1.gif");//标题用背景图片
    b_RoundCurve("rightbgimg","#F38E1A","",4);//圆角背景图片
    b_RoundCurve("top","#4E271A","",4);//圆角背景图片
    b_RoundCurve("img","#999","#FFF5FA",2);//圆角IMG图片
</script>
2、在需要使用圆角的地方挂上相应的class,如导航需要加上圆角,则class="top"。可以自己尝试加入。JS代码中有更详细的使用说明和参数说明,详见bRoundCurve 1.0.js的注释。
3、至于css圆角的原理(不是css3的border-radius),可以参见:纯CSS打造支持IE6的无图片圆角教程


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:JS+Html5打造捕鱼游戏源码 下一篇:鼠标经过图片缩小显示效果的jQuery图片缩放代码
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢