背景图片九宫格(可缩放样式)
border-width: 5px;
border-image: url(./run/images/news/group_normal.png) 5 5 5 5 stretch stretch;
border-width必须要加上,用border-image来自动根据大小扩展,而不用background-image
在默认情况下,通过background-image指定的背景图片会自动重复平铺,以覆盖部件的整个填充矩形(即边框里面的那个区域)。如果我们想创建能够随着部件大小自动缩放而不是平铺的背景,我们需要设置一种称之为“边框图片”的东东。
“边框图片”可以通过border-image属性指定,它同时提供了部件的背景和边框。一个“边框图片”被分为九个部分(九宫格),有点向tic-tac-toe游戏的棋盘。
当一个部件的边框被填充时,四角的格子通常不会发生变化,而其余的五个格子则可能被拉伸或平铺以填充可用空间。
当指定一个“边框图片”时,除了图片本身,我们还必须指定用来分割九宫格的四条分割线。同时我们还必须指定非边角的格子是应该平铺还是拉伸,以及边框的宽度(用来确定边角格子的大小,防止边角被缩放变形)。
例如,下面的样式表定义了上图中的button:
QPushButton {
border-width: 4px;
border-image: url(button.png) 4 4 4 4 stretch stretch;
}