預覽框是在網頁開發中經常使用的一個功能，用于展示某些內容的效果。在制作預覽框時，CSS 是非常重要的一環，下面就來介紹一下如何制作 CSS 中的預覽框。

首先，在 HTML 中使用 pre 標簽創建一個預覽框，pre 標簽的作用是定義預格式化文本，它會保留源代碼中的所有空格、換行等格式，并將它們展示出來，代碼如下：

<pre id="previewBox">
這里是預覽內容！
</pre>

接下來，設置預覽框的 CSS 樣式。首先，設置預覽框的寬度和高度，代碼如下：

#previewBox {
width: 400px;
height: 300px;
}

然后，設置預覽框的邊框和邊框樣式，可以選擇不同的樣式來讓預覽框更具美感，代碼如下：

#previewBox {
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}

最后，設置預覽框內部的滾動條樣式，可以更好地控制預覽框中展示的內容，代碼如下：

#previewBox {
overflow: auto;
scrollbar-width: thin;
scrollbar-color: #ccc #f5f5f5;
}

上述代碼中，overflow 屬性控制溢出內容的處理方式，scrollbar-width 和 scrollbar-color 屬性控制滾動條的寬度和顏色。

以上就是制作 CSS 預覽框的全部步驟，通過設置不同的樣式，可以實現多種預覽框的效果，讓網頁更加美觀。