CSS3圆角按钮与多背景配色效果
CSS3 的圆角按钮，真是前端开发里一个小而美的细节。不用切图、不用写一堆 JS，单靠几个 CSS 属性就能搞定，方便还挺灵活。像border-radius，就是专门拿来做圆角的，想要多圆就多圆，配上background-color或者linear-gradient，颜色也能玩出花来。
圆角属性border-radius真的算是 CSS3 里实用的更新之一。以前做个圆角得折腾半天，现在一句border-radius: 20px，搞定。再加个transition，鼠标一滑，颜色顺滑变换，体验直接拉满。
按钮颜色这块，用background-color打底基本就够了，要是想有点花样，渐变背景可以试试linear-gradient，搭配to right、to bottom等方向参数，还挺好玩的。举个栗子：
button {
background: linear-gradient(to right, red, blue);
}状态变化就靠伪类了，:hover、:active这些老熟人，不光能换颜色，还能加阴影、缩放啥的。配上transition，动画平滑，不突兀，看着就舒服。
除了背景和圆角，字体和按钮尺寸也别忘了调下。font-size、padding、text-align这些属性别嫌烦，调好之后，按钮整体看起来才更协调。
哦对了，浏览器兼容性现在问题不大，但如果是老项目，像-webkit-、-moz-这种前缀，还是加上保险点。
如果你正好在做按钮样式，或者想让页面看起来更精致点，CSS3 这些属性真的可以多研究研究。更详细的效果和例子，可以看看这些文章：
下载地址
用户评论
