當(dāng)我們需要在網(wǎng)頁(yè)上展示一些彈出式的窗口來(lái)顯示一些信息或者提醒用戶，使用CSS畫一個(gè)彈出框就非常方便了。

/* 創(chuàng)建一個(gè)彈出框的樣式 */
.popup {
position: fixed; /* 定位方式為固定 */
top: 50%; /* 上方距離視窗為50% */
left: 50%; /* 左邊距離視窗為50% */
transform: translate(-50%, -50%); /* 水平和垂直方向上需要調(diào)整 */
width: 300px; /* 設(shè)置彈出框的寬度 */
height: 200px; /* 設(shè)置彈出框的高度 */
background-color: #fff; /* 設(shè)置彈出框的背景顏色 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 添加陰影效果 */
border-radius: 10px; /* 設(shè)置彈出框的圓角 */
}
/* 創(chuàng)建彈出框的標(biāo)題樣式 */
.popup h2 {
margin-top: 0; /* 去掉模塊外邊距 */
padding: 10px; /* 設(shè)置標(biāo)題的內(nèi)邊距 */
background-color: #f7f7f7; /* 設(shè)置標(biāo)題欄的背景顏色 */
border-radius: 10px 10px 0 0; /* 圓角效果 */
}
/* 創(chuàng)建彈出框的文本樣式 */
.popup p {
padding: 10px; /* 設(shè)置文本的內(nèi)邊距 */
}
/* 創(chuàng)建彈出框的按鈕樣式 */
.popup button {
display: block; /* 去掉按鈕的浮動(dòng)狀態(tài) */
margin: 10px auto 0 auto; /* 設(shè)置按鈕的外邊距 */
padding: 5px 20px; /* 設(shè)置按鈕的內(nèi)邊距 */
background-color: #007bff; /* 設(shè)置按鈕的背景顏色 */
color: #fff; /* 設(shè)置按鈕的字體顏色 */
border-radius: 5px; /* 圓角效果 */
border: none; /* 去掉按鈕的邊框 */
}
/* 創(chuàng)建觸發(fā)彈出框的按鈕樣式 */
.popup-btn {
padding: 5px 20px; /* 設(shè)置按鈕的內(nèi)邊距 */
background-color: #007bff; /* 設(shè)置按鈕的背景顏色 */
color: #fff; /* 設(shè)置按鈕的字體顏色 */
border-radius: 5px; /* 圓角效果 */
border: none; /* 去掉按鈕的邊框 */
}
/* 當(dāng)鼠標(biāo)懸浮在彈出框上時(shí)，改變背景顏色 */
.popup:hover {
background-color: #f7f7f7;
}

使用上述代碼可以輕松地創(chuàng)建一個(gè)簡(jiǎn)單的彈出框，需要注意的是，創(chuàng)建的彈出框可以根據(jù)實(shí)際需求進(jìn)行修改。例如可以自定義彈出框的寬度和高度，以及添加更多的樣式效果。