圆角页面很好看,但一直以来都不太好实现。即使牛腩老师在新闻发布系统中又是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