在網頁設計中，彈窗效果已成為一個很常見的需求。在css中，設計彈窗效果可以通過以下步驟實現：

.popup {
/* 在 css 中設置彈出框的基本樣式，例如位置，大小，背景顏色等 */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
padding: 20px;
background-color: #f8f8f8;
box-shadow: 0px 0px 10px #888;
z-index: 9999;
}
.mask {
/* 設置遮罩層的樣式，使其覆蓋整個頁面 */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9998;
}
.close-btn {
/* 設置關閉按鈕的樣式 */
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: #666;
cursor: pointer;
}

在以上的代碼中，.popup、.mask、.close-btn是三個類名，需要在html中分別添加相應的元素，并為它們添加相應的類名，例如：

<div class="mask"></div>
<div class="popup">
<span class="close-btn">x</span>
<p>這是一個彈窗效果</p>
</div>

接下來就是通過JavaScript或者jQuery來添加彈出框的打開和關閉功能了。

以上就是如何使用css來設計彈窗效果的方法，通過這樣的方式，可以方便地在網頁中添加彈窗交互效果。