CSS+Jquery实现页面圆角框方法大全

2020-05-17 06:23:00易采站长站整理

7.圆角平滑。
缺点:
1.本圆角需要用到jquery库,和一个JS文件,如果在您的项目中已经用到了Jquery这个库,倒还可以用得上,不然,为一个圆角加载一两个JS文件有点得不偿失。
2.圆角在不同的浏览器下显示有点小小的问题.
实例演示:http://labs.parkerfox.co.uk/cornerz/


结语:目前的css因为不能为一个容器中定义多张背景图片,造成了为了这种圆角效果而加入冗余标签。听说CSS3会引入这一属性,可能到哪时,就是 圆角框统一的时候了。另外也听说在CSS3中有意向加入像FF3私有属性(-moz-border-radius)的方法,这也可以完美地解决这个问题。 但在目前的情势下,可能也只有用上面的这些方法来过渡了,强烈期待CSS3的到来。


总而言之:要实现绝对的完美圆角框在目前的形势下基本上是不可能的,所以取名为“半完美解决方案”。


———————————————————————————————————————————


我的解决方案:CSS+Jquery+四个角的圆角图片 


第一步:到网站http://jquery.com/上下载jquery-1.3.2.min.js文件,整个工程引用该文件。
即将<script type=”text/javascript” language=”javascript” src=”jquery-1.3.2.min.js”> </script>加到页面<head></head>中,注意src的路径随情况而变。
第二步:在需要实现圆角框的页面写Jquery方法(Jquery是JS的一种框架技术)。
源码:

<div class=”corner2 clear”>
<div class=”bnlist detail”>
<asp:Button Text=”查询” ID=”btsearch” runat=”server” OnClick=”btnSearch_Click” />
<asp:Button Text=”导出” runat=”server” OnClick=”btnExport_Click” />
<asp:Button Text=”打印” ID=”btnPrint” runat=”server” OnClick=”btnPrint_Click” />
<asp:Button Text=”连续打印” runat=”server” OnClick=”btnContinuePrint_Click” />
</div>
</div>

JS代码:

<script type=”text/JavaScript”>
$(“.corner”).prepend(“<div class=”cortop”><div class=”bgcortopl”></div><div class=”bgcortopr”></div></div>”);
$(“.corner”).after(“<div class=”corbom”><div class=”bgcorboml”></div><div class=”bgcorbomr”></div></div>”);
</script>