CSS3的pre屬性是一個非常強大的工具，它可以讓我們對文本進行自定義格式化和自定義排版。pre屬性可以讓我們使用HTML和CSS來創建自定義排版，而不需要使用任何圖像或其他外部資源。這讓我們能夠輕松地控制文本的外觀和樣式。

/* 樣式代碼 */
pre {
white-space: pre;
font-family: "Courier New", Courier, monospace;
font-size: 14px;
line-height: 1.5;
background-color: #e9e9e9;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}

在上面的代碼中，我們可以看到pre元素的CSS樣式。這些樣式控制了pre元素和其中的文本的外觀和樣式。我們可以看到，我們定義了一個特殊的字體樣式和一個定義好的背景色。我們還通過padding和border-radius屬性來定義了整個元素的外觀。

/* HTML代碼 */
function calculate() {
var number1 = parseInt(document.getElementById("number1").value);
var number2 = parseInt(document.getElementById("number2").value);
var result = number1 + number2;
document.getElementById("result").innerHTML = result;
}
在上面的代碼中，我們可以看到我們使用pre元素來包含一段JavaScript代碼。我們可以看到，這個pre元素的樣式定義了代碼區域的外觀。我們可以看到代碼被渲染為一個帶有灰色背景的框框，這讓代碼更加容易閱讀。
總的來說，CSS3的pre屬性是一個非常有用的工具，它可以讓我們輕松地控制文本的外觀和樣式。我們可以使用它來創建自定義排版和格式化部分文本，從而增強用戶體驗和HTML頁面的可讀性。