css弹窗加悬浮阴影效果

要实现CSS弹窗加悬浮阴影效果，可以按照以下步骤进行操作：

1. HTML结构：首先，在HTML文档中创建一个div元素，作为弹窗的容器，如下所示：

<div class="popup">
  <!-- 弹窗内容 -->
</div>

2. CSS样式：为弹窗容器添加样式，例如设置宽度、高度、背景颜色等，使其成为一个可见的弹窗。同时，添加悬浮阴影效果，可通过box-shadow属性实现，如下所示：

.popup {
  width: 300px;
  height: 200px;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

其中，box-shadow属性的值设置为"0px 0px 10px rgba(0, 0, 0, 0.5)"，它的四个参数分别表示水平偏移量、垂直偏移量、模糊半径和颜色。

3. JavaScript控制：结合JavaScript，实现弹窗的显示与隐藏。可以添加点击事件或其他触发事件来控制弹窗的显示与隐藏，如下所示：

// 获取弹窗元素
var popup = document.querySelector('.popup');

// 设置点击事件
document.querySelector('.open-popup').addEventListener('click', function() {
  // 显示弹窗
  popup.style.display = 'block';
});

document.querySelector('.close-popup').addEventListener('click', function() {
  // 隐藏弹窗
  popup.style.display = 'none';
});

在这个示例中，通过选择器".open-popup"和".close-popup"来获取打开和关闭弹窗的按钮，并分别添加点击事件的监听器。在事件的回调函数中，通过修改弹窗容器的display属性的值来实现弹窗的显示与隐藏。

综上所述，通过以上步骤，就可以实现CSS弹窗加悬浮阴影效果。