CSS彈出框的樣式是前端開發(fā)中不可避免的，下面將介紹一些常見的CSS彈出框樣式。

1. 簡(jiǎn)單的彈出框樣式：

.popup-box {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
padding: 10px 20px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 999;
}

2. 帶有背景遮罩效果的彈出框樣式：

.popup-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.popup-box {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
padding: 10px 20px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}

3. 帶有動(dòng)畫效果的彈出框樣式：

.popup-box {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
padding: 10px 20px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 999;
opacity: 0;
animation: fadeIn 0.3s forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

通過以上例子，可以看出彈出框的樣式是非常靈活的，可以根據(jù)需要進(jìn)行調(diào)整和修改。