CSS是前端開發中最常用的技術，結合HTML可以實現網頁的各種效果和布局。其中一個常用的技巧就是利用CSS來設置上邊框為圖片。

在CSS中，我們可以通過border-top屬性來設置上邊框的樣式，例如：

div {
border-top: 1px solid black;
}

這段代碼會使得一個div元素的上邊框變成一條1像素寬的黑色實線。

不過，如果我們希望上邊框變成一個圖片，該怎么辦呢？其實很簡單，只需要將border-top改為border-image即可。

div {
border-image: url("border.png") 0 0 10px 0 stretch;
}

這段代碼中，我們設置了一個名為border.png的圖片作為邊框，位置是從上開始，不需要再設置邊框寬度，但是要設置邊框的拉伸方式，這里使用stretch拉伸。

需要注意的是，使用圖片作為邊框會影響到盒模型的大小計算，因此我們需要通過box-sizing屬性來設置盒模型的模式：

div {
box-sizing: border-box;
}

這樣將會使得border和padding的寬度也計算在內，不會影響元素的尺寸。

總之，使用CSS來設置上邊框為圖片，只需使用border-image屬性，并設置一個合適的拉伸方式即可。是不是非常簡單呢？