CSS中有一種可以實現九宮格拉伸圖片的方法，也稱為“九宮格縮放”或“九宮格拉伸”。它可以讓圖片在不失真的情況下被隨意拉伸，特別適用于實現圓角、邊框等效果。

/* 將圖片作為背景 */
div{
background-image: url("example.jpg");
/* 設置背景區域的寬度和高度 */
width: 280px;
height: 200px;
/* 定義背景區域被分割的九個部分 */
-webkit-border-image: url("border.png") 30 30 30 30 stretch;
-moz-border-image: url("border.png") 30 30 30 30 stretch;
-o-border-image: url("border.png") 30 30 30 30 stretch;
border-image: url("border.png") 30 30 30 30 stretch;
}

上面的代碼中，我們需要準備一張用于定義九個部分的圖片，可以命名為“border.png”，其中需要分別定義圖片上下左右的邊距。在CSS中使用“border-image”屬性引用這張圖片，并用“stretch”選項來指定哪些部分需要拉伸，比如上下邊框需要拉伸，而左右邊框不需要拉伸。

在Webkit瀏覽器、Firefox、Opera、IE9以上的瀏覽器中，都支持“border-image”屬性。通過使用這一技術，我們可以用最少的代碼實現圓角、邊框等復雜效果，提升網頁的美觀性和交互性。