CSS是一種用于網頁設計的語言，可以實現豐富多彩的效果。其中彈窗效果是常見的一種，可以讓用戶在點擊按鈕或鏈接后彈出對話框，提供額外的信息或操作。下面我們來介紹一下如何用CSS實現彈窗效果。

/*CSS樣式*/
#popup {
display: none; /*默認不顯示*/
position: fixed; /*固定位置*/
top: 50%; /*頂部距離50%*/
left: 50%; /*左側距離50%*/
transform: translate(-50%, -50%); /*居中*/
width: 300px; /*寬度*/
background-color: #fff; /*背景色為白色*/
padding: 20px; /*內邊距為20像素*/
border: 1px solid #ccc; /*邊框為灰色*/
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /*陰影效果*/
}
#overlay {
display: none; /*默認不顯示*/
position: fixed; /*固定位置*/
top: 0; /*頂部距離0*/
left: 0; /*左側距離0*/
width: 100%; /*寬度100%*/
height: 100%; /*高度100%*/
background-color: rgba(0, 0, 0, 0.7); /*背景色為半透明黑色*/
}
/*JS腳本*/
document.getElementById('popup-button').addEventListener('click', function() {
document.getElementById('popup').style.display = 'block';
document.getElementById('overlay').style.display = 'block';
});
document.getElementById('close-button').addEventListener('click', function() {
document.getElementById('popup').style.display = 'none';
document.getElementById('overlay').style.display = 'none';
});

以上是實現彈窗效果的CSS樣式和JS腳本。首先定義了一個id為popup的元素，表示彈窗框，其中display屬性默認為none，表示不顯示。設置了固定位置，寬度，背景色，邊框和陰影效果等樣式。同時定義了一個id為overlay的元素，表示遮罩層，效果為半透明黑色，也默認不顯示。

接著在JS腳本中，使用addEventListener()方法給id為popup-button的元素添加點擊事件，當點擊時，顯示id為popup和overlay的元素。反之，點擊id為close-button的元素時，將這兩個元素的display屬性設置為none，表示隱藏。

以上介紹了如何用CSS實現彈窗效果。如果您希望彈窗具有更多的功能和交互效果，可以通過JS腳本進一步完善。