修饰感十足，你所不知道的Box-Shadow奥秘

2023-12-31 22:20:08

CSS中的Box-shadow属性：打造引人注目的阴影效果

在网页设计中，视觉效果是吸引用户的关键。阴影效果作为一种常见的装饰手法，能够为页面增添立体感和生动性。而CSS中的box-shadow属性正是实现这些阴影效果的有力工具。

Box-shadow语法

box-shadow属性的语法格式如下：

box-shadow: [水平偏移] [垂直偏移] [模糊半径] [颜色] [扩展长度] [内阴影]

水平偏移和垂直偏移： 指定阴影相对于元素的位置，正值向右下偏移，负值向左上偏移。
模糊半径： 决定阴影的模糊程度，值越大，阴影越模糊。
颜色： 指定阴影的颜色，可使用十六进制、RGB或RGBA值。
扩展长度： 指定阴影的扩展长度，正值向外扩展，负值向内收缩。
内阴影： 指定是否在元素内部创建阴影，inset表示内阴影，outset表示外阴影。

基本阴影效果

最简单的阴影效果就是基本阴影，可以轻松实现：

box-shadow: 2px 2px 5px #000;

此代码将为元素添加一个向右下偏移2像素，模糊半径为5像素，颜色为黑色的阴影。

投影阴影

投影阴影会营造出元素在表面投射阴影的立体感：

box-shadow: 5px 5px 10px #000;

该代码会为元素添加一个向右下偏移5像素，模糊半径为10像素，颜色为黑色的投影阴影。

内阴影

内阴影是在元素内部创建的阴影，可产生有趣的效果，如浮雕效果：

box-shadow: inset 2px 2px 5px #000;

此代码将为元素添加一个向右下偏移2像素，模糊半径为5像素，颜色为黑色的内阴影。

组合阴影

可组合多个阴影效果来创建更复杂的效果：

box-shadow: 5px 5px 10px #000, inset 2px 2px 5px #000;

该代码将为元素同时添加投影阴影和内阴影，营造出更具层次感的视觉效果。

CSS示例

html {
  box-shadow: 0 0 5px #f5f5f5; /* 基本阴影，营造元素的微妙立体感 */
}

.button {
  box-shadow: 0 5px 10px #000; /* 投影阴影，为按钮添加深度感 */
}

.container {
  box-shadow: inset 0 0 10px #fff; /* 内阴影，给容器增加浮雕效果 */
}

.card {
  box-shadow: 0 0 10px #000, inset 0 0 5px #fff; /* 组合阴影，创建复杂而引人注目的效果 */
}