CSS 中text - shadow和box - shadow原理、属性的使用方法及区别

在网页设计里，阴影效果能够让元素更有立体感，增强视觉效果，就好像给元素加了一层"特效光环"。CSS里有两种常见的阴影效果，分别是text-shadow和box-shadow，它们能让文字和盒子（元素）变得更加生动。

text-shadow的作用是给文字添加阴影。它就像是给文字背后打了一束光，从而产生影子。

text-shadow属性接受多个参数，这些参数的顺序和含义如下：

下面是一个简单的示例代码：

css 复制代码

/* 选择所有的h1标签 */
h1 {
    /* 给文字添加阴影，水平偏移3px，垂直偏移3px，模糊半径2px，阴影颜色为灰色 */
    text-shadow: 3px 3px 2px gray; 
}

你还可以添加多个阴影效果，用逗号分隔每个阴影的参数：

css 复制代码

/* 选择所有的h2标签 */
h2 {
    /* 给文字添加两个阴影效果，第一个是黄色模糊阴影，第二个是红色清晰阴影 */
    text-shadow: 5px 5px 5px yellow, 2px 2px 0 red; 
}

box-shadow是给元素的盒子模型添加阴影。就像是给元素所在的"盒子"周围加上一圈影子，让盒子看起来像是悬浮在页面上。

box-shadow的参数和text-shadow类似，但多了一个可选的"扩展半径"参数：

下面是一个示例代码：

css 复制代码

/* 选择所有的div标签 */
div {
    /* 给div元素添加外阴影，水平偏移5px，垂直偏移5px，模糊半径10px，扩展半径0px，阴影颜色为蓝色 */
    box-shadow: 5px 5px 10px 0px blue; 
}

如果你想添加内阴影，可以这样写：

css 复制代码

/* 选择所有的p标签 */
p {
    /* 给p元素添加内阴影，水平偏移2px，垂直偏移2px，模糊半径5px，扩展半径0px，阴影颜色为绿色 */
    box-shadow: inset 2px 2px 5px 0px green; 
}

作用对象不同 ：text-shadow是专门给文字添加阴影，而box-shadow是给元素的盒子模型添加阴影。
视觉效果不同 ：text-shadow让文字看起来更有层次感，仿佛文字浮在页面上；box-shadow则让元素看起来像是悬浮在页面上，有立体感。
参数略有不同 ：box-shadow比text-shadow多了一个"扩展半径"参数，并且可以通过inset关键字创建内阴影。

通过合理运用text-shadow和box-shadow，你可以让网页的文字和元素更加生动有趣，吸引用户的注意力。