添加全边框阴影效果从里到外

在许多设计或编程场景中，想要给元素添加一个从里到外逐渐变淡（或变深）的全边框阴影效果，可以使用层叠样式表（CSS）来实现这一视觉效果。以下是一个简单的示例，展示了如何使用CSS来创建一个具有这种渐变边框阴影的盒子：

.box {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #f0f0f0; /* 盒子背景色 */
}

/* 添加阴影效果的关键代码 */
.box::before,
.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1; /* 确保阴影在盒子下方 */
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2); /* 阴影设置，这里使用了内阴影（inset）以实现从里到外的效果，颜色和透明度可以根据需要调整 */
  opacity: 1; /* 初始不透明度，可以根据需要调整以实现渐变效果 */
  transition: opacity 0.5s ease; /* 可选：添加过渡效果，使阴影变化更平滑 */
}

/* 如果需要多个层次的阴影，可以通过改变box-shadow的参数和添加更多的伪元素来实现 */
.box::after {
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1);
  opacity: 0.9; /* 第二层阴影的不透明度稍高，以形成层次感 */
}

HTML部分只需要一个简单的盒子元素：

<div class="box">
  <!-- 盒子内容 -->
</div>

这个例子中，通过.box::before 和 .box::after 伪元素创建了两个阴影层，它们都使用了inset关键字来生成内部阴影，从而实现了从里到外的视觉效果。通过调整box-shadow的spread-radius（阴影扩散半径）、颜色、透明度以及每一层的opacity，你可以自由地控制阴影的强度和层次感，创造出丰富的视觉效果。