Qt Qss 漸變顏色設置


1.漸變顏色設置有:qlineargradient(線性漸變顏色設置),qradialgradient(輻射漸變),qconicalgradient(圓錐形漸變)。

1  QLinearGradient:顯示從起點到終點的漸變。
2  QRadialGradient:以圓心為中心顯示漸變。
3  QConicalGradient:圍繞一個中心點顯示漸變。 
4  QGradient::PadSpread :填充區域內最接近的停止顏色。這是默認的。
5  QGradient::RepeatSpread : 在區域外繼續重復填充。
6  QGradient::ReflectSpread : 在區域外反射填充。

2.漸變過程x1->x2 從左向右漸變;y1->y2 從上向下漸變。如果只有x相等,則表示垂直線性漸變,如果只有y相等,則表示平行線性漸變,否則就是斜角線性漸變。

3.左右漸變,如代碼        

1 QLabel#label{ 2 background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, 3 stop:0 red,stop:1 green); 4 }

 4.上下漸變  

1 QLabel#label{ 2 background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, 3 stop:0 red,stop:1 green); 4 }

 5.左右,上下   

1 QLabel#label{ 2 background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1, 3 stop:0 red,stop:1 green); 4 }

 

6.x1,x2,y1,y2都是設置成0或者1,顏色都一樣是紅色 

1 QLabel#label{ 2 background-color: qlineargradient(x1:1, y1:1, x2:1, y2:1, 3 stop:0 red,stop:1 green); 4 }

7.增加多個漸變點 

1 QLabel#label{ 2 background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, 3 stop:0 red,stop:0.2 blue,stop:0.5 red, stop:1 green); 4 }

8.輻射漸變 

以圓心為中心顯示漸變。(cx, cy)是中點,半徑(radius)是以中點為圓心的圓的半徑,(fx, fy)是漸變的起點。

 1 QLabel#label{  2     background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,  3     stop:0 rgba(0, 0, 0, 255),  4     stop:0.19397 rgba(0, 0, 0, 255),  5     stop:0.202312 rgba(122, 97, 0, 255),  6     stop:0.495514 rgba(76, 58, 0, 255),  7     stop:0.504819 rgba(255, 255, 255, 255),  8     stop:0.79 rgba(255, 255, 255, 255),  9     stop:1 rgba(255, 158, 158, 255)) 10 }

 9.   圓錐形漸變

  在(cx, cy)坐標上以角度(angle)為中心顯示漸變。

1 QLabel#label{ 2 background-color: qconicalgradient(cx:0.5, cy:0.5, angle:0, 3 stop:0 rgba(255, 255, 255, 255), stop:0.373979 rgba(255, 255, 255, 255), 4 stop:0.373991 rgba(33, 30, 255, 255), stop:0.624018 rgba(33, 30, 255, 255), 5 stop:0.624043 rgba(255, 0, 0, 255), stop:1 rgba(255, 0, 0, 255)) 6 }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM