要使用CSS制作模态框效果，可以通过以下步骤实现：
首先，在HTML中创建一个div元素，作为模态框的容器，设置其样式为display: none，并添加一个id属性，以便在后面的CSS中引用。
在CSS中，使用伪类选择器:target来选择模态框容器，并设置其样式为display: flex和position: fixed，以便让模态框居中显示，并且不随页面滚动而移动。同时，设置背景颜色和透明度，以便模糊后面的内容。
在模态框容器内部，添加需要显示的内容，比如标题、正文、按钮等，并设置适当的样式，比如宽度、高度、边框、内边距、字体等。
在模态框容器外部，添加一个遮罩层元素，用于点击后关闭模态框。设置其样式为position: fixed、top: 0、left: 0、width: 100%、height: 100%、background-color: rgba(0, 0, 0, 0.5)等，以便覆盖整个页面，并且不影响后面的内容。
在按钮等元素上，使用锚点链接#和模态框容器的id属性，以便点击后触发模态框的显示。
下面是一个简单的示例代码：
<!-- 模态框容器 -->
<div id="modal">
<h2>这是一个模态框</h2>
<p>这是模态框的正文</p>
<button>关闭</button>
</div>
<!-- 触发模态框的按钮 -->
<button><a href="#modal">打开模态框</a></button>
<!-- 遮罩层 -->
<div class="overlay"></div>/* 模态框容器 */
#modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 600px;
height: auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 1000;
}
/* 模态框容器显示 */
#modal:target {
display: flex;
}
/* 遮罩层 */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
/* 关闭按钮 */
#modal button {
display: block;
margin: 20px auto 0;
padding: 5px 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
/* 关闭按钮悬停样式 */
#modal button:hover {
background-color: #ccc;
}注：以上代码仅为示例，实际应用中需要根据具体情况进行调整。