彈出層是 Web 開發中常見的元素，可以實現很多效果，比如彈出菜單、彈出提示框等等。在本篇文章中，我們將介紹如何使用 CSS 來設置彈出層。

首先，我們需要使用<div>元素來創建一個彈出層。比如：

<div class="popup">
我是彈出層
</div>

接下來，我們需要設置這個彈出層的樣式。我們可以使用下面的 CSS 代碼來實現它：

.popup {
display: none; /* 默認隱藏 */
position: fixed; /* 頁面滾動時固定位置 */
top: 50%; /* 居中定位 */
left: 50%; /* 居中定位 */
transform: translate(-50%, -50%); /* 居中定位 */
width: 300px;
height: 200px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 999; /* 設置層級 */
}

上面的代碼中，我們將彈出層默認隱藏。然后，我們設置了其寬度、高度、背景顏色、圓角和陰影等樣式。接下來，我們需要使用 JavaScript 來控制彈出層的顯示和隱藏。

下面是一個使用 jQuery 控制彈出層顯示和隱藏的示例代碼：

$(document).ready(function() {
$('.open-popup').click(function() {
$('.popup').fadeIn();
});
$('.close-popup').click(function() {
$('.popup').fadeOut();
});
});

在上面的代碼中，我們使用了.open-popup和.close-popup兩個類名來觸發顯示和隱藏彈出層的事件。可以根據實際情況進行修改。

最后，我們需要在 HTML 頁面中添加彈出層的觸發元素。比如下面的代碼：

<button class="open-popup">點擊彈出層</button>

通過點擊上面的按鈕，就可以觸發彈出層的顯示效果了。