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

大白话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，你可以让网页的文字和元素更加生动有趣，吸引用户的注意力。