4.2 CSS阴影

CSS阴影是一种在网页设计中常用的效果，为元素添加深度和立体感。通过使用box-shadow属性，可以在元素的边框周围创建阴影效果。

4.2.1 CSS阴影基础

CSS可通过“box-shadow”属性设置阴影的大小、形状、方向等。“box-shadow”属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。基础语法如下：

4.2.2 CSS阴影属性

阴影通过CSS属性“box-shadow”来实现。属性共有6个参数，分别是水平偏移量、垂直偏移量、模糊半径、扩展半径、阴影颜色、内阴影。以下为CSS阴影属性参数的详细解释：

• h-offset（水平偏移量）：必选参数，阴影的水平位置，正值向右，负值向左。

• v-offset（垂直偏移量）：必选参数，阴影的垂直位置，正值向下，负值向上。

• blur（模糊半径）：可选参数，阴影的模糊程度，数值越大越模糊。

• spread（扩展半径）：可选参数，阴影的大小，正值扩大阴影范围，负值缩小阴影范围。

• color（阴影颜色）：可选参数，阴影的颜色。

• inset（内阴影）：可选参数，设置为inset时表示阴影在元素内部。

创建一个向右下方偏移、模糊度为5像素、颜色为黑色的阴影。具体示例如下：

4.2.3 案例：渐变卡片与阴影

本案例通过“linear-gradient”函数和“box-shadow”属性实现渐变卡片与阴影。效果如图4-2-3-1，具体示例如下：

4.2.4 案例：渐变文本阴影

本案例通过“text-shadow”属性模拟渐变实现文字的渐变阴影。效果如图4-2-3-2，具体示例如下：

4.2.5 案例：渐变背景与图片阴影

本案例通过“linear-gradient”函数实现渐变背景，通过“box-shadow”属性实现图片的阴影。效果如图4-2-3-3，具体示例如下：

创作说明

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

版本：2024年

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

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

指导审核：阮晓龙