在前端開 發中，我們常常需要使用富文本框。富文本框常常用來打造一些比較復雜的頁面，又能讓用戶像在Word一樣編輯文本。

CSS富文本框是指在文本框中加入一些CSS樣式，比如設置字體、字號、顏色等，從而使用戶能更加靈活地編輯文本，讓頁面更美觀。

下面我們來看一下如何實現一個CSS富文本框。

// HTML 代碼
<div id="editor" contenteditable="true"></div>
// CSS 代碼
#editor {
border: 1px solid #ccc;
font-size: 16px;
padding: 10px;
}

以上代碼中，我們創建了一個id為editor的DIV元素，并將其設置為可編輯。在CSS樣式中，我們設置了邊框、字體大小和內邊距，使其更加美觀。

下面我們再看一下如何添加一些常用的富文本編輯功能。

// HTML代碼
<div id="editor" contenteditable="true"></div>
<button onclick="Bold()">加粗</button>
<button onclick="Italic()">斜體</button>
<button onclick="Underline()">下劃線</button>
// CSS代碼
#editor {
border: 1px solid #ccc;
font-size: 16px;
padding: 10px;
}
// JavaScript代碼
function Bold() {
document.execCommand('bold', false, null);
}
function Italic() {
document.execCommand('italic', false, null);
}
function Underline() {
document.execCommand('underline', false, null);
}

在以上代碼中，我們添加了加粗、斜體和下劃線三個富文本編輯功能，并設置了相應的按鈕。在JavaScript代碼中，我們使用document.execCommand函數來執行各種編輯命令。

CSS富文本框是一個非常實用的工具，通過它我們可以方便地創建出獨具特色的頁面。希望這篇文章對你有所幫助！