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