CSS3渐变、文本效果及字体

一、渐变

1.线性渐变

Linear Gradients—线性渐变

颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

linear-gradient ( position, color1, color2,…)

position 渐变方向 color1第一种颜色 color2第二种颜色

不给方向 默认是从上到下顺序 从第一种颜色 渐变到 第二种颜色 。。

position:       to bottom 从上到下

                    to right 从左到右

                    to bottom right 从左上角到右下角

                    ..............

to 后面要是有两个位置，这两个位置颠倒都可以，呈现出来的效果一样

2.径向渐变

         Radial Gradients—径向渐变

        圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

  （1）颜色结点均匀分布的径向渐变 

             background: radial-gradient(color1, color2,…); 

  （2） 颜色结点不均匀分布的径向渐变 根据你设置的值来的 

            background: radial-gradient(color1   %, color2   %,…);