按钮(CSS3渐变色)

  本节课通过一个按钮的制作来引入CSS3的渐变色，体会渐变色在视觉设计中的用途。利用PS等视觉设计软件完成一个简单的图标设计导出图片格式，图片的容量往往较大， 利用CSS3完成同样的效果，需要几十行代码即可，会极大的压缩文件的大小。

案例

源码下载

  下面的代码是利用div块元素作为基本对象，通过设置样式，来实现一个按钮效果，代码注释比较详细，同时也简单交代了，制作思路。

确定
取消
返回
<body>
<!--创建div元素，添加文字作为按钮-->
<div class="gradient">确定</div>
<div class="gradient">取消</div>
<div class="gradient">返回</div>
</body>
<style>
        .gradient{
            /*行内块元素会自适应文字，不会独占一行*/
            display: inline-block;
            /*设置文字的内边距，使文字占用的面积小，来突出按钮区域*/
            padding: 10px 15px;
            /*设置合适的字体尺寸*/
            font-size: 14px;
            /*使用linear-gradient()添加渐变色，从上#999999到下#333333*/
            background: linear-gradient(#999999,#333333);
            /*添加圆角增强按钮效果*/
            border-radius: 5px;
            /*设置按钮文字颜色，与背景色形成反差*/
            color: white;
        }
        /*利用伪类选择器active，添加鼠标事件，单击按钮颜色发生变化*/
        .gradient:active{
            background: linear-gradient(#aaaaaa,#555555);
        }
</style>

代码测试

  你可以尝试去掉渐变色、圆角、内边距其中一个参数，查看按钮的视觉效果变化是否大，体会参数变化对视觉效果的影响。

代码解析

  利用CSS3样式完成好视觉设计，主要是两方面，一方面是你对CSS技术的熟练掌握，另一方面是你对视觉设计的掌握。 本节课主要是讲解CSS3技术，不讲解视觉艺术的问题，但是为演示CSS3样式参数对视觉效果的影响，比如不使用渐变色，按钮就会看着没有 空间感，很平淡。

  active和前面讲过的hover一样属于伪类选择器，hover是鼠标滑过时间，active表示鼠标单击事件，当鼠标单面它定义的元素， 元素的样式就会按照伪类选择其中定义的样式变化。

  linear-gradient(#999999,#333333)表示渐变色，可以作为background的属性值，表示div元素区域自上而下变化，上面的颜色是#999999，下面的颜色是#333333， 中间颜色过渡线性变化。

渐变色

线性渐变色

语法格式background: linear-gradient(方向, 颜色1, 颜色2, 颜色3, ...);，颜色数量至少两个，方向可以省略，默认自上而下

方向的值

方向 上下左右值 角度值
从左到右 to right 90deg
从左上角到右下角 to bottom right 135deg
从下到上 to top 0deg
从上到下 to bottom 180deg
渐变色角度值