CSS彈窗是網頁中常用的交互方式之一，它可以在用戶點擊某個元素或者執行某個操作時，彈出一個內容層以引起用戶的注意。其中，彈窗邊上變暗的效果是實現彈窗的關鍵之一。

在CSS中，可以通過使用偽元素來實現彈窗邊上的變暗效果。我們可以為彈窗的父容器添加一個偽元素，然后設置該元素的背景色為半透明黑色，然后再設置該元素的不透明度屬性（opacity）來控制變暗的程度。代碼如下：

.popup-container::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
opacity: 0.5;
z-index: -1;
}

在上面的代碼中，我們為.popup-container的偽元素添加了fixed定位，并且將其覆蓋整個瀏覽器窗口。然后，我們設置該元素的背景顏色為半透明黑色（使用rgba數值表示法），并將不透明度設置為0.5，表示將容器區域的透明度降低50%。最后將該元素的z-index屬性設置為-1，使其在內容層之下。

當彈窗觸發時，該偽元素會自動顯示，從而實現了彈窗邊上變暗的效果。如果需要隱藏該效果，可以通過JavaScript控制偽元素的display屬性為none來實現。