CSS彈出框在網頁設計中比較常見，可以增加頁面的交互性和美感。下面就介紹一些CSS修飾彈出框的技巧。

.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
padding: 20px;
}
.popup-title {
font-size: 24px;
font-weight: bold;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}
.popup-content {
font-size: 16px;
line-height: 1.5;
}
.popup-button {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
background-color: #3f51b5;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
}
.popup-button:hover {
background-color: #283593;
}

說明：

• .popup為整個彈出框的樣式，使用了定位、邊框、陰影等屬性。其中，transform: translate(-50%, -50%);使彈出框居中顯示。
• .popup-title為標題樣式，使用了加粗字體、底部邊框等屬性。
• .popup-content為內容樣式，使用了字體大小和行高等屬性。
• .popup-button為按鈕樣式，使用了背景顏色、文字顏色、圓角等屬性。同時，使用transition屬性實現了按鈕的鼠標懸停變化。

通過以上的CSS修飾彈出框的技巧，我們可以輕松實現一個美觀且實用的彈出框，并根據自己的需求進行更改和拓展。