• 注册
热门标签
↑ 收起导航

基于CSS3的一组圆角按钮

CSS3作为对CSS的升级,将原有的一些大模块分解为更小更易于表达的小模块,取得了相当的好评,也使得开发周期变短、过程变得愉快!

今天分享一下自己使用的基于CSS3的一组圆角按钮,效果不错,但欢迎升级指正!

这组圆角按钮,使用了CSS3的 border-radius 和 box-shadow 属性!

先分享一下haibor对这两个属性的理解:

Border Radius:边界半径,写法类似内边距(padding)和外边距(margin)属性。例如:border-radius:20px,这表示四个角半径均为20px,也可单独为每个边角设定不同的值:

border-top-left-radius:5px;
border-top-right-radius:10px;
border-bottom-left-radius:15px;
border-bottom-right-radius:20px;

ps.浏览器兼容仍然是个问题,为使浏览器渲染边界半径属性,需要在属性名称加上前缀,Webkit 引擎的浏览器为 "-webkit-",Firefox 则为 "-moz-",即:

-webkit-border-radius:5px;
-moz-border-radius:5px;

Box Shadow:盒阴影的结构和 text-shadow 相同,用法:box-shadow:0 1px 2px #aabbcc,分别为:x 轴偏移、y 轴偏移、模糊、颜色。

概念说完了,下面直接分享效果图吧:

基于CSS3的一组圆角按钮

具体代码这里就不赘述了,可看DEMO演示的源代码!

版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/437.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

发表评论 



我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册