CSS自定義彈框樣式是Web前端開發中常用的一種技術，這種技術可以幫助開發人員根據自己的需求來創建與網頁風格一致的彈框樣式，從而提高網站的用戶體驗。下面我們來看看如何使用CSS自定義彈框樣式。

.pop-up {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 9999;
}
.pop-up h2 {
font-size: 24px;
margin-bottom: 20px;
}
.pop-up p {
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
}
.pop-up button {
display: block;
margin: 0 auto;
padding: 12px 32px;
font-size: 16px;
background-color: #008CBA;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.pop-up button:hover {
background-color: #006D87;
}

上面的代碼中，我們首先創建了一個類名為“pop-up”的樣式。其中，我們使用了position屬性來設置該元素的定位方式，top和left屬性來設置它的垂直和水平位置，transform屬性來使其居中對齊。接下來，我們設置了它的背景色、圓角、內邊距、陰影以及層級，使其看起來更加美觀。

在“pop-up”樣式中，我們還設置了一個h2元素來顯示彈框的標題，一個p元素來顯示彈框的內容，并用button元素來為彈框添加一個可用于關閉的按鈕。

為了讓該彈框樣式生效，我們只需要在相關的HTML元素上使用該類名即可，例如：

<div class="pop-up">
<h2>歡迎使用我們的網站！</h2>
<p>請登錄后在進行操作。</p>
<button>關閉</button>
</div>

在HTML代碼中引用了上述CSS代碼后，該彈框樣式就會在網頁中生效。