CSS可以幫助我們制作出各種好看的彈窗效果。下面就為大家介紹幾種常見的彈窗樣式。

/* 窗口蒙層 */
.mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
z-index: 9999;
}
/* 彈窗容器 */
.popup{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
z-index: 10000;
}
/* 關閉按鈕 */
.popup-close{
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
cursor: pointer;
}
/* 文字提示彈窗 */
.popup-tip{
width: 200px;
text-align: center;
}
/* 模擬對話框彈窗 */
.popup-dialog{
width: 300px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
/* 圖片彈窗 */
.popup-image{
max-width: 80%;
max-height: 80%;
display: block;
margin: 0 auto;
}

以上是常見的幾種彈窗樣式的CSS代碼，我們只需要根據自己的需要來修改即可。代碼中包括了窗口蒙層、彈窗容器、關閉按鈕和不同樣式的彈窗內容部分的樣式。

如果我們想要實現一個簡單的彈窗效果，可以使用以下代碼：

<div class="mask"></div>
<div class="popup">
<span class="popup-close">×</span>
<p>這是彈窗的內容</p>
</div>

以上代碼中，我們只需要給彈窗內容部分添加相應的樣式即可實現不同的彈窗效果。

通過CSS制作好看的彈窗效果，使得網頁具有更好的交互性和用戶體驗，也讓頁面更加美觀優雅。希望以上代碼對大家有所幫助。