Ronnie 猫's 一亩三分地

关注前端技术,一直走在追随前端的路上…For Long Time

HTML5 CSS3实现圆角样式,兼容所有浏览器

我承认我有点标题党了,IE6由于没有测试机器,所以不知道兼容与否,有同学有IE6的帮忙测试下。

后期会陆续放出一些常用的部分圆角,先看button和一个类似panel的容器。

具体实现:

先看效果

样式基本上很丑陋,完全是实现效果:

需要的依赖: 具体文件GOOGLE和百度都能找到。

<mce:script type=”text/javascript” src=”resources/library/jquery-1.5.1.min.js” mce_src=”resources/library/jquery-1.5.1.min.js”></mce:script>
<mce:script type=”text/javascript” src=”resources/library/html5.js” mce_src=”resources/library/html5.js”></mce:script>
<mce:script type=”text/javascript” src=”resources/library/curvycorners-2.1.min.js” mce_src=”resources/library/curvycorners-2.1.min.js”></mce:script>

HTML 代码:

<!–BUTTON–>
<div><input name=”” type=”button” value=”Button”></div>

<!–PANEL–>
<div>
<div>
<div>Title</div>
<div>X</div>

</div>
<div>containercontainercontainercontainer</div>
</div>

css代码:

.button{ display:inline-block; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; background:url(button.png) repeat-x left bottom #ecf0f1; border:1px solid #373738; padding:1px; *display:inline;}
.button input{ border:none; background:none; padding:0px 4px; color:#000; *height:18px; *overflow:hidden; *padding:0;}
.button .buttonOver{ background:url(button_over.png) repeat-x left bottom #a8d5ee; color:#fff;}
.button .buttonClick{ background:url(button_click.png) repeat-x left top #fff; color:#000;}

.panel{ display:inline-block;border:1px solid #373738; border-top-left-radius:10px; border-top-right-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; background:#373738 ; *display:inline;}
.panel .panelTopBar{ padding:3px 7px 3px 7px; background:#CCC;border-top-left-radius:10px; border-top-right-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; border:1px solid #CCC; *zoom:1;}
.panel .panelTopBar .panelTools{ display:inline-block; *width:18%; text-align:right; *display:inline; float:right; *float:left; *margin-right:0px;}
.panel .panelTopBar .panelTilte{ display:inline-block;  *display:inline; *float:left; *width:80%;}
.panel .panelContainer{ background:#fff; padding:3px 4px; *margin-bottom:-1px; }

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s