CSS中底部彈框，指的是浮現在頁面底部的對話框，常見于一些需要用戶操作的提示或彈出式菜單。

.bottom-dialog {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 500px;
border-radius: 10px;
background-color: #fff;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
z-index: 99999;
}
.bottom-dialog .close-btn {
position: absolute;
top: -20px;
right: 10px;
cursor: pointer;
font-size: 20px;
color: #ccc;
}
.bottom-dialog p {
font-size: 16px;
line-height: 1.5;
}

以上是實現底部彈框的CSS代碼，首先設置底部彈框的位置為fixed，底部距離為0，然后通過設置left和transform實現居中顯示。寬度設置為90%或最大寬度500px，設置圓角和陰影效果增加美觀度。z-index設置為較高的值，確保彈框在頁面頂部顯示。

底部彈框通常需要關閉按鈕，通過設置.close-btn的樣式可以實現。需要在HTML中添加關閉按鈕的元素，點擊后關閉對話框，代碼如下：

×
這里是底部彈框的內容

以上是HTML和JavaScript的代碼。通過querySelector方法獲取底部彈框和關閉按鈕的元素，然后監聽關閉按鈕的點擊事件。點擊時，將底部彈框的display設置為none，實現關閉彈框的效果。

底部彈框是一個常用的UI組件，它不僅可以用于提示和操作，也可以用于展示彈出式菜單等內容。通過上述代碼，我們可以輕松實現優雅的底部彈框效果。