Qt Style Sheets 之 border-image

Qt Style Sheets 之 border-image

每次根据Qt文档说明使用border-image美化界面时，经常因为忘了设置border属性导至有边框的背景图片产生伸缩的细节问题。每次都花费一定的时间来反复尝试来解决细节问题。记录这篇文章来避免因忘记处理设置而反复尝试花费不必要的时间。

在复用同一张带有边框的背景图美化不同大小的控件时（如，QPushButton)，背景图边框被伸缩而产生不友好的细节问题。如下图“未指定边框宽度的效果“：

复用同一张带有边框的背景图遇到上图“未指定边框宽度的效果”的情况时，可以使用border-image和border样式属性来解决问题，使背景效果达到上图中“指定边框宽度的效果”的样式。

类型	语法	说明
border－Image	none｜Url Number{4} (stretch｜repeat){0,2}	border-image 的图片分为9个部分（左上，中上，右上，左中，中心，右中，左下，中下，右下）。伸缩或重复上、右、下、左部分的边框来生成想要控制边框的拐角部分的大小。详情请查看CSS3 Draft Specificaion
border	{Border Style｜Length｜Brush}*	设置窗体边框的速写型式，等价于border-color,border-style和border-width.虽然文档中语法格式顺序是{Border Style｜Length｜Brush}*，但实际语法顺序是border:[Length] [Border Style] [Brush],例：border:1px solid red
border-top	(同border)	(同border)
border-right	(同border)	(同border)
border-bottom	(同border)	(同border)
border-left	(同border)	(同border)

当我们想要复用装饰小于或大于原尺寸的控件时，保持上面事例按钮图的左、上、右1px的边框线和底部较宽4px的边框效果。可以使用 语法 中的Number属性来保持左、上、右、底4个部分的边框宽度不被伸缩。使用样式语句如下正确解决问题( 注意:Number属性的4个值必须写足，且设置Number属性时，必须设置Border样式的Length属性来匹配Number的值。)：

QPushButton{
    border-image:url(:/button.png) 1 1 4 1;
    border-top: 1px transparent;
    border-bottom: 4px transparent;
    border-right: 1px transparent;
    border-left: 1px transparent;
}

如果按钮图片的边框只有1px像素，那么仅需使唤用如下的样式语句来装饰

QPushButton{
    border-image:url(:/button.png) 1 1 1 1;
    border: 1px transparent;
}