CSS是前端開發中重要的技術之一。除了可以控制頁面的樣式和布局外，它還可以實現許多非常實用的功能。其中之一就是通過CSS設置可滾動的內容區域。

在HTML中，如果需要放置大段的文本內容，不能夠直接使用標準的文本框，否則會導致頁面長度過長、布局混亂等問題。這時就可以使用可滾動的內容區域來解決這個問題。

/* 設置滾動條樣式 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: #f5f5f5;
}
/* 設置滾動條軌道樣式 */
::-webkit-scrollbar-track {
border-radius: 5px;
box-shadow: inset 0 0 5px #f5f5f5;
background-color: #f5f5f5;
}
/* 設置滾動條滑塊樣式 */
::-webkit-scrollbar-thumb {
border-radius: 5px;    
box-shadow: inset 0 0 5px rgba(0,0,0,.2);
background-color: #ccc;
}
/* 設置頁面內容區域樣式 */
.content{
overflow-y: scroll;  /* 豎向滾動條*/
height: 300px;  /* 內容區域高度*/
width: 100%; /* 寬度100% */
padding: 10px; 
background-color: #f5f5f5; 
}

上述代碼中，通過設置::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb三個偽元素來控制滾動條的樣式。 接著，通過設置.content類的樣式，將內容區域設置為可滾動的，并設置了其高度和寬度，以及背景色等樣式。

以上就是CSS設置可滾動內容區域的例子，通過這種方法可以讓我們更好地展示大段的文本內容，并且保持頁面布局的整潔美觀。