4.0 指南导读

本指南将深入讲解CSS的高级技巧，学习通过CSS渐变和阴影增强视觉层次，利用CSS变形和过渡增加互动性，以及使用CSS动画为页面添加动态效果。通过案例步骤讲解掌握渐变、阴影、变形、过渡和动画等CSS高级技巧。

4.1 CSS渐变

CSS渐变是一种在实现网站应用时常用的CSS技术，CSS渐变是从一种颜色或图像平滑地过渡到另一种颜色或图像。通过本章节的讲解了解渐变的知识，掌握渐变的应用技巧。

4.1.1 CSS渐变基础

CSS3 渐变（gradients）在两个或多个指定的颜色之间显示平稳的过渡。一般使用图像来实现渐变效果。通过使用 CSS3 渐变，可以减少下载的时间和宽带的使用。由于渐变效果是由浏览器直接生成的，因此在元素被放大时效果更好。在CSS中，有两种常见的渐变类型：线性渐变和径向渐变。线性渐变是从一个点到另一个点的颜色过渡。径向渐变是从一个中心点向外辐射的颜色过渡。

🔔 注意：

Internet Explorer 8 及之前的版本不支持渐变。

4.1.2 CSS渐变属性

在CSS中，渐变的创建主要依赖于linear-gradient()和radial-gradient()函数。渐变可以应用于能够使用图像的背景属性中。以下是对这两种渐变类型的详细讲解：

（1）线性渐变

① 线性渐变按照一条直线路径从一个颜色过渡到另一个颜色。方向可以是角度或关键字，如 to right、to bottom等。基本语法如下：

具体使用示例如下：

② 设置多个颜色节点：

③ 使用透明度（transparent）：

CSS3 渐变支持透明度（transparent），用于创建减弱变淡的效果。使用 rgba() 函数来定义颜色节点和添加透明度。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，定义了颜色的透明度，0 表示完全透明，1 表示完全不透明。具体示例如下：

④ 重复的线性渐变：

（2）径向渐变

① 径向渐变由它的中心开始，沿着四周开始渐变效果。可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。具体语法如下：

具体使用示例如下：

② 设置形状:

shape 参数定义形状。值可以是circle 或 ellipse。circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。示例如下：

③ size 参数的使用:

size 参数定义了渐变的大小。它可以是closest-side、farthest-side、closest-corner、farthest-corner。示例如下：

④ 重复的径向渐变：

4.1.3 案例：渐变背景按钮

本案例通过点击垂直渐变、水平渐变、对角线渐变、角度渐变、多颜色节点渐变、透明渐变、重复线性渐变、径向渐变、均匀分布的径向渐变、不均匀分布的径向渐变、不同尺寸关键字的径向渐变、重复径向渐变按钮实现对应的渐变效果。效果如图4-1-3-1，具体案例如下：

4.1.4 案例：渐变边框

本案例通过点击垂直渐变、水平渐变、对角线渐变、角度渐变、多颜色节点渐变、透明渐变、重复线性渐变、径向渐变、均匀分布的径向渐变、不均匀分布的径向渐变、不同尺寸关键字的径向渐变、重复径向渐变按钮实现对应的边框渐变效果。效果如图4-1-3-2，具体案例如下：

创作说明

名称：编程指南-CSS案例开发从学到用完美实践

版本：2024年

网站：http://www.51xueweb.cn

撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆

指导审核：阮晓龙