摘自：https://qtdebug.com/qtbook-qss/

Qt 提供的 widget 的默認(rèn)外觀很多時(shí)候都不符合項(xiàng)目的界面需求，必須要改，修改一個(gè) widget 的外觀（Look and Feel）有以下的方法：

• 繼承 Widget，然后在 paintEvent() 里繪制
• 繼承 QStyle
• 使用 QSS（Qt Style Sheet）
• 對(duì)于 item view 來說還有一種方式，還可以使用 Delegate

這幾種方式里最簡(jiǎn)單靈活的是使用 QSS，雖然有人說 QSS 的效率低，具體有多低沒測(cè)試過，但是在普通 PC 上從來沒感覺出來，再說現(xiàn)在的硬件也不差這么點(diǎn)性能消耗，隨便一個(gè)寫的差點(diǎn)的函數(shù)的消耗就比這多的多，作為一個(gè)實(shí)用主義者，不追求理論上的效率完美，能滿足需求的前提下什么好用用什么，QSS 就是修改 widget 外觀的首選，什么效果不滿意，修改一下 QSS 的文件就可以看到效果，甚至不需要重新編譯、打包發(fā)布程序（如果把 QSS 放在文件中，并且實(shí)現(xiàn)動(dòng)態(tài)加載 QSS）。

我們按下面的章節(jié)來介紹 QSS:

• QSS 基礎(chǔ)
• 加載 QSS
• 盒子模型
• QSS 選擇器
• Border-Image
• QSS Subcontrol
• QSS CalendarWidget

?

border-image用于給border（邊框）貼上背景圖像

類似于CSS中的background（背景）屬性。 例如：background:url(xx.jpg) 27px no-repeat;指的是圖片(url(xx.jpg))，位置(27px)，重復(fù)性(no-repeat)。

border-image與此類似，border-image包括圖片，剪裁位置（與background位置一樣，也是數(shù)值，也支持百分值），重復(fù)性。
例如：border-image:url(border.png) 27 repeat; 指的就是圖片(url(border.png))，剪裁位置(27)，重復(fù)方式(repeat)。

下面我們將border-image的復(fù)合寫法分解描述，border-image的主要參數(shù)就是上面提到的三個(gè)：圖片，剪裁位置，重復(fù)性。 其實(shí)還有另外兩個(gè)，文章最后面再講。更好理解

1、圖片(border-image-source)

• border-image的背景圖使用url()調(diào)用，圖片可以是相對(duì)路徑或是絕對(duì)路徑，也可以不使用圖片，即border-image:none;

2、圖片剪裁位置(border-image-slice)

• 沒有單位，默認(rèn)單位就是像素(px)。例如：border-image:url(border.png) 27 repeat;這里的27專指27px。

---

• 支持百分比值，百分比值大小是相對(duì)于邊框圖片的大小，假設(shè)邊框圖片大小為400px*300px，則20%的實(shí)際效果就是剪裁了圖片的60px 80px 60px 80px的四邊大小。

---

• 剪裁特性。類似于CSS中的clip屬性。其有1~4個(gè)參數(shù)，代表上右下左四個(gè)方位的剪裁，符合CSS普遍的方位規(guī)則（與margin，padding等或border-width一致），舉個(gè)簡(jiǎn)單的例子，前面提到，支持百分比寬度，所以這里“30% 35% 40% 30%”的示意可以用下圖表示：
  

距離圖片上部30%的地方，距離右邊35%，距離底部40%，左邊30%的地方各剪裁一下。也就是對(duì)圖片進(jìn)行了“四刀切”，形成了九個(gè)分離的區(qū)域，這就是九宮格，這是下面深入講解border-image的基礎(chǔ)。

3、重復(fù)性(border-image-repeat)

取值為repeat（重復(fù)）只是其中之一，其余兩個(gè)是round（平鋪）和stretch（拉伸）。其中，stretch是默認(rèn)值。

參數(shù)0~2個(gè)，0則使用默認(rèn)值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;；1則表示水平方向及垂直方向均使用此參數(shù)；2個(gè)參數(shù)的話則第一個(gè)參數(shù)表水平方向，第二個(gè)參數(shù)表示垂直方向。例如：border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平鋪），垂直方向repeat（重復(fù)）。

