CSS3线性渐变在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或沿任意轴。如果使用过制作 Photoshop等软件，对线性渐变并不会陌生。CSS3制作渐变效果，其实和使用制作软件中的渐变工具没有什么差别。首先指定一个渐变的方向、起始颜色、 结束颜色。具有这三个数就可以制作 一个最简单、最普通的渐变效果。如果制作一个复杂的多色渐变效果，就需要在同一个渐变方向增添多个色 标。 具备这些渐变参数（ 至少三个），各浏览器就会绘制与渐变线垂直的颜色结来填充整个容器。浏览器渲染出来的效果就 类似于制作软件设计出来的渐变图像。
1，颜色从顶部向底部渐变 简单的方法直接使用“ to top”关键词， 表示第一颜色向第二颜色渐变。 实现类似于“ to top”效果还可以使用角度值“ 0deg”、“ 360deg” 和“- 360deg”。
2，颜色从底部向顶部渐变 关键词“ to bottom” 刚好 与“ to top” 相反， 从底部向顶部实现渐变效果。 也可以使用角度值“ 180deg” 和“- 180deg” 实现同等效果。
3，颜色从左向右渐变“to left”关键词实现了从左向右颜色渐变， 也可以通过角度值“ 90deg” 和“ 270deg”实现。
4，颜色从右向左渐变 “to right” 正好与“ to left” 效果相反。 实现了颜色从右向左直线渐变， 也可以使用角度值“ 90deg” 和“- 270deg”。
5，从右下角向左上角线性渐变 “to top left” 实现从右下角向左角线，从左下角到右上角线性渐变 “to top right” 关键词实现左下角到右上角的线，从右上角到左下角线性渐变 “to bottom left” 关键词实现了右上角向左下角直线，从左上角向右下角线性渐变 “to bottom right” 关键词实现了左上角向右下角直线制作渐变按钮
Web页面或者说Web程序应用中， 按钮是设计中的一个重要元素， 也是设计师非常重视的一个设计元素。 设计师借助Photoshop等软件实现按钮效果， 然后通过图片的方式转用到Web页面中或者 Web应用程序中。 这种方法安全、兼容性较强，实现方法也简单，但适应能力比较弱、重用性、可扩展性、 维护性差。例如，修改一个按钮的颜色，必须先从制作软件中修改好，再次切图，最后替换 Web页面中的图片。CSS3 的渐变出现后， Web设计师可以摆脱Photoshop的束缚，特别是在配合CSS3的阴影、圆角和@font- face等属性，可以直接脱离制图软件，直接使用CSS快速 设计各种精巧、靓丽、 细腻的按钮（ 几乎可以和设计软件制作出来的效果一模一样）。 通过CSS3属性制作的按钮与设计软件制作的按钮相比， 有以下几大优势：
-可以应用到任何的HTML标签元素， 如 a、 input、 button、 span 和 div 等。 ·可以支持按钮多种状态效果， 比如当前状态、 悬停状态和点击状态。
-完全兼容不支持 CSS3 的浏览器， 如果不兼容CSS3， 则显示没有渐变和阴影的普通效果。
CSS3径向渐变是圆形或椭圆形渐变。 颜色不再沿着一条直线轴变化， 而是从一个起点朝所有方向混合。 但相对线 渐变要比径向渐变复杂得多。
CSS3的径向渐变相对于线性渐变要复杂得多， 属性参数也繁多复杂。 CSS3径向变中新旧语法中的属性参数定义如下:
1. position主要用来定义径向渐变的圆心位置。 此值类似于CSS中background- position属性， 用于确定元素渐变的中心位置。 如果这个参数省略了， 其默认值为 center。 其值主要有以下几种： ·： 用长度值指定径向渐变圆心的横坐标或纵坐标， 可以为负值。
3. size用来确定径向渐变的结束形状大小。 如果省略， 其默认值为 farthest- corner。 可以给其显式地设置一些关键词。
-farthest- corner： 指定径向渐变的半径长度为从圆心到离圆心最远的角。 如果 shape设置 为circle或者省略， size 可能显式设置为 length。 表示用长度值指定径向渐变的横向或纵向直径 长度， 并根据横向和纵向的直径来确定径向渐变的形状是圆或者是椭圆， 不能为负值。
4. color- stop 径向渐变线上的停止颜色， 类似于线性渐变的 color- stop， 渐变线从中心点向右扩散。 其中0%表示渐变线%表示渐变线的与渐变容器相交结束的位置， 而且其 颜色停止可以定义一个负值。
可以使用重复线性渐变repeating-linear-gradient 属性代替线性渐变linear-gradient。 它们采取相同的值， 但色标在两个方向上都无限重复。 不过使用百分比设置色标的位置没有多大的意义， 但 使用像素和其他的单位重复线性渐变可以创建一些很酷的效果，
以同样的方式， 使用相关的属性创建重复的径向渐变， 其语法和radial- gradient 类似， 只是以一个径向渐变为基础进行重复渐变，
重复径向渐变（ repeating- radial- gradient） 其中线性渐变和重复线性渐变语法相同， 而径向渐变和重复径向渐变的语法相同。
从本质上说， 渐变就是背景属性中的background-image， 浏览器直接将渐变生成图片， 可以直接使用 CSS 背景属性来控制它们。
， 用来 定义 元素 的 盒子 阴影。inset： 阴影 类型， 可选 值。 如果不 设置， 其 默认 的 投影 方式 是 外 阴影； 如果 取其 唯一 值“ inset”， 就是 给 元素 设置 内 阴影。x- offset： 阴影水平偏移量， 其值可以是正负值。 如果取正值， 则 ......
