在樣式表中，每個部件都被看作是乙個由四個同心相似的矩形組成的箱體：空白(margin)、邊框(border)、填充(padding)和內容(content)。對於乙個平面部件——例如乙個空白、邊框和填充都是0畫素的部件——而言，這四個矩形是完全重合的。空白區域位於邊框外，並且總是透明的。邊框為部件提供了四周的框架，其border-style屬性可以設定為一些內建的框架風格，如inset、outset、solid和ridge。填充在邊框和內容區域之間提供了空白間隔，方箱模型的具體例項參見圖4
圖4qss方箱模型
理解方箱模型對於控制項的具體樣式設定的理解有重要的作用，特別是在有關子控制項的定位，相對位置和絕對位置的應用上有著非常方便的實際意義。
部件的前景色用於繪製上面的文字，可以通過color屬性指定。背景色用於繪製部件的填充矩形，可以通過background-color屬性指定。
背景使用background-image屬性定義，它用於繪製由background-origin指定的矩形區域（空白、邊框、填充或內容，這裡就用到了qss方箱模型）。背景在矩形區域內的對齊和平鋪方式可以通過background-position和background-repeat屬性指定。
如果指定的背景具有alpha通道（即有半透明效果），通過background-color指定的顏色將會透過透明區域。這一功能可以使背景在多種環境下重複利用。該例子中使用的樣式表如下所示：
qframe
在這個例子中，qframe四周的空白、邊框和填充值都是一樣的。實際上margin屬性可以在上下左右四個方向分別指定我們需要的不同值，例如：
qframe
同時，我們也可以分別指定margin-top、margin-right、margin-bottom、margin-left四個屬性。
qframe
注意的是有關「background」的區域
①background-origin
，背景的起始，origin的取值範圍：margin
\border
\padding
\content
。而如果出現
background-origin：margin或background-origin：border
背景色或背景不會出現在padding以外，只會沾滿padding內矩形，這裡以不帶透明區域的進行說明
圖5background區域說明1
如圖5所示，其qss語句為：
qframe#frame
上面沒有
padding
的顏色，但設定
background-color: rgba(255, 0, 0,125)
，則border以內，content以外，全部變為「半透明的紅色」，如果將background-origin
改為padding，則效果圖如圖6，padding區域完全被背景覆蓋。
圖6background區域說明2
如果背景帶有透明區域，則透明區域會顯示
qss語句中顯示的背景顏色，如圖
7所示帶透明區域的
png作為圖8所示
qframe
的背景，其透明區域完全被背景顏色填充
圖7 帶透明區域的
圖8 background區域說明3
②background-color
的起作用範圍是border以內，即：如果background-color:gray;則如果沒有background-image，則方箱模型內border以內（不包含border）的預設顏色都為灰色。
③background-repeat,
repeat-x：x
方向重複
repeat-y ：y
方向重複
none：x
、y方向都重複
no-repeat
：任何方向都不重複
雖然目前我們僅僅使用了qframe作為例子，但是我們也可以同樣的將這些屬性應用於任何乙個支援方箱模型的qt部件，例如：qcheckbox、qlabel、qlineedit、qlistview、qmenu、qpushbutton、qtextedit、和qtooltip。
5建立可縮放樣式
在預設情況下，通過background-image指定的背景會自動重複平鋪，以覆蓋部件的整個填充矩形（即邊框裡面的那個區域）。如果我們想建立能夠隨著部件大小自動縮放而不是平鋪的背景，我們需要設定 「邊框(border-image)」。
「邊框」可以通過border-image屬性指定，它同時提供了部件的背景和邊框。乙個「邊框」被分為九個部分（九宮格），有點向tic-tac-toe遊戲的棋盤，如圖9
圖9border-image九宮格
當乙個部件的邊框被填充時，四角的格仔通常不會發生變化，而其餘的五個格仔則可能被拉伸或平鋪以填充可用空間。
當指定乙個「邊框」時，除了本身，我們還必須指定用來分割九宮格的四條分割線。同時我們還必須指定非邊角的格仔是應該平鋪還是拉伸，以及邊框的寬度（用來確定邊角格仔的大小，防止邊角被縮放變形）。
例如，下面的樣式表定義了圖10中的frame：
圖10 frame-borderimage
border-image語句的解釋，border-image一般由三組引數組成(對應橫向，縱向的平鋪方式，stretch等比例縮放；repeat重複平鋪，最後一幅影象有肯能出現切割；round合理縮放後重複平鋪，不存在最後一幅影象重複切割的現象)}。有關repeat和round的區別，詳見圖11。
左圖：border-image: url(f:\\qss etc\\qi\\qt.png) 3 3 3 3 repeat repeat;
右圖：border-image: url(f:\\qssetc\\qi\\qt.png) 3 3 3 3 repeat round;
左圖用repeat，出現影象重複貼圖的切割現象，而右圖用round，在垂直方向做了相應比例縮小後，再顯示在控制項上。
圖11 repeat-round對比
如果不重複，則在控制項上等比縮放，全景顯示在控制項內，這一點特別適合在為軟體主介面選擇主題背景時應用，圖12、13給出用stretch的示例。
圖12邊框原始背景
圖13stretch邊界frame
qframe
上述qss語句，邊框（border-image）的平鋪方式(tilemode)為stretch,按照控制項大小同比例縮放原始，這樣為設計軟體主介面的整體風格提供了極大的便利。
另外，「邊框」還應該含有alpha通道，以使背景能夠在邊角處露出來。
JUNIT 入門2 語法及應用
本文主要介紹junit 語法及常用函式應用。一 常用annotation before 初始化方法，在任何乙個 測試執行之前必 須執行的 after 釋 放資源，在任何 測試執行之後需要 進行的收尾工作。在每個 測試方法 執行之後 執行一次，該annotation 只能修飾 public void ...
QSS樣式表語法
qss檔案存在，可以通過檔案載入進行設定 直接寫在ui檔案或者 中 從外到內 margin rectangle 最外面的矩形，主要是負責與其他視窗部件間的距離 border rectangle 包圍padding rectangle，為邊界預留空間，可認為是視窗的外框線 padding rectan...
Qt之QSS（語法高亮）
語法高亮能幫助開發者很快的找到程式中的錯誤。例如，大部分編輯器會用不同的顏色突出字串常量。所以，非常容易發現是否遺漏了分隔符，因為相對於其他文字顏色不同。qt creator 中預設情況下開啟 qss 檔案 qss 不會高亮顯示，需要手動配置，讓其更符合我們的閱讀習慣，以更迷人的方式展示 片段。進入...