要使用 CSS 制作弹框效果，可以使用以下步骤：
首先，需要使用 HTML 创建一个包含要显示的内容的容器元素，例如一个 div 元素。
然后，需要使用 CSS 设置容器元素的样式，例如设置宽度、高度、边框和背景颜色等。
接下来，需要使用 CSS 设置容器元素的位置，例如使用 position 属性将其设置为绝对定位，并使用 top、right、bottom 和 left 属性设置其位置。
然后，需要使用 CSS 设置容器元素的显示状态，例如使用 display:none 将其隐藏。
当需要显示弹框时，可以使用 JavaScript 将容器元素的 display 属性设置为 block，使其显示出来。
如果需要为弹框添加遮罩层，则可以使用另一个 div 元素，并为其设置背景颜色和不透明度等样式。
以下是一个示例 CSS 代码，用于实现一个简单的弹框效果：
.popup {
width: 400px;
height: 200px;
border: 1px solid #ccc;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.mask {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: 0.5;
display: none;
}其中，.popup 为弹框容器元素的类名，.mask 为遮罩层容器元素的类名。通过设置弹框容器元素的 position 属性为 absolute，并使用 transform 属性将其垂直和水平居中，可以实现弹框始终居中显示的效果。使用 position 属性为 fixed，可以使遮罩层始终占据整个窗口，防止用户在弹框显示时进行其他操作。