当前位置：首页 > 文章列表 > 文章 > 前端 > CSS阴影添加方法及属性详解

CSS阴影添加方法及属性详解

2025-09-19 09:40:48 0浏览收藏

哈喽！今天心血来潮给大家带来了《CSS阴影怎么加？阴影属性使用教程》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

答案：CSS通过box-shadow和text-shadow属性实现阴影效果。box-shadow用于元素盒子，支持偏移、模糊、扩展、颜色及内阴影；text-shadow用于文本，仅支持偏移、模糊和颜色。两者均可设置多层阴影，常结合rgba控制透明度以增强视觉层次与真实感。

CSS阴影效果怎么添加_CSS阴影属性使用教程

在CSS中添加阴影效果，主要通过box-shadow属性为元素（如div、按钮等）创建盒子阴影，以及text-shadow属性为文本创建文字阴影。这两种属性都允许你定义阴影的偏移量、模糊程度、颜色，甚至扩展范围，从而为页面元素带来深度感和视觉层次。

解决方案

要为你的网页元素增添阴影，我们主要依赖两个核心的CSS属性：box-shadow用于块级或行内块级元素，而text-shadow则专为文本内容服务。

1. box-shadow属性：为盒子元素添加阴影

box-shadow的语法相对灵活，它允许你定义多个阴影层，或者一个简单的单层阴影。最基础的格式是：

box-shadow: offset-x offset-y blur-radius spread-radius color;

offset-x：水平方向的偏移量。正值向右，负值向左。
offset-y：垂直方向的偏移量。正值向下，负值向上。
blur-radius（可选）：模糊半径。值越大，阴影越模糊，边缘越柔和。默认是0（不模糊）。
spread-radius（可选）：扩展半径。正值会使阴影向外扩展，负值会使阴影向内收缩。默认是0（不扩展）。
color：阴影的颜色。可以使用任何CSS颜色值，如#000、rgba(0,0,0,0.5)等。

你还可以添加inset关键字来创建内阴影：

box-shadow: inset offset-x offset-y blur-radius spread-radius color;

示例：

.my-box {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 50px;
    /* 一个简单的黑色阴影，向右下偏移5px，模糊8px */
    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3);

    /* 也可以是更复杂的，比如一个轻微的内阴影 */
    /* box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2); */
}

2. text-shadow属性：为文本添加阴影

text-shadow的语法比box-shadow稍微简单一些，因为它没有扩展半径和内阴影的概念：

text-shadow: offset-x offset-y blur-radius color;

offset-x：水平方向的偏移量。
offset-y：垂直方向的偏移量。
blur-radius（可选）：模糊半径。
color：阴影的颜色。

示例：

.my-text {
    font-size: 3em;
    color: #333;
    /* 给文本添加一个轻微的灰色阴影，向右下偏移2px，模糊3px */
    text-shadow: 2px 2px 3px rgba(100, 100, 100, 0.5);

    /* 也可以是多层阴影，比如一个描边效果 */
    /* text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */
}

在实际项目中，我个人发现，合理运用rgba颜色值来控制阴影的透明度，能让阴影效果看起来更自然，避免那种生硬的“贴纸”感。同时，多尝试不同的模糊半径和偏移量，往往能带来意想不到的惊喜。

如何为元素添加内阴影或多层阴影？

添加内阴影（inset）或者多层阴影是box-shadow属性非常实用的高级用法，它能让你的设计更具层次感和立体感。

添加内阴影： 要创建一个内阴影，你只需要在box-shadow属性值的最前面加上inset关键字。内阴影会从元素边框的内部向中心投射，给人一种凹陷或者被按下去的视觉效果。

.button-pressed {
    padding: 10px 20px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 5px;
    /* 创建一个轻微的内阴影，模拟按钮被按下的效果 */
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

我发现，在模拟用户界面（UI）中的交互状态，比如按钮的active状态时，inset阴影简直是神来之笔。它能很直观地告诉用户这个元素现在是“被激活”的。

添加多层阴影：box-shadow和text-shadow都支持添加多层阴影。你只需要用逗号将不同的阴影声明分隔开来。这些阴影会按照你声明的顺序从上到下叠加，也就是第一个声明的阴影在最上层。

.card-with-multiple-shadows {
    width: 250px;
    height: 150px;
    background-color: white;
    margin: 30px;
    border-radius: 8px;
    /* 声明两层阴影：一层较远的、模糊的灰色阴影，另一层较近的、更实的黑色阴影 */
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.19), /* 第一层：较远的、分散的阴影 */
        0 6px 6px rgba(0, 0, 0, 0.23);   /* 第二层：较近的、更清晰的阴影 */
}

.heading-with-outline {
    font-size: 4em;
    font-weight: bold;
    color: #007bff;
    /* 通过多层text-shadow模拟描边效果，然后加一层模糊的阴影 */
    text-shadow:
        -2px -2px 0 #fff,  /* 上左描边 */
        2px -2px 0 #fff,   /* 上右描边 */
        -2px 2px 0 #fff,   /* 下左描边 */
        2px 2px 0 #fff,    /* 下右描边 */
        4px 4px 6px rgba(0, 0, 0, 0.3); /* 最后一层：实际的模糊阴影 */
}

