元素阴影：box-shadow本质作用:从本质上讲,box-shadow 是将自身投影到另一个地方，将阴影应用于元素，可

每日思考：感受会成为我看见他人的另一重依据，因为对他人的好不能只出于道理而忽略感受，否则容易变成霸道的好，感受可以让每个人都有存在感。来自香芹又青了的解说：爱无能的本质是什么

如果对你有帮助的话，别忘了点个赞奥✨✨

本质作用

从本质上讲，box-shadow 是将自身投影到另一个地方，将阴影应用于元素，可以分别设置元素框的水平阴影和垂直阴影的相对于原始元素的偏移，颜色，模糊效果， 可以以叠加的形式向同一个元素添加一个或者多个阴影。

阴影分类

文字阴影

在文本中添加一个或多个阴影：text-shadow

本文重点讨论元素阴影，这里就不展开了哈。

元素阴影

向一个元素添加一个或多个阴影:box-shadow

限制：1.需要注意阴影并不是边框，它们并不占有实际的空间，也不能归属于 box-sizing 的范围。2.不能捕获类似悬停和点击的鼠标事件。如果事件很重要，那么可以通过添加 inset 关键字让阴影出现在元素的内部

语法：box-shadow: h-shadow v-shadow blur spread color inset;

1️⃣ 该属性是由逗号分隔 的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

2️⃣ 每个值的详细解释：

h-shadow： 必需。水平阴影的位置。允许负值。
v-shadow：必需。垂直阴影的位置。允许负值。
blur：可选。模糊距离。
spread：可选。阴影的尺寸。
color：可选。阴影的颜色。请参阅 CSS 颜色值。
inset：可选。将外部阴影 (outset) 改为内部阴影。

3️⃣ 各个值的演示视频：

CleanShot 2024-09-17 at 10.29.38.gif

应用场景

打字效果的光标频闪，：www.zhangxinxu.com/wordpress/2…

.typing {
    animation: typing 3.5s steps(15, end), blink-caret .75s step-end infinite;
}

// 光标频闪 
@keyframes blink-caret {
  from, to { box-shadow: 1px 0 0 0 transparent; }
  50% { box-shadow: 1px 0 0 0; }
}

模拟多重边框，利用box-shadow的可重叠性：www.cnblogs.com/coco1s/p/55…

div {
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background: deeppink;
  box-shadow: 
    inset 0 0 0 6px #fff,
    0 0 0 10px #333, 
    0 0 0 15px #aaa, 
    0 2px 5px 15px #666;
}

模拟半透明遮罩层，通过box-shadow实现半透明遮罩层把背景调暗，凸显某些 UI 组件:www.cnblogs.com/coco1s/p/55…

#foo{
  width:200px;
  line-height:200px;
  text-align:center;
  background:#fff;
  margin:50px auto;
  box-shadow: 0 0 0 1920px rgba(0, 0, 0, .5);
}

利用 box-shadow 来复制自身，实现具有重复单元的小图形，如云朵:www.cnblogs.com/coco1s/p/55…

div{
  width:100px;
  height:100px;
  margin: auto;
  background:#fff;
  border-radius:50%;
  box-shadow:
    120px 0px 0 -10px #795548,
    95px 20px 0 0px #607D8B,
    30px 30px 0 -10px green,
    90px -20px 0 0px #FFC107,
    40px -40px 0 10px #2196F3;
  animation: change 6s infinite;
}

@keyframes change {
  100% {
      box-shadow:120px 0px 0 -10px #fff,
    95px 20px 0 0px #fff,
    30px 30px 0 -10px #fff,
    90px -20px 0 0px #fff,
    40px -40px 0 0px #fff;
  }
}

<div></div>

CleanShot 2024-09-17 at 10.51.30.gif

环绕字母E,利用box-shaow的叠加，www.cnblogs.com/coco1s/p/55…

CleanShot 2024-09-17 at 11.18.45.gif

利用box-shadow实现立体感

星空+画图：juejin.cn/post/716775…

@function multiple-box-shadow($n) {
  $value: '#{random(2000)}px #{random(2000)}px #FFF';
  @for $i from 2 through $n {
    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF';
  }
  @return unquote($value);
}
#stars {
  width: 1px;
  height: 1px;
  box-shadow: multiple-box-shadow(700);
}
<div id='stars'></div>

元素阴影：box-shadow

本质作用

阴影分类

文字阴影

元素阴影

应用场景

支持情况

box-shadow

inset

Spread radius

Multiple shadows

参考资源