抽屜框是一個非常有用的CSS特性，由于其優美的外觀和高度的可定制性，抽屜框已經成為了很多網站的必備 HTML 元素。

要創建一個抽屜框，需要以下步驟：

.drawer{
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 300px;
background-color: #fff;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
transform: translateX(300px);
transition: transform 0.3s ease-in-out;
}

在上方的代碼中，我們定義了一個名為“drawer”的 class，其中包含抽屜框的所有樣式。

首先，我們將位置屬性設置為“fixed”，以使抽屜框保持在屏幕頂部，不管用戶何時滾動頁面。然后，我們設置抽屜框的縱坐標為0（top: 0），代表它的頂部應該與屏幕的頂部對齊。我們還使用“right”屬性來將其固定在頁面的右側。

接下來，我們將抽屜框的高度設置為100%（height: 100%），使其覆蓋整個視口，而寬度則設置成300px（width: 300px），以設置默認寬度。我們還使用了一個白色的背景顏色和一個box-shadow屬性，以展示簡單而講究的外觀。

最后，我們使用了一個transform屬性，將抽屜框移出視圖，同時設置一個過渡效應，以使打開和關閉抽屜框時出現動畫效果（transform: translateX(300px); transition: transform 0.3s ease-in-out;）。

簡而言之，如果你需要在網站中添加一個美觀和高度可定制化的抽屜框，上述的CSS代碼將是你一個極好的起始點。