一杯清酒邀明月
天下本无事,庸人扰之而烦耳。
 1 QPushButton {  
 2     /* 前景色 */  
 3     color:red;  
 4 
 5     /* 背景色 */  
 6     background-color:rgb(30,75,10);  
 7 
 8     /* 边框风格 */  
 9     border-style:outset;  
10 
11     /* 边框宽度 */  
12     border-width:2px;  
13 
14     /* 边框颜色 */  
15     border-color:rgb(10,45,110);  
16 
17     /* 边框倒角 */  
18     border-radius:10px;  
19 
20     /* 字体 */  
21     font:bold 14px;  
22 
23     /* 控件最小宽度 */  
24     min-width:100px;  
25 
26     /* 控件最小高度 */  
27     min-height:20px;  
28 
29     /* 内边距 */  
30     padding:4px;  
31 }  
32 
33 /* 鼠标按下时的效果 */  
34 QPushButton#pushButton:pressed {  
35     /* 改变背景色 */  
36     background-color:rgb(40,85,20);  
37 
38     /* 改变边框风格 */  
39     border-style:inset;  
40 
41     /* 使文字有一点移动 */  
42     padding-left:6px;  
43     padding-top:6px;  
44 }  
45 
46 /* 按钮样式 */  
47 QPushButton:flat {  
48     border:2px solid red;  
49 }  
50 
51 /* 当按钮打开菜单时:ui->pushButton->setMenu(btnMenu) */  
52 QPushButton:open{  
53     background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #dadbde, stop: 1 #f6f7fa);  
54 }  
55 
56 /* 子选择器:菜单 */  
57 QPushButton::menu-indicator {  
58     image:url(:/images/close.png);  
59 
60     /* 去掉小三角号   
61     image:none;*/  
62 
63     /* 绘制subcontrol 的参考矩形的位置 */  
64     subcontrol-origin:padding;  
65 
66     /* 小三角的位置 */  
67     subcontrol-position:bottom right;  
68 }  
69 
70 QPushButton::menu-indicator:pressed,QPushButton::menu-indicator:open {  
71     position:relative;  
72     top:4px;  
73     left:4px;  
74 } 

前景色 color:rgb(255, 0, 0)

1 QPushButton *btn = new QPushButton("我叫按钮");
2 btn->setStyleSheet( QString("QPushButton{color:rgb(255, 0, 0)}      \
3                             QPushButton:hover{color:rgb(0, 255, 0)} \
4                             QPushButton:pressed{color:rgb(0, 0, 255)}") );
5 btn->show();

效果如下:
按钮上的字初始颜色是红色
这里写图片描述

鼠标移到按钮上后,按钮按钮上字的颜色变成绿色
这里写图片描述

鼠标点击后,按钮按钮上字的颜色变成蓝色
这里写图片描述

背景色 background-color:rgb(255, 0, 0)

1 QPushButton *btn = new QPushButton("我叫按钮");
2 btn->setStyleSheet( QString("QPushButton{background-color:rgb(255, 0, 0)}       \
3                             QPushButton:hover{background-color:rgb(0, 255, 0)}  \
4                             QPushButton:pressed{background-color:rgb(0, 0, 255)}") );
5 btn->show();

效果如下:
按钮初始背景色是红色

这里写图片描述

鼠标移到按钮上后,按钮背景色变成绿色
这里写图片描述

鼠标点击后,按钮背景色变成蓝色
这里写图片描述

边框风格 border:2px solid red

调整边框风格时,border-width >= 1。否则不管怎么调整,都看不出效果

border-style属性值含义
none 定义无边框。
hidden 与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
1 QPushButton *btn = new QPushButton("我叫按钮");
2 btn->setStyleSheet( QString("QPushButton{border:2px solid #ff0000}       \
3                             QPushButton:hover{border:5px dotted #00ff00} \
4                             QPushButton:pressed{border:10px groove #0000ff}") );
5 btn->show();

效果如下:
按钮初始为普通红色边框
这里写图片描述

鼠标移到按钮上后,按钮边框变成绿色点状边框
这里写图片描述

鼠标点击按钮后,按钮边框变成蓝色3D 凹槽边框
这里写图片描述

边框倒角 border-radius:2px

1 QPushButton *btn = new QPushButton("我叫按钮");
2 btn->setStyleSheet( QString("QPushButton{   border:2px solid red;               \
3                                             border-top-left-radius:4px;         \
4                                             border-top-right-radius:8px;        \
5                                             border-bottom-left-radius:16px;     \
6                                             border-bottom-right-radius:32px }   \
7                             QPushButton:hover{border:5px dotted #00ff00}        \
8                             QPushButton:pressed{border:10px groove #0000ff}") );
9 btn->show();

效果如下:
这里写图片描述

 

posted on 2020-08-31 10:51  一杯清酒邀明月  阅读(3668)  评论(0编辑  收藏  举报