CSS彈框與遮罩是WEB前端開發中常用的模態框組件，它可以彈出一個對話框并遮住網頁中的其余內容，使用戶關注于特定任務或信息。接下來，我們來看一下如何使用CSS實現彈框加遮罩效果。

/** 遮罩 **/
.mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
/** 彈框 **/
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
width: 400px;
padding: 20px;
z-index: 10000;
}
/** 清除默認樣式 **/
.modal * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/** 關閉按鈕 **/
.modal-close-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}

以上是基礎樣式的實現。當需要彈出彈框時，可以通過添加.mask和.modal類來實現遮罩和彈框的呈現。同時，我們還可以在彈框中添加自己想要的內容，例如表單、文字、按鈕等。

// JavaScript代碼示例
// 打開彈框
document.querySelector('.btn-open-modal').addEventListener('click', function () {
document.querySelector('.mask').classList.add('visible');
document.querySelector('.modal').classList.add('visible');
});
// 關閉彈框
document.querySelector('.modal-close-btn').addEventListener('click', function () {
document.querySelector('.mask').classList.remove('visible');
document.querySelector('.modal').classList.remove('visible');
});

以上是使用JavaScript來實現打開和關閉彈框的代碼。當用戶點擊打開彈框按鈕時，我們通過添加.visible類來顯示遮罩和彈框，而在關閉按鈕中，我們則通過移除.visible類來隱藏遮罩和彈框。

綜上所述，使用CSS實現彈框加遮罩是一個簡單、實用的技術，它可以幫助我們實現更加友好、效果更佳的用戶體驗。我們只需要添加少量的HTML和CSS以及一些JavaScript代碼，便可以在我們的頁面上輕松使用這個功能。