CSS中提供了一種方便的方式來制作帶有滾動(dòng)條的文本框。這種文本框可以在容器的邊界內(nèi)顯示文本，而不會(huì)將其內(nèi)容溢出到頁面的其他區(qū)域。

要?jiǎng)?chuàng)建這樣的文本框，我們可以使用CSS的overflow屬性。overflow屬性控制元素的內(nèi)容溢出容器時(shí)發(fā)生的事情。默認(rèn)情況下，當(dāng)容器中的內(nèi)容溢出時(shí)，瀏覽器會(huì)自動(dòng)添加滾動(dòng)條。我們可以改變滾動(dòng)條的樣式和位置，以匹配我們網(wǎng)站的主題。

/* 創(chuàng)建一個(gè)帶有滾動(dòng)條的文本框 */
.textarea {
width: 300px;
height: 150px;
overflow: auto;
}
/* 自定義滾動(dòng)條的樣式 */
.textarea::-webkit-scrollbar {
width: 6px;
}
.textarea::-webkit-scrollbar-thumb {
background-color: #eaeaea;
}
.textarea::-webkit-scrollbar-track {
background-color: #f1f1f1;
}

在上面的代碼中，我們?cè)谝粋€(gè)class為“textarea”的元素上設(shè)置了width和height屬性。然后我們將overflow屬性設(shè)置為auto。這告訴瀏覽器在需要時(shí)添加滾動(dòng)條到元素。

接下來，我們使用CSS的偽元素::-webkit-scrollbar來自定義滾動(dòng)條。在偽元素中，我們可以控件滾動(dòng)條的外觀、顏色和大小等屬性。在上面的代碼中，我們將滾動(dòng)條的寬度設(shè)置為6個(gè)像素，將滾動(dòng)條拖動(dòng)塊的背景顏色設(shè)置為淺灰色，將滾動(dòng)條背景顏色設(shè)置為白色。這些設(shè)置可以根據(jù)我們網(wǎng)站的設(shè)計(jì)進(jìn)行修改。

最后，我們的帶滾動(dòng)條的文本框就完成了！我們可以將任何文本插入到文本框中，然后在水平和垂直方向上滾動(dòng)文本以查看其他內(nèi)容。