JS+css边框圆角代码，简单方便挂载
- 作者：网页模板
- 大小：0.136MB
- 点击次数：
- 发布时间：2014-04-11 15:48
特效介绍
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+css边框圆角,css圆角
