22、HTML和CSS中的图形设计：阴影与渐变效果实现

HTML和CSS中的图形设计：阴影与渐变效果实现

1. 引言

在网页设计中，为了让页面内容更具立体感和视觉冲击力，我们可以运用一些设计样式来创建3D效果，比如添加投影和渐变效果。接下来，我们将详细了解如何在文本字符串和元素框周围创建投影，以及如何应用线性渐变和径向渐变。

2. 创建投影

2.1 创建文本阴影

为了让页面上的文本更具视觉效果，我们可以使用CSS的 text-shadow 属性来添加阴影。其语法如下：

text-shadow: color offsetX offsetY blur;

其中：
- color ：阴影颜色。
- offsetX 和 offsetY ：阴影在水平和垂直方向上与文本的距离。正值将阴影向右和向下推，负值将阴影向左和向上移动。
- blur ：阴影的模糊程度。默认值为0，创建具有清晰硬边缘的阴影；值越大，阴影边缘越不明显，与文本背景融合得越好。

例如，创建一个红色文本阴影，该阴影在文本右侧10像素、下方5像素处，模糊度为8像素：

text-shadow: red 10px 5px 8px;

我们还可以通过逗号分隔的列表添加多个阴影：