歡迎技術交流和幫助，提供IT相關服務，索要源碼請聯繫博主QQ: 21497936，若該文爲原創文章，未經允許不得轉載
原博主博客地址：https://blog.csdn.net/qq21497936
本文章博客地址：http://blog.csdn.net/qq21497936/article/details/79401577
目錄
九宮格（border-image，border-width）
示例：QPushButton使用qlineargradient線性漸變色
示例：QPushButton使用qradialgradient圓心輻射漸變色
示例：QPushButton使用qconicalgradient圓心角度漸變
《qss樣式表筆記大全(一)：qss名詞解析（包含相關示例）》
《qss樣式表筆記大全(二)：可設置樣式的窗口部件列表（上）（包含相關示例）》
《qss樣式表筆記大全(三)：可設置樣式的窗口部件列表（中）（包含相關示例）》
《qss樣式表筆記大全(四)：可設置樣式的窗口部件列表（下）（包含相關示例）》
qss樣式表筆記大全(一)：qss名詞解析（包含相關示例）
前話
qss可以說是qt版本的css，語法類似但也存在不同點，建議閱讀本文檔之前先直接百度以下學習qss的基本使用方式。
qss主要是用於qt對ui界面的美化。
實踐方法：直接打開qmake目錄下的qtdesigner，新建控件後，右鍵點擊設置樣式。
該筆記主要參考《最全Qt樣式表使用說明》，學習實踐以及做項目過程中重新整理筆記，最終目標爲形成一套qss樣式表大全，將隨着時間持續更新。
閱讀方式
本筆記可當作手冊，也可以當作學習教材，參考資料。
先了解基本的“名詞解析”後，可按照以下三個方式閱讀：
方式一：詳細查看示例，按照示例，一步一步閱讀。
方式二：需要設置某個類qss時，根據索引找，查看詳細示例。
方式三：直接閱讀所有樣式，適合系統的查漏補缺學習。
名詞解析
選擇器（selector）
選擇特定的類，如示例1中的QPushButton#pushButton_shutdown，選擇器的選擇方式有七種，如下表：
|
選擇對象 |
示例 |
描述 |
|
所有控件 |
* |
選擇所有當前控件和其下的所有窗口部件 |
|
所有某類的控件對象，被其子控件對象繼承 |
QPushButton |
選擇該類的所有實例，以及該類的子控件實例（允許該類型） |
|
所有某類的控件對象，不被其子控件對象繼承 |
.QPushButton |
選擇該類的所有實例，不包括子控件實例 |
|
某類的指定控件對象 |
QPushButton#objectName |
選擇該類實例中對象名爲objectName的實例 |
|
選擇匹配某屬性的控件對象 |
QPushButton[y=”0”] |
選擇該類滿足該屬性條件的所有實例 |
|
某類控件的子控件對象 |
QFrame > QPushButton |
選擇指定該類下的直接子控件實例 |
|
某類控件的子孫控件對象 |
QFrame QPushButton |
選擇指定該類下的所有子孫控件實例 |
示例：QPusuButton使用選擇器
QPushButton#pushButton_shutdown {
background-color: rgb(0, 255, 0, 100); // rgb可使用rgba
}
QPushButton#pushButton_shutdown:hover {
background-color: rgb(0, 255, 0); // rgb可使用rgb，默認a爲255
}
QPushButton#pushButton_shutdown:pressed {
background-color: red; // 可使用預知的關鍵字
}
QPushButton#pushButton_shutdown:checked {
background-color: red; // 可使用預知的關鍵字
}
子控件（sub-control）
子控件（同輔助選擇器），對於複雜的控件有必要對其子控件窗口進行控制，不同的控件類包含不同的子控件，如示例2中的QCheckBox中包含indicator子控件。
示例：QCheckBox包含sub-control
QCheckBox#checkBox::indicator{
width:10px;
height:10px;
background-color: red;
}
狀態選擇器（pseudo-states）
狀態選擇器，可根據不同控件的不同狀態對窗口進行控制，如”hover”表示鼠標放上時的狀態，”pressed”表示鼠標保持按下時的狀態，可根據狀態設置不同的外觀，如示例1的QPushbutton的三種狀態。
屬性（property）
屬性，是一個窗口部件所固有的特徵，每一個類型的窗口控件都會有屬於他們自己的屬性，如width，height（輔助選擇器纔有），color等等，定製控件的不同外觀。注意：屬性是使用邏輯否(!)操作符，如!hover，是鼠標未放在上面的其他狀態。
屬性值（value）
屬性值，跟在每一個屬性後面有一個值，可以是bool，int，10px，red，rgb(0,0,0)等等，根據屬性的不同，屬性值的類型不同，通過修改指定控件的指定屬性的屬性值來實現不同的效果，如示例1：background-color，實例2：width、height、background-color。
盒模型（box model）
盒模型，包含了4個影響佈局的矩形，如下圖：
- content rectangle：繪製窗口部件的內容的區域，如文字，圖片。
- padding rectangle：包圍content rectangle，由padding屬性指定填充操作，主要是窗口部件內容與邊緣線（border）之間的空隙，由top，right，bottom和left設置他的大小，缺省爲0。
- border rectangle：包圍padding rectangle，爲邊界預留空間，可認爲是窗口的外框線。
- margin rectangle：最外面的矩形，主要是負責與其他窗口部件間的距離。
注意：若都沒有指定，缺省是四個重合在一起。
角弧度（radius）
窗口部件4個角弧度，設置radius設置角的弧度，如border-radius：4px。
前景色（color）
窗口部件的前景色用戶繪製窗口部件上面的文本，由color設置。
背景色（背景圖片）
窗口部件背景色，用於填充矩形，可通過background-color屬性設置。當需要使用圖片時，可使用background-image屬性，指定資源控制，背景圖片在盒模式區域的對齊和平鋪方式可通過background-position和background-repeadr屬性指定。注意：筆者設置背景圖一般直接使用border-image，該屬性缺省是缺省是進行平鋪和拉伸的。
九宮格（border-image，border-width）
用於有邊框分割的圖像，圖像可縮放和平鋪其中的每個部分。一個本元素可將圖片分成9個區域，四個角區域是不會變化，其他5個區域按照特定的方式進行變化。效果如下圖：
使用border-image和border-width屬性，語法如下：
QLabel#label_6 {
border-image:url("E:/111.jpg") 18 16 15 14 repeat repeat;
border-width:18 16 15 14;
}
berder-image: url [top left bottomright [repeat|no-repeat repeate|no-repeat];
berder-width: top left bottom right;
技巧：這裏筆者提供一個小技巧，可先僅使用border-image: url top leftbottom right來確認邊界，如下表的label_2。
示例：QLabel使用九宮格
|
效果 |
代碼 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
漸變色（Gradient）
- 線性漸變（qlineargradient）：兩點連成的線，線上設置不同顏色，位置範圍[0,1]，參考示例。
- 圓心輻射漸變（qradialgradient）：從圓心開始向外輻射，圓心屬性爲cx，cy，半徑爲radius，fx是stop爲0時相對半徑範圍的位置，參考示例。
- 圓心角度漸變（qconicalgradient）：從圓心開始，以x軸爲0°逆時鐘轉，圓心屬性爲cx，cy，
示例：QPushButton使用qlineargradient線性漸變色
QPushButton#pushButton_3 {
background: qlineargradient( x1:0, y1:0,x2:1, y2:1,
stop:0 rgba(0, 0, 0, 255),
stop:0.5 rgba(0,0, 0, 0),
stop:1 rgba(255, 255, 255, 255));
}
示例：QPushButton使用qradialgradient圓心輻射漸變色
QPushButton#pushButton_4 {
background: qradialgradient( cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
stop:0 rgba(0, 0, 0, 255),
stop:0.5 rgba(0, 0, 0, 0),
stop:1 rgba(255, 255, 255, 255))
}
QPushButton#pushButton_6 {
background: qradialgradient( cx:0.5, cy:0.5, radius:0.5, fx:1.0, fy:0.0,
stop:0 rgba(0, 0, 0, 255),
stop:0.5 rgba(0, 0, 0, 0),
stop:1 rgba(255, 255, 255, 255))
}
示例：QPushButton使用qconicalgradient圓心角度漸變
QPushButton#pushButton_5 {
background:qconicalgradient( cx:0.5, cy:0.5, angle:0,
stop:0 rgba(255, 0, 0, 255),
stop:0.25 rgba(0, 255, 0, 255),
stop:0.5 rgba(0, 0, 255, 255),
stop:0.75 rgba(0, 0, 0, 0),
stop:1.0 rgba(0, 0, 0, 255));
}
QPushButton#pushButton_7 {
background:qconicalgradient( cx:0.4, cy:0.4, angle:45,
stop:0 rgba(255, 0, 0, 255),
stop:0.25 rgba(0, 255, 0, 255),
stop:0.5 rgba(0, 0, 255, 255),
stop:0.75 rgba(0, 0, 0, 0),
stop:1.0 rgba(0, 0, 0, 255));
}
後話
緊接下一部分《 qss樣式表筆記大全(二)：可設置樣式的窗口部件列表（上）（包含相關示例）》
原博主博客地址：https://blog.csdn.net/qq21497936
本文章博客地址：http://blog.csdn.net/qq21497936/article/details/79401577