QT backgound-image 與 bord-image

QT 的樣式叫QSS

HTML中稱為CSS樣式。

backgound-image 在CSS 樣式中的解釋為：

background-image 屬性為元素設定背景圖像。

元素的背景占據了元素的全部尺寸，包括内邊距和邊框，但不包括外邊距。

預設地，背景圖像位于元素的左上角，并在水準和垂直方向上重複。

border-image 在CSS樣式中解釋為：

border-image 屬性是一個簡寫屬性，用于設定以下屬性：

• border-image-source //用在邊框的圖檔的路徑。
• border-image-slice  //圖檔邊框向内偏移。
• border-image-width //圖檔邊框的寬度。
• border-image-outset  //邊框圖像區域超出邊框的量。
• border-image-repeat //圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。

如果省略值，會設定其預設值。

提示：請使用 border-image-* 屬性來構造漂亮的可伸縮按鈕！

在QSS中，并沒有像CSS那樣是的參數。而是五個參數。

border-image:url(":/images/cancel_normal.png") 5 5 5 5;

第一個表示圖檔路徑，剩下四個為：

它們分别代表一張圖的 上 右 下 左， 即為      
    
上： 離頂端的距離  下： 離底部的距離      
    
左： 離左邊框的距離  右：離右邊框的距離      
        
  
          
    
#testButton {

	background-image:url(":/images/cancel_normal.png");

}

#testButton2 {

	border-image:url(":/images/cancel_normal.png");

}

#testButton3 {

	border-image:url(":/images/cancel_normal.png") 1 2 3 5;

}

#testButton4 {

	background-image:url(":/images/cancel_normal.png");

}
上面從上到下四個toolButton分别為 testButton testButton2 testButton3 testButton4 下面為它們各自的QSS樣式。      
    
1和2比較可以看出， background-image 右下存在外邊框，而border是沒有的。 去掉的解決辦法有兩個。1是：選擇autoRaise 為ture ,2是      
    
border:0px;      
    
從3 4兩張圖可以看出： border-image:圖檔是拉伸的。而background-image預設是直接鋪滿的。      
        
當然，border-iamge的功能還很強大，可以根距邊距進行切割，在我的另一篇部落格      
    
http://blog.csdn.net/li235456789/article/details/50435613 有講過