CSS阴影效果怎么添加_CSS阴影属性使用教程-css教程-PHP中文网

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

css阴影效果怎么添加_css阴影属性使用教程

在CSS中添加阴影效果，主要通过

box-shadow

登录后复制

属性为元素（如div、按钮等）创建盒子阴影，以及

text-shadow

登录后复制

属性为文本创建文字阴影。这两种属性都允许你定义阴影的偏移量、模糊程度、颜色，甚至扩展范围，从而为页面元素带来深度感和视觉层次。

解决方案

要为你的网页元素增添阴影，我们主要依赖两个核心的CSS属性：

box-shadow

登录后复制

用于块级或行内块级元素，而

text-shadow

登录后复制

则专为文本内容服务。

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); */
}

登录后复制

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

登录后复制

（扩展半径）是两个经常让人混淆但作用截然不同的参数。理解它们的区别对于精确控制阴影效果至关重要。

影谱

汉语电影AI辅助创作平台

查看详情

模糊半径（

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
```
登录后复制
是无可替代的。它能赋予元素“生命”，让用户感知到它们是可交互的，或者是有特定功能的。