【Qt】Qt样式表总结(四):CSS盒子模型

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010168781/article/details/82415337

官网:http://doc.qt.io/qt-5/stylesheet-customizing.html#box-model
【Qt】Qt样式表总结(一):选择器
【Qt】Qt样式表总结(二):冲突和命名空间
【Qt】Qt样式表总结(三):QObject 属性

盒子模型

先来张图片,引自Qt官网
这里写图片描述

使用样式表时, 每个小部件都被视为具有四个同心矩形的框: 边距矩形、边框矩形、填充矩形和内容矩形。
在样式表CSS中,每个控件都可以看成是由四个同心的矩形框组成。
从外到内依次为:margin边缘、border边框、padding填充、content内容;
默认情况下,margin边缘、border边框、padding填充的值为零,即这四个框刚好重合。

margin

margin边缘指边框到其他控件的一片留白,可以设置边缘宽度(margin),也可以单独设置每个边缘的宽度(margin-top、margin-right、margin-bottom、 margin-left)

border

border,边框属性比较多,详细的内容参见官网,这里只淡淡常见的属性设置。
边框的宽度、样式和颜色border,如QLineEdit { border: 1px solid white };
同样可以分别各个的样式,border-top、border-right、border-bottom、border-left;
单独设置边框颜色:border-color ,border-top-color、border-right-color、border-bottom-color、border-left-color;
设置边框角的半径:border-radius,border-top-left-radius等

padding

padding是指在内容和边框中间填充的留白,padding的属性只有宽度,使用padding,或单独设置每个填充的边宽padding-top, padding-right, padding-bottom, and padding-left

注意事项

设置背景图像时,是使用background-image还是border-image

background-image的缺点是不能缩放图像,可以剪切(background-clip)和重复( background-repeat )图片内容,这一般不是我们想要的效果。大多数情况下是想实现背景图缩放成控件大小,可以使用border-image。如果在两者同时使用的情况下,border-image将会覆盖在background-image上

image属性

image绘制的图像在border-image之上,一般情况下也不能缩放。手册中说,在iamge中指定 SVG属相,可以达到随控件缩放的效果。
使用方法是制作SVG格式的QIcon,然后加载:image:url(:/images/icon.svg)。
这个没有亲自测试,有用过的大神指点下

猜你喜欢

转载自blog.csdn.net/u010168781/article/details/82415337
今日推荐