qt QSS border-image

例如由美工提供左邊的按鈕背景圖，我們需要實現右邊的效果，並且背景隨着按鈕的大小自動變化：

圓角按鈕背景
圓角按鈕效果

前面我們學習過的和修改背景相關的知識有 background-image，如果背景圖和按鈕一樣大時使用 background-image 沒有任何問題，但是當按鈕和背景圖不一樣大時，背景圖要么顯示不全，要么重復平鋪到按鈕上，顯然滿足不了這里的需求。不過 QSS 也支持 border-image，使用 border-image 就能很快的做出上面的效果：

.QPushButton {
	border-width: 12px 12px 12px 12px;
	border-image: url(:/img/round-button.png) 12 12 12 12 repeat stretch;

	min-height: 24px; /* 避免按鈕太小 */
	padding: -10px 0 -10px 0; /* 調整文字與邊界的距離 */
}

border-width 后面的四個數字按順序分別為:

1. border-top 的高 12px
2. border-right 的寬 12px
3. border-bottom 的高 12px
4. border-left 的寬 12px

border-image 后面的參數按順序分別為:

1. 背景圖的路徑，可以是絕對路徑，相對路徑，資源文件里的路徑
2. 四個數字按順序分別為
   1. 背景圖中 最上面的 12px 高的圖像 填充到 Widget 的 border-top
   2. 背景圖中 最右邊的 12px 寬的圖像 填充到 Widget 的 border-right
   3. 背景圖中 最下邊的 12px 高的圖像 填充到 Widget 的 border-bottom
   4. 背景圖中 最左邊的 12px 寬的圖像 填充到 Widget 的 border-left
3. 數字后面的第一個參數 repeat|round|stretch 指定 水平方向的縮放或者平鋪
4. 數字后面的第二個參數 repeat|round|stretch 指定 垂直方向的縮放或者平鋪

注意：
border-width 后的數字有單位
border-image 后的數字沒有單位
min-height 和 padding 不是必須的，這里用來細微的調節按鈕的效果

Border-Image 從名字上看，像是用來圖片來設置 border 的，其實是用圖片來設置整個 widget 的背景的，我曾經就被這個名字迷惑過

Border-Image 原理

下圖是理解 Border-Image 的核心，又稱為九宮格，看懂這個圖，也就能理解 Border-Image 了:

背景圖
Widget

http://qtdebug.com/qtbook-qss-border-image/