在CSS（层叠样式表）中，阴影是一种用于在HTML元素周围创建视觉效果的技术。它通过添加虚拟的阴影元素来模拟元素的投影，从而为页面元素添加深度和立体感。

• 阴影通过水平和垂直偏移量模拟元素在背景上的投影，创造出元素浮在页面上的立体感。
• 通过调整阴影的偏移和颜色，可以为元素赋予不同的层次感，使页面中的元素看起来更具深度。
• 阴影常用于创建按钮和卡片效果，使它们在页面上凸显出来。通过适当的偏移、颜色和模糊，可以营造出按钮被按下或卡片浮动的视觉效果。
• 可以将阴影应用于文本，以使文本在页面上脱颖而出。这种效果通常用于标题、标语或突出显示的文字。
• 阴影还可以应用于图像，用于在图像周围创建边框效果，从而使图像在页面中更加突出。

阴影

阴影效果有三个语法，分别是box-shadow、text-shadow、drop-shadow()。box-shadow和text-shadow都是一个属性，而drop-shadow()是filter里的滤镜函数。

• 想要盒子轮廓产生阴影效果，使用box-shadow
• 想要文本轮廓产生阴影效果，使用text-shadow
• 想要透明图像的非透明部分轮廓产生阴影效果，使用fliter:drop-shadow()

首先得认识语法参数，三个阴影都具备以下大部分参数，只要认识以下参数，阴影效果随时能上手。

• OffsetX：水平偏移，阴影的水平位置(必选)

  • Offset：偏移，可用任何长度单位，允许负值，正值向右负值向左(默认0)

• OffsetY：垂直偏移，阴影的垂直位置(必选)

  • Offset：偏移，可用任何长度单位，允许负值，正值向下负值向上(默认0)

• Blur：模糊半径，阴影的清晰程度(虚色)

  • Length：长度，可用任何长度单位，值越大边缘越模糊(默认0)

• Spread：扩展距离，阴影的实体尺寸(实色)

  • Length：长度，可用任何长度单位，允许负值，正值扩大负值缩小(默认0)

• Color：投影颜色

  • transparent：透明(默认)
  • Keyword：颜色关键字
  • HEX：十六进制色彩模式
  • RGB或RGBA：RGB/A色彩模式
  • HSL或HSLA：HSL/A色彩模式

• Position：投影位置

  • outset：阴影显示在外部(默认)
  • inset：阴影显示在内部

上述参数都是box-shadow标配的，而text-shadow和drop-shadow()除了spread和position，其余全部标配。

box-shadow: offset-x offset-y blur spread color position;
text-shadow: offset-x offset-y blur spread color;
drop-shadow(offset-x, offset-y, color)

多重阴影

与backgound和mask一致可声明多重效果，使用逗号隔开。先声明的阴影层叠等级最高，会遮挡后面声明的阴影，排列方向由position决定。后面声明的阴影接着上一个排列下去，此时需将blur或spread增大，防止被先声明的阴影遮挡。

box-shadow: offset-x offset-y blur spread color position, offset-x offset-y blur spread color position;

定向阴影

巧妙声明spread为blur的负值可产生定向阴影，这样是为了抵消阴影的扩散。还记得offset-x和offset-y的取值吗，正负决定了偏移方向。当然这个技巧只适用于box-shadow。

• offset-x：正值向右负值向左
• offset-y：正值向下负值向上

彩虹色带

$rainbow 变量包含了一组使用 box-shadow 属性创建彩虹效果所需的阴影参数。每个阴影参数都以 inset（内阴影）方式应用，然后通过设置不同的偏移值来创建一系列同心圆形阴影，从而形成彩虹效果。 clip-path 属性的值是 polygon(0 0, 100% 0, 100% 50%, 0 50%)，这表示裁剪出一个多边形区域，具体来说是一个上半部分是直线，下半部分是斜线的四边形。这个多边形形状与 border-radius: 100%; 结合使用，使得元素呈现出圆形的外观。