分享css中渐变、阴影和滤镜的相关知识，其中包括了线性渐变、径向渐变、圆锥渐变等等相关问题。


一、初识 CSS 渐变
CSS 渐变是image类型的一种特殊类型用gradient表示，由两种或多种颜色之间的渐进过渡组成。

三种渐变类型：

线性：由linear-gradient()函数创建
径向：由radial-gradient()函数创建
圆锥：由conic-gradient()函数创建
ps：还可以使用 repeating-linear-gradient()和repeating-radial-gradient()函数创建重复渐变。

渐变可以在任何使用image的地方使用，例如在背景中。

二、CSS 线性渐变
2.1 介绍线性渐变
说明

要创建线性渐变，只需指定两种颜色即可，这些被称为色标，至少指定两个色标，还可以设置起点和方向（或角度）以及渐变效果。
语法

background-image: linear-gradient(direction(方向), color1(颜色值), color2(颜色值), ...);

2.2 线性渐变应用
2.2.1 线性渐变 - 从上到下（默认）
代码示例

效果如下


2.2.2 线性渐变 - 从左到右
代码示例



background-image: linear-gradient(to right, red, yellow);

效果如下


2.2.3 线性渐变 - 对角线
代码示例



background-image: linear-gradient(to bottom right, red, yellow);

效果如下


2.2.4 线性渐变 - 设置角度
说明

如果你想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度。
在使用角度的时候, 0deg 代表渐变方向为从下到上, 90deg 代表渐变方向为从左到右，诸如此类正角度都属于顺时针方向。 而负角度意味着逆时针方向。
代码示例



background-image: linear-gradient(180deg, red, yellow);

效果如下


2.2.5 线性渐变 - 使用多个色标
代码示例



background-image: linear-gradient(red, yellow, green);

效果如下


2.2.6 线性渐变 - 重复线性渐变
说明

repeating-linear-gradient() 函数用于重复线性渐变。
代码示例



background-image: repeating-linear-gradient(red, yellow 10px);

效果如下


三、CSS 径向渐变
3.1 介绍径向渐变
说明

径向渐变类似于线性渐变，不同的地方是径向渐变从中心点向外辐射。
可以指定该中心点的位置，还可以将它们设为圆形或椭圆形。
语法



background-image: radial-gradient(shape(设置形状，默认为椭圆形), size(最远角), position(中心), color1(颜色值), color2(颜色值));

3.2 径向渐变应用
3.2.1 径向渐变-均匀间隔的色标（默认）
代码示例

效果如下

3.2.2 径向渐变-不同间距的色标
代码示例



background-image: radial-gradient(red 10%, yellow 20%, green 50%);

效果如下

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。