關(guān)于round 和repeat 的區(qū)別。
round會(huì)湊整填充（進(jìn)行了適度的拉伸）。repeat不進(jìn)行拉伸，不湊整。 具體效果看文章后邊的例子。

4、實(shí)際渲染規(guī)則

通過裁切屬性值，將邊框背景圖切出了“九宮格”的模型，那這張背景圖怎么對(duì)應(yīng)地貼在div的邊框上呢？

<————————>

• 如圖 在border-image中的橙紅色的四個(gè)邊角只會(huì)呆在border的四個(gè)角,并且水平和垂直方向均被拉伸來填充border的四個(gè)角。
• 如圖 上下區(qū)域即border-top-image和border-bottom-image受到第一個(gè)參數(shù)——水平方向效果影響：如果為repeat，則此區(qū)域被水平重復(fù)(round水平平鋪，stretch水平拉伸)來填充對(duì)應(yīng)的上下border【該區(qū)域在垂直方向上首先會(huì)按所對(duì)應(yīng)的border-image-width的值等比縮放，然后再按參數(shù)設(shè)置在邊框水平方向上進(jìn)行重復(fù)或平鋪或拉伸】
• 左右區(qū)域border-left-image和border-right-image 的作用效果亦然【該區(qū)域在水平方向上首先會(huì)按所對(duì)應(yīng)的border-image-width的值等比縮放，然后再按參數(shù)設(shè)置在邊框垂直方向上進(jìn)行重復(fù)或平鋪或拉伸】

---

---

---

我們用下圖(27×3)px *(27×3)pxpng 做實(shí)驗(yàn)，我給不同部位加了一個(gè)序號(hào)做標(biāo)志，便于觀察。

// 加一個(gè)藍(lán)色背景的父級(jí)，便于我們分析效果。.border_image {width: 400px;height: 115px;border: 3em double orange;-webkit-border-image: url(border.png) 27 round;border-image: url(border.png) 27 round;}.box {background: blue;}<div class="box"><div class="border_image"></div></div>

效果如下

---

//去掉重復(fù)屬性，即默認(rèn)都為stretchborder-image: url(border.png) 27;

效果如下

---

//使用repeatborder-image: url(border.png) 27 repeat;

效果如下

---

---

//邊框?qū)挾雀淖僢order-image: url(border.png) 27 repeat stretch;border-width: 3rem 1rem;

效果如下

---

---

5、(邊框背景寬度)border-image-width

這個(gè)屬性默認(rèn)是邊框的寬度，用來限制相應(yīng)區(qū)域背景圖的范圍， 首先相應(yīng)背景區(qū)域的圖像會(huì)根據(jù)這個(gè)屬性值進(jìn)行縮放。然后再重復(fù)或平鋪或拉伸。在復(fù)合寫法中應(yīng)該位于 slice屬性 和repeat屬性中間 用“/”間隔 如：border-image:url(border.png) 27 / 6rem / repeat;

語法：border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}

length 帶 px, em, in … 單位的尺寸值 percentage 百分比 number 不帶單位的數(shù)字；它表示 border-width 的倍數(shù) auto 使用 auto， border-image-width 將會(huì)使用 border-image-slice 的值 border: 3em double orange;border-image: url(border.png) 27 round;border-image-width: 6rem;

效果如下
（白框?yàn)閎order）

border-image-width: 1.5rem;

效果如下
（白框?yàn)閎order）

---

border: 3em double orange;border-image: url(border.png) 27 round;border-image-width: 6rem 1.5rem;

效果如下
（白框?yàn)閎order）

6、（邊框背景擴(kuò)散）border-image-outset

語法：border-image-outset: [ <length> | <number> ]{1,4} 相當(dāng)于把原來的貼圖位置向外延伸。不能為負(fù)值，試一下就知道。在復(fù)合寫法中應(yīng)該位于 border-image-width 后面，用“/”間隔 如：border-image:url(border.png) 27 / 6rem / 1.5rem /repeat; 向外延伸1.5rem再貼圖。。 border: 3em double orange;border-image: url(border.png) 27 round;border-image-width: 1.5rem;border-image-outset: 1.5rem;

效果如下：
（白框?yàn)閎order）

ps 部分資料來源網(wǎng)絡(luò)

總結(jié)

以上是生活随笔為你收集整理的QSS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。