QSS 实例

背景图片九宫格
border-width: 5px;
border-image: url(./run/images/news/group_normal.png) 5 5 5 5 stretch stretch;

border-width必须要加上，用border-image来自动根据大小扩展，而不用background-image

字体颜色
color: white;

按钮3种状态：正常，鼠标置上，按下
QPushButton
QPushButton:hover
QPushButton:checked
对于checked，要把QPushButton设置为可checkable。(setCheckable(true))



实例：http://blog.csdn.net/xuhongtao123459/archive/2010/09/10/5875614.aspx

01.*{
02.  font-size:13px;
03.  color:white;
04.  font-family:"宋体";
05.}
06.CallWidget QLineEdit#telEdt
07.{
08.  font-size:24px;
09.}
10.QMainWindow,QDialog{
11.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
12.                                 stop: 0 #1B2534, stop: 0.4 #010101,
13.                                 stop: 0.5 #000101, stop: 1.0 #1F2B3C);
14.}
15.QWidget{
16.    background:#121922;
17.}
18.QLabel{
19.   background:transparent;
20.}
21.DailForm QLineEdit#phoneLineEdt{
22.  font-size:36px;
23.  font-weight: bold;
24.}
25.QPushButton,QToolButton{
26.    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
27.                                 stop: 0 #5B5F5F, stop: 0.5 #0C2436,
28.                                 stop: 1.0 #27405A);
29.    border-style: outset;
30.    border-width: 1px;
31.    border-radius: 5px;
32.    border-color: #11223F;
33.    padding: 1px;
34.}
35.QPushButton::hover,QToolButton::hover{
36.    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
37.                                 stop: 0 #758385, stop: 0.5 #122C39,
38.                                 stop: 1.0 #0E7788);
39.    border-color: #11505C;
40.}
41.QPushButton::pressed,QToolButton::pressed{
42.    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
43.                                 stop: 0 #969B9C, stop: 0.5 #16354B,
44.                                 stop: 1.0 #244F76);
45.    border-color: #11505C;
46.}
47.QPushButton::disabled,QToolButton::disabled{
48.    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
49.                                 stop: 0 #282B2C, stop: 0.5 #09121A,
50.                                 stop: 1.0 #111D29);
51.    border-color: #0A1320;
52.    color:#6A6864;
53.}
54.QDialog QPushButton,QDialog QToolButton{
55.  min-width:30px;
56.  min-height:23px;
57.}
58.QToolButton[objectName="minimizeToolBtn"] {
59.    background: transparent;
60.    border:none;
61.    image:url(qss/minimize.png)
62.}
63.QToolButton[objectName="minimizeToolBtn"]:hover,QToolButton[objectName="minimizeToolBtn"]:pressed {
64.    image:url(qss/minimize_hover.png)
65.}
66.QToolButton[objectName="maximizeToolBtn"] {
67.    background: transparent;
68.    border:none;
69.    image:url(qss/maximize.png)
70.}
71.QToolButton[objectName="maximizeToolBtn"]:hover,QToolButton[objectName="maximizeToolBtn"]:pressed {
72.    image:url(qss/maximize_hover.png)
73.}
74.QToolButton[objectName="closeToolBtn"],QToolButton[objectName="customCloseWindow"] {
75.    background: transparent;
76.    border:none;
77.    image:url(qss/close.png)
78.}
79.QToolButton[objectName="closeToolBtn"]:hover,QToolButton[objectName="closeToolBtn"]:pressed{
80.    image:url(qss/close_hover.png)
81.}
82.QToolButton[objectName="customCloseWindow"]:hover,QToolButton[objectName="customCloseWindow"]:pressed{
83.    image:url(qss/close_hover.png)
84.}
85.QToolButton[objectName="titleSetUpToolBtn"]{
86.    background: transparent;
87.    border:none;
88.    image:url(qss/setup.png)
89.}
90.DailForm QToolButton#oneToolBtn,QToolButton#OneToolBtn,QToolButton#twoToolBtn,QToolButton#threeToolBtn,
91.         QToolButton#fourToolBtn,QToolButton#fiveToolBtn,QToolButton#sixToolBtn,
92.         QToolButton#sevenToolBtn,QToolButton#eightToolBtn,QToolButton#nineToolBtn,
93.         QToolButton#starToolBtn,QToolButton#zeroToolBtn,QToolButton#sharpToolBtn {
94.    font-size:36px;
95.    border-radius: 10px;
96.}
97.DailForm QToolButton#delToolBtn{
98.    border-radius: 10px;
99.}
100.QFrame{
101.    border-color:#32435E;
102.    border-width:1px;
103.    border-radius: 3px;
104.}
105.QLineEdit,QTextEdit {
106.    border: 1px solid #32435E;
107.    border-radius: 3px;
108.    /* padding: 0 8px; */
109.    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
110.                                 stop: 0 #080B10,
111.                                 stop: 1.0 #212C3F);
112.    selection-background-color: #0A246A;
113.}
114.QLineEdit::hover{
115.  border-color:#5D8B9E;
116.}
117.QLineEdit[echoMode="3"] {
118.     lineedit-password-character: 9679;
119.}
120.#QLineEdit:read-only {
121.     background: #543F7C;
122.}
123.QTabWidget::pane { /* The tab widget frame */
124.     border: 0px solid #32435E;
125.     position: absolute;
126.     left: -0.1em;
127.}
128.QTabWidget#MainTabWidget::tab-bar {
129.     left: -3px; /* move to the right by 5px */
130.}
131.QTabWidget#MainTabWidget QTabBar::tab {
132.     height: 14ex;
133.     width: 14ex;
134.}
135.QTabBar::tab {
136.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
137.                                 stop: 0 #292F31, stop: 1 #0C131E);
138.}
139.QTabBar::tab:selected{
140.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
141.                                 stop: 0 #113845,  stop: 1.0 #15A8FF);
142.}
143.QTabBar::tab:hover {
144.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
145.                                 stop: 0 #113845,  stop: 1.0 #0E6F80);
146.}
147.#QTabBar::tab:selected {
148.     border-color: #32435E;
149.     border-right-color: #32435E; /* same as pane color */
150.}
151.#QTabBar::tab:!selected {
152.     margin-left: 2px; /* make non-selected tabs look smaller */
153.}
154.#QTabBar:tab:first:selected {
155.    margin-top: 0;
156.}
157.QTabBar:tab:last:selected {
158.    margin-right: 0;
159.}
160.QTabBar:tab:only-one {
161.     margin: 0;
162.}
163.QListWidget{
164.    border: 1px solid #32435E;
165.    background:#050609;
166.}
167.QListWidget::item:selected {
168.     /*border: 0px solid #33CCFF;*/
169.     border:none;
170.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
171.                                 stop: 0 #6A848C,  stop: 1.0 #0F9EAF);
172.     padding:0px;
173.     margin:0px;
174.}
175.#QListWidget::item:selected:!active {
176.     border-width: 0px ;
177.}
178.#QListWidget::item:selected:active {
179.     border-width: 1px;
180.}
181.
182.QComboBox {
183.     border: 1px solid #32435E;
184.     border-radius: 3px;
185.     padding: 1px 18px 1px 3px;
186.     min-width: 6em;
187.}
188.QComboBox::hover{
189.  border-color:#5D8B9E;
190.}
191.QComboBox:editable {
192.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
193.                                 stop: 0 #080B10,
194.                                 stop: 1.0 #212C3F);
195.}
196.QComboBox:!editable, QComboBox::drop-down:editable {
197.      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
198.                                 stop: 0 #080B10,
199.                                 stop: 1.0 #212C3F);
200.}
201./* QComboBox gets the "on" state when the popup is open */
202.QComboBox:!editable:on, QComboBox::drop-down:editable:on {
203.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
204.                                 stop: 0 #080B10,
205.                                 stop: 1.0 #212C3F);;
206.}
207.QComboBox:on { /* shift the text when the popup opens */
208.     padding-top: 3px;
209.     padding-left: 4px;
210.}
211.QComboBox::drop-down {
212.     subcontrol-origin: padding;
213.     subcontrol-position: top right;
214.     width: 15px;
215.     border-left-width: 1px;
216.     border-left-color: 32435E;
217.     border-left-style: solid; /* just a single line */
218.     border-top-right-radius: 3px; /* same radius as the QComboBox */
219.     border-bottom-right-radius: 3px;
220.}
221.QComboBox::down-arrow {
222.     image: url(qss/downarrow.png);
223.}
224.QComboBox::down-arrow:on { /* shift the arrow when popup is open */
225.     top: 1px;
226.     left: 1px;
227.}
228.QComboBox QAbstractItemView {
229.     border: 2px solid #32435E;
230.     selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
231.                                 stop: 0 #506B79,
232.                                 stop: 1.0 #0D95A6);
233.    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
234.                                 stop: 0 #1B2534, stop: 0.4 #010101,
235.                                 stop: 0.5 #000101, stop: 1.0 #1F2B3C);
236.}