超级好用的圆角框制作——Jquery Corner

来源：互联网发布：理财软件哪个好编辑：程序博客网时间：2024/06/06 01:36

　　圆角页面很好看，但一直以来都不太好实现。即使牛腩老师在新闻发布系统中又是PS又是截图的给大家讲过如何制作圆角框，当现在想想，似乎都已经忘光了，在这里分享一种简单容易上手的制作方法——Jquery Corner。

　　简而言之，Jquery Corner一方面是没有CSS来控制样式，二来避免了PS美工切图的麻烦和烦恼，只需要简单的js引用和js操作，从而实现了很友好的圆角效果。

基本情况：

　　jQuery Corner是一款jQuery的文件，最初由Dave Methvin开发，但后在Malsup同志的协助下，进行了一些重要的改进。之所以会像变魔术一样地展现圆角及其他样式，是由于该插件为目标元素增加了一些小条块，这些小条块为背景色，所以人眼看上去出现了圆角而已，其实就是小东西遮盖了本来的直角。

具体使用：

第一步，构建基本HTML网页和DIV格局，并CSS。

<html>    <head>        <style type="text/css">            div{                width:350px;                height:200px;                background-color: #0ff;            }        </style>    </head>    <body>        <div></div>    </body></html>

效果：

第二步：引用Jquery 和Corner文件

<html><head>    <script src="jquery.min.js"></script>    <script src="jquery.corner.js"></script>    <style type="text/css">        div {            width: 350px;            height: 200px;            background-color: #0ff;        }    </style></head><body>    <div>    </div></body></html>

第三步：使用JS操作div 从而实现圆角效果

<!DOCTYPE html><html><head>    <script src="jquery.min.js"></script>    <script src="jquery.corner.js"></script>    <script type="text/javascript">        $(function () {            $("div").corner();        });    </script>    <style type="text/css">        div {            width: 350px;            height: 200px;            background-color: #0ff;        }    </style></head><body>    <div>    </div></body></html>

效果：

延伸扩展：

当然，作为一个封装好的JS文件，不仅仅是这一个圆角样式。更多的样式效果。每种样式图片上面都有相应的corner效果的样式

4 0