CSS3渐变

大家好，我是逆战班的一名学员，今天我来给大家分享一下CSS3渐变这个属性的相关知识！

        CSS3渐变（gradient）可以在两个或多个颜色中间实现平稳的 过渡。渐变可分为两大类：一类为线性渐变，一类为径向渐变，接下来了解一下它们吧！

线性渐变（linear gradients）

语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

           direction:默认为  to bottom,即自上而下的渐变。

           stop：颜色的分布位置

例：

从上到下的渐变：

从左到右的渐变：

对角渐变：

重复的线性渐变：

 

径向渐变(radial gradients)

语法：background: radial-gradient(center, shape size, start-color, ..., last-color);

           position：渐变起点的位置，可以为百分比，默认是图形的正中心；

           shape：渐变的形状，ellipse表示椭圆形，circle表示圆形，默认为ellipse

           size：渐变的大小

例：

颜色节点分布：

重复的径向渐变：

以上就是我对CSS3渐变的理解，希望能对大家有所帮助，谢谢！