大白话CSS 中text - shadow和box - shadow原理、属性的使用方法及区别
什么是阴影效果
在网页设计里，阴影效果能够让元素更有立体感，增强视觉效果，就好像给元素加了一层“特效光环”。CSS里有两种常见的阴影效果，分别是text-shadow和box-shadow，它们能让文字和盒子（元素）变得更加生动。
text-shadow的原理、属性及使用方法
原理
text-shadow的作用是给文字添加阴影。它就像是给文字背后打了一束光，从而产生影子。
属性及使用方法
text-shadow属性接受多个参数，这些参数的顺序和含义如下：
- 水平偏移量：正数表示阴影在文字右边，负数表示在左边。
- 垂直偏移量：正数表示阴影在文字下方，负数表示在上方。
- 模糊半径：数值越大，阴影越模糊。
- 阴影颜色：可以使用颜色名称、十六进制值、RGB值等。
下面是一个简单的示例代码：
/* 选择所有的h1标签 */
h1 {
/* 给文字添加阴影，水平偏移3px，垂直偏移3px，模糊半径2px，阴影颜色为灰色 */
text-shadow: 3px 3px 2px gray;
}
你还可以添加多个阴影效果，用逗号分隔每个阴影的参数：
/* 选择所有的h2标签 */
h2 {
/* 给文字添加两个阴影效果，第一个是黄色模糊阴影，第二个是红色清晰阴影 */
text-shadow: 5px 5px 5px yellow, 2px 2px 0 red;
}
box-shadow的原理、属性及使用方法
原理
box-shadow是给元素的盒子模型添加阴影。就像是给元素所在的“盒子”周围加上一圈影子，让盒子看起来像是悬浮在页面上。
属性及使用方法
box-shadow的参数和text-shadow类似，但多了一个可选的“扩展半径”参数：
- 水平偏移量：正数表示阴影在元素右边，负数表示在左边。
- 垂直偏移量：正数表示阴影在元素下方，负数表示在上方。
- 模糊半径：数值越大，阴影越模糊。
- 扩展半径：正数会使阴影扩大，负数会使阴影缩小。
- 阴影颜色：可以使用颜色名称、十六进制值、RGB值等。
- 可选的inset关键字：如果加上
inset，阴影会变成内阴影。
下面是一个示例代码：
/* 选择所有的div标签 */
div {
/* 给div元素添加外阴影，水平偏移5px，垂直偏移5px，模糊半径10px，扩展半径0px，阴影颜色为蓝色 */
box-shadow: 5px 5px 10px 0px blue;
}
如果你想添加内阴影，可以这样写：
/* 选择所有的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，你可以让网页的文字和元素更加生动有趣，吸引用户的注意力。