什么是border image?
A border image is an image that is composed of nine parts (top left, top center, top right, center left, center, center right, bottom left, bottom center, and bottom right). When a border of a certain size is required, the corner parts are used as is, and the top, right, bottom, and left parts are stretched or repeated to produce a border with the desired size.
See the CSS3 Draft Specification for details.
所谓border image是这样一种图片,它由九宫格分成的九个部分组成,当“边”设置了某个长度,角落的四个部分不发生变化,上下左右四个部分则发生一定的拉伸或者重复。
感觉翻译有点问题,看实际效果可能才能更好理解。
参数如下:
下面使用QLabel设置背景来说明,最常用的用法如下,将图片填满控件:
QLabel{
border-image:url(:/images/Resource/nine.png) 0 0 0 0 stretch strctch
}
此时拉伸Label会使背景图片跟着拉伸
四个数字相当于上、右、下、左“边”的宽度
四个数字如果是25 30 10 20则对应含义如下:
实际效果比较奇怪,类似于图片某个方向拉伸,如:
QLabel{
border-image:url(:/images/Resource/nine.png) 50 0 0 0
}
不写后面两个参数默认都是stretch。
最后两个参数对应横向和纵向的策略,如:
QLabel{
border-image:url(:/images/Resource/nine.png) 0 0 0 0 stretch repeat
}
横向拉伸纵向重复。
参考:
1.https://doc.qt.io/archives/qt-4.8/stylesheet-reference.html#border-image