圆角页面很好看,但一直以来都不太好实现。即使牛腩老师在新闻发布系统中又是PS又是截图的给大家讲过如何制作圆角框,当现在想想,似乎都已经忘光了,在这里分享一种简单容易上手的制作方法——Jquery Corner。
简而言之,Jquery Corner一方面是没有CSS来控制样式,二来避免了PS美工切图的麻烦和烦恼,只需要简单的js引用和js操作,从而实现了很友好的圆角效果。
第一步,构建基本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>
<!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>
原文:http://blog.csdn.net/zhangleilei4869/article/details/18363017