一、背景颜色
(1)有颜色:
background-color:rgb(255,255,255);
background-color:rgbs(255,255,255,30); //最后一个参数是透明度 0~255
background-color:yellow //常用颜色名(17种标准色与130种其他颜色)
background-color:#FF0000
17 种标准色
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, orange, purple, red, silver, teal, white, yellow
(2)透明色:background:transparent;
(3)背景为图片:image:url(:/Sys/calibration.png);
二、控件尺寸
width:12px; //设置宽度 单位像素
height:40px //设置高度
min-width:65px; //最小宽度 有些时候设置width无效可以尝试设置min-width
min-height:12px; //最小高度
max-width:12px; //最大宽度
max-height:12px; //最大高度
三、文本颜色
colo:rgb(255,255,255); //前景色 文本颜色
color: #F5F5F5; //前景(文本)颜色
color: qlineargradient(); //前景(文本)颜色:线性渐变
color: qradialgradient(); //前景(文本)颜色:辐射渐变
color: qconicalgradient(); //前景(文本)颜色:梯形渐变
四、文本字体
font-size:20px //字体大小
font-family:黑体 //字体选择
微软雅黑: Microsoft YaHei 宋体:SimSun 黑体:SimHei 仿宋: FangSong
楷体: KaiTi 隶书:LiSu 幼圆:YouYuan 华文细黑:STXihei
华文楷体:STKaiti 华文宋体:STSong 华文中宋:STZhongsong 华文仿宋:STFangsong
方正舒体:FZShuTi 方正姚体:FZYaoti 华文彩云:STCaiyun 华文琥珀:STHupo
华文隶书:STLiti 华文行楷:STXingkai 华文新魏:STXinwei
五、边距
(1)外边距
margin: 14px 18px 20px 18px; //外边距 顺序上右下左
margin-top: 14px;
margin-right: 18px;
margin-bottom: 20px;
margin-left: 18px;
(2)内边距
padding: 4px; //内边距 顺序上右下左 只写一个参数代表相等
padding-left: 5px; /* 文字左边距 */
padding-right: 10px; /* 文字右边距 */
padding-top: 3px; /* 文字顶边距 */
padding-bottom: 3px; /* 文字底边距 */
六、边框
扫描二维码关注公众号,回复:
16102061 查看本文章
(1)样式
border:3px solid red
//边框---可以分开设置 solid 实线 dotted 点状边框 none无边框 dashed 虚线
border---四条边相同样式
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
(2)宽度
border-width 上 右 下 左 ----- 边框宽度 //3px 边框像素---宽度-单位:像素,也可以em,1em=16px
border-top-width
border-right-width
border-bottom-width
border-left-width
(3)圆弧边框
border: 1px solid #FDBC03; /* 边框:宽度 颜色*/
border-image:url(boder.png) 4 8 12 16; /* 边界图 切线 */
border-radius: 4px; /*边框圆角半径 */
border-top-left-radius: ; /* 角弧度:左上角*/
border-top-right-radius: ; /* 角弧度:右上角*/
border-bottom-left-radius: ; /* 角弧度:左下角*/
border-bottom-right-radius: ; /* 角弧度:右下角*/
(4)变宽颜色
border-color: //边框颜色 上 右 下 左
border-top-color
border-right-color
border-bottom-color
border-left-color
七、伪状态列表
/*伪状态列表*/
:checked //button部件被选中
:unchecked //button部件未被选中
:disabled //部件被禁用
:enabled //部件被启用
:focus //部件获得焦点
:hover //鼠标位于部件上
:indeterminate //checkbox或radiobutton被部分选中
:off //部件可以切换,且处于off状态
:on //部件可以切换,且处于on状态
:pressed //部件被鼠标按下
八、 子部件列表
::down-arrow //combo box或spin box的下拉箭头
::down-button //spin box的向下按钮
::drop-down //combo box的下拉箭头
::indicator //checkbox、radio button或可选择group box的指示器
::item //menu、menu bar或status bar的子项目
::menu-indicator //push button的菜单指示器
::title //group box的标题
::up-arrow //spin box的向上箭头
::up-button //spin box的向上按钮
例如:
//按钮基本样式
QPushButton{border-image:url(:/Remote/btn_Under-the_n.png);}
//按钮按下样式
QPushButton:pressed{border-image:url(:/Remote/btn_Under-the_c.png);}
ComBox->setStyleSheet("QComboBox{"
"border-image:url(:/Sys/output-box.png);"
"font:黑体;"
"font-size:20px;"
"color:rgb(255,255,255);"
"background-color:transparent;"
"width:209px;"
"height:45px;"
"}"
//下拉箭头区域样式
"QComboBox::drop-down{"
"background-color:transparent;"
"width:36px;"
"top:10px;"
"height:22px;"
"right:4px;"
"}"
//下拉箭头样式
"QComboBox::down-arrow {"
"image:url(:/Sys/btn_pulldown.png);"
"}"
"QComboBox QAbstractItemView {"
"border-image:url(:/Sys/A-drop-down-box.png);"
"color:rgb(255,255,255);"
"height:43px;"
"outline:0px;" //去掉虚线
"}"
//下拉选项
"QComboBox::item{"
"height:50px;"
"width:200px;"
"}"
//鼠标移动到下拉选项
"QComboBox::item:hover{"
"color:rgb(0,190,255);"
"}"
//滚动条轨道
"QScrollBar::vertical{"
"border-radius:5px;"
"width: 10px;"
"background:none;"
"}"
//滑块主体
"QScrollBar::handle::vertical{"
"border-radius:5px;"
"width:10px;"
"background:rgb(68,88,137);"
"}"
//鼠标移动到滑块
"QScrollBar::handle::vertical::hover{"
"background:rgb(0,190,255);"
"}"
//上箭头
"QScrollBar::add-line::vertical{"
"border:none;"
"}"
//下箭头
"QScrollBar::sub-line::vertical{"
"border:none;"
"}"
);