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 有讲过