CSS3弹窗是网站设计中常用的一种交互效果，可以使网站页面更具有动感和用户友好性。下面我们来看一下如何通过CSS3制作一个简单的弹窗效果。

首先，在HTML文档中创建一个按钮元素，用于触发弹出窗口的事件。代码如下：

<button id="btn">点击弹出窗口</button>

然后，在CSS文件中定义按钮元素的样式，包括背景色、字体颜色、边框等，以及弹窗的样式，包括位置、大小、背景色等。代码如下：

#btn{
background-color: #4CAF50; /* 按钮背景色 */
color: white; /* 按钮字体颜色 */
border: none; /* 去除按钮边框 */
padding: 10px 20px; /* 按钮内边距 */
text-align: center; /* 按钮文本居中 */
font-size: 16px; /* 按钮字体大小 */
cursor: pointer; /* 鼠标悬停样式 */
}
/* 弹出窗口样式 */
#popup{
display: none; /* 默认隐藏弹窗 */
position: fixed; /* 固定定位 */
top: 50%; /* 垂直居中 */
left: 50%; /* 水平居中 */
transform: translate(-50%, -50%); /* 居中 */
background-color: white; /* 背景色 */
width: 400px; /* 宽度 */
height: 200px; /* 高度 */
border: 1px solid #ccc; /* 边框 */
border-radius: 5px; /* 圆角 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 阴影 */
}

接下来，我们需要通过JavaScript来实现弹窗的显示和隐藏。代码如下：

var btn = document.getElementById("btn");
var popup = document.getElementById("popup");
btn.onclick = function(){
popup.style.display = "block";
}
popup.onclick = function(event){
if(event.target == popup){
popup.style.display = "none";
}
}

通过以上代码，我们实现了弹窗的显示和隐藏。点击按钮时，弹窗会显示出来；点击弹窗外的区域，弹窗会隐藏。

以上就是通过CSS3制作弹窗的简单实现过程。