纯css写的兼容主流浏览器的圆角按钮

来源:赵克立博客分类: 前端开发标签：--发布时间:2014-04-29 06:04:39最后更新:2014-04-29 06:04:39浏览:2309

本文为博主原创文章，转载请声明原文链接...谢谢。o_0。

原文链接:

http://www.zhaokeli.com /article/1663.html

更新时间：

2014-04-29 06:04:39

温馨提示：

学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

先看下效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯css实现的质感圆角按钮</title>
<style type="text/css">
.coolbtn3{float:left; border-width:1px 0; border-color:#bbbbbb; border-style:solid; margin:0px 5px;}
.coolbtn2{height:22px; border-width:0 1px; border-color:#bbbbbb; border-style:solid; margin:0 -1px; background:#e3e3e3; position:relative; float:left;}
.coolbtn1{line-height:10px; color:#f9f9f9; background:#f9f9f9; border-bottom:2px solid #eeeeee;}
.coolbtn{padding:0 8px; line-height:22px; font-size:12px; color:#000000; clear:both; margin-top:-12px; cursor:pointer; display:block; border:none; *border-color:#Fff;}
</style>

<body>
<div class="coolbtn3">
    <div class="coolbtn2">
        <div class="coolbtn1">&nbsp;</div>
        <a class="coolbtn">css圆角按钮</a>
    </div>
</div>
</body>
</html>

下面给出一个简单的使用方法，首先引入jquery库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯css实现的质感圆角按钮</title>
<script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script>
<style type="text/css">
.coolbtn3{float:left; border-width:1px 0; border-color:#bbbbbb; border-style:solid; margin:0px 5px;}
.coolbtn2{height:22px; border-width:0 1px; border-color:#bbbbbb; border-style:solid; margin:0 -1px; background:#e3e3e3; position:relative; float:left;}
.coolbtn1{line-height:10px; color:#f9f9f9; background:#f9f9f9; border-bottom:2px solid #eeeeee;}
.coolbtn{padding:0 8px; line-height:22px; font-size:12px; color:#000000; clear:both; margin-top:-12px; cursor:pointer; display:block; border:none; *border-color:#Fff;}
</style>

<body>
<div class="coolbtn">css圆角按钮</div>
<a class="coolbtn">css圆角按钮</a>
<script>
$(function(){
	$('.coolbtn').wrap(function() {
			$(this).wrap('<div class="coolbtn2"></div>');
			$(this).before('<div class="coolbtn1">&nbsp;</div>');
			$(this).parent().wrap('<div class="coolbtn3"></div>');
    });
});
</script>
</body>
</html>