QSS-qt样式表-2020-09-26

QSS-qt样式表

每条QSS样式都由两部分组成：1. 选择器，该部分指定要美化的控件  2. 声明，该部分指定要在控件上使用的属性

声明：

渐变色：

 

线性渐变：
qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 white, stop: 0.4 gray, stop:1 yellow)

 

x1:0, y1:0, x2:1, y2:0   决定方向

stop: 0.4 gray    定义位置的颜色   把整条线分层10分，0.4的位置是gray颜色

辐射渐变：

qradialgradient(cx:0.7, cy:0.7, radius:0.5, fx:0.5, fy:0.5, stop:0 red,  stop:1 blue)  

cx:0.7, cy:0.7  是圆心位置

radius:0.5   是半径

 fx:0.5, fy:0.5  光源位置

stop:0 red     位置的颜色

角度渐变：

qconicalgradient(cx:0.5, cy:0.5, angle:90, stop:0 red, stop:1 blue)   

cx:0.5, cy:0.5     圆心位置

angle:90     起始角度

stop:0 red    位置颜色

 

 

边框圆角 ：

 四个边框统一设置：---四个角相同

border-radius:20px         圆角半径  单位 像素

四个边框分别设置：

 border-top-left-radius:20px

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

 

边框图片：

border-image:url(./边框图片.png) 30 30 30 30 stretch;border-width:30

 

四个角不会变 

30 30 30 30   裁剪值    上右下左

中间块的处理方式：stretch  拉伸     round  平铺      repeat 重复

border-width:30    边框宽度----必须有

 

 

外边距： 

统一设置   margin  上 右 下 左

分开设置：margin-top       margin-right        margin-bottom        margin-left  

常用取值    16px   1em

resize调整的是包含外边距的尺寸 

 

内边距：

统一设置   padding  上 右 下 左

分开设置    padding-top      padding-right      padding-bottom       padding-left

常用取值   16px    1em

 

 

背景：

background-color:yellow       背景颜色

background-color:rgb(255,0,0)  

background-color:#FF0000

常用颜色 https://blog.csdn.net/zy_heu/article/details/78952173

 

background-image:url(./大象.png);background-repeat:no-repeat       背景图片

背景图片的处理方式：background-repeat:no-repeat     不重复  

background-repeat:repeat-x     x方向重复

background-repeat:repeat-xy     xy方向重复

background-position:right top     图片位置

top    left     right     bottom  

 background-origin:content      参照位置---图片贴着谁

padding   默认

content

border

margin

 background-clip:padding     背景裁剪---在指定范围外的都裁剪掉

padding   默认

content   

border

background-attachment ：scroll       背景图像是否跟随滚动

scroll       跟随滚动

fixed       不跟随滚动

 

字体： 

分开设置：

font-family:隶书         设置字体

font-size:32px           字体大小   单位 16px=1em

font-style:italic     字体样式：

normal    默认值.显示一个标准的字体样式

italic   显示一个斜体的字体样式

oblique   显示一个倾斜的字体样式

font-weight:normal       字体重量

normal      默认值。定义标准的字符

bold         定义粗体字符

bolder     定义更粗的字符

lighter     定义更细的字符

100

200

300

400

500

600

700

800

900

400 等同于 normal，而 700 等同于 bold

color:red      前景色

 

最小最大尺寸：

min-width
min-height
max-width
max-height

复合控件的子控件：

QSpinBox::up-button{Subcontrol-Position:left top}

选择器   QSpinBox::up-button    子控件向上按钮

Subcontrol-Position:left top     子控件位置

 

Subcontrol-Origin:border     子控件相对父控件的参照位置

bottom:10px     移动10像素

bottom    向底部移动

top

left

right

position: relative;      相对位置移动

position: absolute;    绝对位置移动