CSS點九圖是一種常用的CSS樣式處理方式，通過將背景圖像分為九個部分，可以在不改變背景圖像比例的情況下改變之的大小。以下是使用CSS畫點九圖的步驟：

/*設置背景圖像*/
.background-image {
background-image: url('background.png');
}
/*定義九宮格*/
.nine-slice {
/*定義左上角*/
background: url('background.png') 0 0;
background-repeat: no-repeat;
/*定義上邊*/
background-position: 0 -15px;
background-repeat: repeat-x;
/*定義右上角*/
background-position: 100% 0;
background-repeat: no-repeat;
/*定義左邊*/
background-position: 0 -45px;
background-repeat: repeat-y;
/*定義中間*/
background-position: center center;
background-repeat: repeat;
/*定義右邊*/
background-position: 100% -45px;
background-repeat: repeat-y;
/*定義左下角*/
background-position: 0 100%;
background-repeat: no-repeat;
/*定義下邊*/
background-position: 0 100%;
background-repeat: repeat-x;
/*定義右下角*/
background-position: 100% 100%;
background-repeat: no-repeat;
}

以上是定義九宮格的CSS樣式代碼。在HTML文件中，可以通過定義一個固定寬度和高度的div元素并設置其class屬性為“nine-slice”來使用這個背景圖像和九宮格樣式。例如：

<div class="background-image">
<div class="nine-slice">
<p>This is some example content</p>
</div>
</div>

這將在一個有背景圖像的div元素內顯示帶有九宮格效果的內容塊。自定義寬度和高度的div元素可以根據需要調整九宮格的大小，而不會影響背景圖像的比例。