处理多层阴影时，我通常会把最“远”或者最“模糊”的阴影放在最前面，这样它就像一个大的背景光晕，然后把更具体、更接近元素的阴影放在后面。这种叠加方式能创造出更丰富的深度感，而不是简单地堆叠。

阴影参数中的模糊半径和扩展半径有什么区别？

在box-shadow属性中，blur-radius（模糊半径）和spread-radius（扩展半径）是两个经常让人混淆但作用截然不同的参数。理解它们的区别对于精确控制阴影效果至关重要。

模糊半径（blur-radius）：

作用： 决定阴影边缘的模糊程度。值越大，阴影的边缘越柔和，越扩散，看起来越像光线经过漫反射后的效果。
视觉效果： 想象一下一个物体的影子，如果光源离物体很远，或者光线穿过半透明的介质，影子就会变得模糊。模糊半径就是模拟这种效果。
值：接受一个长度值（如px）。0表示阴影边缘完全清晰，没有模糊。

.box-blur {
    /* 阴影向右下偏移，但边缘非常模糊 */
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4); /* 模糊半径20px */
}

我个人觉得，模糊半径是创造“柔和”和“自然”阴影的关键。太小的模糊半径会让阴影显得生硬，而适当的模糊能让元素更好地融入背景，或者模拟环境光的效果。

扩展半径（spread-radius）：

作用： 决定阴影的尺寸大小。它会在阴影的原始尺寸基础上向外或向内扩展。
视觉效果： 扩展半径不会使阴影边缘模糊，而是直接增加或减少阴影的实际大小。正值会使阴影变得比元素本身更大，负值则会使阴影比元素本身更小。
值：接受一个长度值（如px）。0表示阴影的尺寸与元素的尺寸（减去偏移量后）保持一致。

.box-spread {
    /* 阴影向右下偏移，并向外扩展5px，边缘清晰 */
    box-shadow: 5px 5px 0 5px rgba(0, 0, 0, 0.4); /* 扩展半径5px */
}

有时候，我需要一个比元素本身稍微大一点，但边缘清晰的阴影来做一些特殊效果，比如一个光晕或者边框式的阴影，这时候扩展半径就派上用场了。它和模糊半径通常是结合起来使用的，比如一个稍微扩展一点，然后加上一定的模糊，就能得到一个既有一定体积感又柔和的阴影。

总结区别：

模糊半径影响的是阴影的清晰度/柔和度。
扩展半径影响的是阴影的实际大小/范围。

你可以这样记忆：blur是“模糊”，spread是“扩散”或“展开”。它们各自负责阴影的不同维度，但协同工作时能创造出非常丰富的视觉效果。

文本阴影（text-shadow）和盒子阴影（box-shadow）在使用上有什么不同？

text-shadow和box-shadow虽然都用于创建阴影效果，但它们各自针对的目标元素和应用场景有着本质的区别，这决定了它们在使用上的差异。

1. 作用对象不同：

text-shadow： 专门应用于文本内容。它会为文本中的每个字符生成阴影，而不是为包含文本的整个盒子。
box-shadow： 作用于元素盒子模型。它为整个HTML元素（如div、button、img等）的边框、背景和内容区域之外创建阴影。

2. 属性参数不同：

text-shadow： 只有offset-x、offset-y、blur-radius和color这四个参数。它没有spread-radius（扩展半径）和inset（内阴影）的概念。
box-shadow： 拥有offset-x、offset-y、blur-radius、spread-radius、color，并且可以添加inset关键字。参数更丰富，控制力更强。

3. 视觉效果和应用场景：

text-shadow：
- 提升可读性： 在背景复杂或对比度不足时，为文本添加一层微妙的阴影可以使文字更突出，提升可读性。
- 艺术效果： 模拟浮雕、霓虹灯、描边、3D文字等特殊艺术字体效果。
- 强调： 突出某个标题或关键信息。
- 限制： 因为是为每个字符生成阴影，如果模糊半径过大，或者偏移量过大，可能会让文字变得难以辨认。
- 多层阴影： 常常用于创建描边效果（通过多层无模糊的阴影）或者叠加不同颜色的光晕。
```
h1 {
    color: #fff;
    background-color: #333;
    padding: 10px;
    /* 文本白色，加上黑色阴影，在深色背景下更清晰 */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}
```
我个人在处理文字设计时，如果希望文字有立体感或者在复杂背景下更显眼，text-shadow是我的首选。它比直接改变文字颜色或添加边框更灵活，也更具表现力。
box-shadow：
- 深度感和层次感： 让元素看起来像是从页面“浮”起来，创造视觉上的深度。
- 分离元素： 将一个元素与周围内容区分开来，使其更突出。
- 交互反馈： 在鼠标悬停（:hover）或点击（:active）时改变阴影，提供视觉反馈。
- 设计美学： 柔和的阴影可以增加设计的精致感和现代感。
- 内凹效果： 使用inset创建按钮按下、输入框聚焦等效果。
- 多层阴影： 常用于模拟更复杂的光照环境，比如一个元素同时被主光源和环境光照亮。
```
.card {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    margin: 20px;
    /* 让卡片看起来像是浮在页面上 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.card:hover {
    /* 鼠标悬停时阴影加深，模拟卡片“抬起” */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
```
对于整个UI组件的视觉呈现，box-shadow是无可替代的。它能赋予元素“生命”，让用户感知到它们是可交互的，或者是有特定功能的。