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演示的源代码!