CSS單擊可彈窗效果是一個非常流行的網頁設計技巧，不僅可以為用戶帶來舒適的視覺效果，還可以提高網站的交互性和用戶體驗。下面我們來看一下如何用CSS實現這種效果。

.popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.btn {
display: inline-block;
background-color: #222;
color: #fff;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
}
.btn:hover {
background-color: #444;
}
.btn:focus + .overlay {
display: block;
}
.btn:focus + .overlay + .popup {
display: block;
}

以上代碼中，在HTML代碼中，我們添加了一個按鈕和兩個層次結構。當用戶單擊按鈕時，將顯示遮罩層，當用戶單擊遮罩層時，將會顯示彈窗層。

CSS代碼中，我們為遮罩層和彈窗層分別設置了display:none，這將使它們在頁面加載時將隱藏起來。我們還為按鈕設置了一個:focus偽類，當用戶單擊該按鈕時，將設置遮罩層和彈窗層的display屬性為block，這將導致它們現在在頁面上可見。

最后，我們為彈窗層添加了一些樣式屬性，例如設置它的位置、大小、背景顏色和邊框等屬性。這樣我們就可以實現CSS單擊可彈窗效果啦！