本篇文章给大家带来了关于css中渐变、阴影和滤镜的相关知识，其中包括了线性渐变、径向渐变、圆锥渐变等等相关问题，希望对大家有帮助。

推荐学习：css视频教程

一、初识 CSS 渐变

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

三种渐变类型：

立即学习“前端免费学习笔记（深入）”；

ps：还可以使用 repeating-linear-gradient()和repeating-radial-gradient()函数创建重复渐变。

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

二、CSS 线性渐变

2.1 介绍线性渐变

2.2 线性渐变应用

2.2.1 线性渐变 - 从上到下（默认）

2.2.2 线性渐变 - 从左到右

2.2.3 线性渐变 - 对角线

2.2.4 线性渐变 - 设置角度

2.2.5 线性渐变 - 使用多个色标

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

三、CSS 径向渐变

3.1 介绍径向渐变

3.2 径向渐变应用

3.2.1 径向渐变-均匀间隔的色标（默认）

3.2.2 径向渐变-不同间距的色标

3.2.3 径向渐变-设置形状

3.2.4 径向渐变-设置渐变的中心

3.2.5 径向渐变-重复径向渐变

四、CSS 圆锥渐变

4.1 介绍圆锥渐变

4.2 圆锥渐变的应用

4.2.1 圆锥渐变-顺时针方向旋转（默认方式）

4.2.2 圆锥渐变-设置渐变的中心点

4.2.3 圆锥渐变-使用多个色标

4.2.4 圆锥渐变-重复圆锥渐变

五、CSS 渐变补充知识

5.1 创建实线

5.2 使用透明度

CSS 阴影

一、初识 CSS 阴影

CSS阴影主要的作用是可以让页面中的文字和元素具有立体的效果，从而被突出出来。

两种阴影属性：

ps：还有一个 filter 滤镜的函数drop-shadow()也可以添加阴影，它主要用于给透明图像的非透明部分添加阴影效果。

二、box-shadow属性

2.1 介绍box-shadow属性

2.2 box-shadow属性的应用

2.2.1 box-shadow属性-基本使用

2.2.2 box-shadow属性-多重阴影与定向阴影

2.2.3 box-shadow属性-模拟边框

2.2.4 box-shadow属性-内阴影

三、text-shadow属性

3.1 介绍text-shadow属性

3.2 text-shadow属性的应用

3.2.1 text-shadow属性-基本使用

CSS 滤镜

一、初识 CSS 滤镜

滤镜这两个字我相信大家都很熟悉，平时爱自拍，拍照的同学肯定都会打开滤镜修饰一下图片吧，那么CSS滤镜也是这样，直接用filter属性来修饰图像。

二、CSS 滤镜方法

三、CSS 滤镜的应用

3.1 CSS滤镜-将图片设置为灰色

具体的滤镜调制方法可以参照CSSgram的官网进行学习

（学习视频分享：css视频教程、web前端教程）