圆角按钮css,基于CSS3的一组圆角按钮 - YangJunwei

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 轴偏移、模糊、颜色。

概念说完了，下面直接分享效果图吧：

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