【CSS】box-shadow盒阴影
box-shadow 是 CSS 中的一个属性，用于为 HTML 元素添加阴影效果。这个属性可以创建非常复杂的阴影效果，包括内阴影、外阴影、多重阴影等。
基本语法如下：
box-shadow: h-offset v-offset blur-radius spread-radius color inset;
h-offset（水平偏移量）：必需。阴影水平方向的偏移量。正值会使阴影向右偏移，负值会使阴影向左偏移。v-offset（垂直偏移量）：必需。阴影垂直方向的偏移量。正值会使阴影向下偏移，负值会使阴影向上偏移。blur-radius（模糊半径）：可选。阴影的模糊程度。值越大，阴影的边缘就越模糊。不允许负值。spread-radius（扩展半径）：可选。阴影的大小。正值会使阴影扩张，负值会使阴影缩小。color（阴影颜色）：可选。阴影的颜色。如果不指定，浏览器会使用默认值。inset（内阴影）：可选。如果指定，阴影将作为内阴影显示在元素内部。默认是外阴影。
示例：
div {width: 200px;height: 200px;background-color: #f0f0f0;box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
在这个示例中，div 元素将有一个向右和向下偏移 10px 的阴影，阴影的模糊半径为 5px，没有扩展半径，颜色为半透明的黑色（rgba(0,0,0,0.75)）。
你还可以添加多个阴影，只需用逗号分隔即可：
div {box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75), /* 第一个阴影 */-10px -10px 5px 0px rgba(255,0,0,0.5); /* 第二个阴影 */
}
在这个示例中，div 元素将有两个阴影：一个向右和向下偏移，另一个向左和向上偏移。
inset内阴影的用途。
inset 是 box-shadow 属性中的一个关键字，用于指定阴影是内部阴影（内阴影）而不是外部阴影（默认）。当使用 inset 关键字时，阴影会出现在元素内容的内部，而不是元素的外部边界之外。
内阴影（inset box shadow）的用途非常广泛，以下是一些常见的应用场景：
-
增强立体感：内阴影可以为元素增加深度和立体感，使其看起来像是被“嵌入”或“按压”在背景中。这种效果在模拟物理对象的界面设计中特别有用，如按钮、卡片、图标等。
-
突出内容：通过为元素添加内阴影，可以使其内容在视觉上更加突出。这在设计需要吸引用户注意力的元素时特别有用，如高亮显示的文本、图片或按钮。
-
营造氛围：内阴影也可以用于营造特定的氛围或情感。例如，在暗色调的背景上添加柔和的内阴影可以营造出一种神秘或温馨的氛围。
-
设计细节：内阴影还可以用于添加设计细节，使元素看起来更加精致和有趣。例如，在按钮的四个角添加内阴影可以使其看起来像是立体的或凸起的。
-
增强可读性：在文本元素上添加轻微的内阴影可以使其与背景更好地分离，从而提高可读性。这在背景颜色与文本颜色相近或背景有复杂图案的情况下特别有用。
-
模拟材质：内阴影可以模拟不同材质的外观，如纸张、布料、皮革等。通过调整阴影的颜色、模糊度和偏移量，可以创建出各种逼真的材质效果。
以下是一个使用内阴影的示例代码：
.button {display: inline-block;padding: 10px 20px;background-color: #4CAF50;color: white;border-radius: 5px;box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.2); /* 添加内阴影 */text-decoration: none;
}
在这个示例中，我们为一个按钮元素添加了内阴影。阴影从按钮的底部向上偏移（因为 y 偏移量为负值），并稍微模糊和扩展。这使得按钮看起来像是被按压在背景上，从而增强了其立体感和可用性。