穿梭框是網頁設計中常用的一種交互組件，它允許用戶在兩個列表之間移動項目。在CSS中，我們可以通過應用樣式來自定義穿梭框的外觀和交互。以下是一些常見的穿梭框CSS樣式：

// 控制框體寬度和高度
.transfer-box {
width: 400px;
height: 300px;
}
// 控制標題樣式和位置
.transfer-title {
font-size: 18px;
font-weight: bold;
text-align: center;
}
// 控制列表樣式和位置
.transfer-list {
width: 50%;
height: 100%;
float: left;
}
// 控制列表項的樣式
.transfer-item {
cursor: pointer;
padding: 5px 10px;
margin-bottom: 5px;
border: 1px solid #ccc;
background-color: #fff;
}
// 控制被選中的列表項的樣式
.transfer-item.active {
color: #fff;
background-color: #1e87f0;
}
// 控制移動按鈕的樣式和位置
.transfer-btn-box {
width: 50px;
height: 100%;
float: left;
display: flex;
justify-content: center;
align-items: center;
}
// 控制移動按鈕圖標的樣式
.transfer-btn-icon {
font-size: 20px;
cursor: pointer;
transition: all .3s ease-in-out;
}
// 控制按鈕懸停時圖標的樣式
.transfer-btn-icon:hover {
transform: scale(1.2);
transition: all .3s ease-in-out;
}

通過使用以上的CSS樣式，我們可以自定義出一個簡潔美觀的穿梭框。在實際應用中，還需要注意穿梭框的交互細節(jié)，例如每個列表的滾動條、移動按鈕的禁用狀態(tài)等。