QT backgound-image 与 bord-image

QT 的样式叫QSSHTML中称为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 有讲过