阴影图层→ 专业名：遮罩层 / 模态蒙层 (Modal Mask)→ 场景：弹窗底下的暗色半透明层
<!-- 第一步：先有原页面内容 -->
<div class="page-content">
首页、按钮、文字等正常内容
</div>
<!-- 第二步：新增遮罩层（关键！不是改上面的内容，而是加一层） -->
<div class="modal-mask"></div>
<!-- 第三步：弹窗浮在遮罩层上 -->
<div class="popup">弹窗内容</div>
<style>
/* 核心：遮罩层的样式——半透明黑色，覆盖整个屏幕 */
.modal-mask {
position: fixed; /* 固定在屏幕上，覆盖所有内容 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 关键：rgba(黑, 黑, 黑, 透明度0.5) */
z-index: 999; /* 层级高于原页面，低于弹窗 */
}
.popup {
position: fixed;
z-index: 1000; /* 弹窗在遮罩层上面 */
/* 弹窗样式省略 */
}
</style>
光影图层→ 专业名：冻结遮罩 / 变灰遮罩 (Disabled / Loading Overlay)→ 场景：未响应、卡住时变白变浅的那层
<!-- 原界面内容 -->
<div class="app-content">
软件界面、按钮、输入框等
</div>
<!-- 新增的“变白遮罩层”（核心！同样是加一层） -->
<div class="disabled-mask"></div>
<style>
/* 核心：半透明白色遮罩，覆盖整个界面 */
.disabled-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7); /* 关键：rgba(白, 白, 白, 透明度0.7) */
z-index: 999; /* 盖在原内容上面 */
pointer-events: none; /* 不影响点击，但视觉上覆盖 */
}
</style>
飞
