Qt QSS(樣式表)按鈕漸變色設計

2021-09-26 05:03:40 字數 692 閱讀 3828

目錄**

說明:qlineargradient

漸變過程 之x1:0, x2:0, y1:0, y2:1

漸變過程 之stop

rgba

!hover

效果圖之前用的漸變色樣式表(style sheet),貼在這裡方便查詢

qpushbutton:!hover
qlineargradient代表線性漸變

qradialgradient代表輻射漸變

qconicalgradient代表扇形漸變,或圓錐式漸變

漸變過程:x1->x2:x方向漸變,即從左向右漸變;

y1->y2:y方向漸變,即從上向下漸變。

這裡x1:0, x2:0, 說明x方向不做漸變

y1:0, y2:1, 說明y方向做漸變

stop後面跟著的數字取值範圍[0, 1]

stop: 0指起始位置

stop: 0.495與stop: 0.505 指中間位置 

stop: 1 指結束位置

rgba就是red, green, blue, alpha(透明度)【一般是[0,256]】

stop: 0        rgba(120,120,120,255) 

!hover:!是取反的意思

平常狀態:

滑鼠放上去:

CSS樣式 漸變色

background linear gradient 實現漸變色,這裡使用background屬性中的linear gradient 線性漸變 值 這都好理解,就後面這個值的屬性不好理解。首先,第乙個值是angle或者point,也就是角度或者方向。意思你要實現從什麼到什麼的漸變色。單位為deg d...

CSS3漸變色按鈕

下面的展示的是不同的瀏覽器的不同的顯示效果。下面的 是類.button 的一般樣式。為了基於字型大小變化而能自由伸縮,我在填充 padding 和邊界半徑border radius時用了em值。要調整圓角和按鈕的大小,簡單地改變邊界半徑,字型大小和填充值。比如 我可以通過減小字型大小 font si...

09 圓角樣式及漸變色樣式

通過前面內容的學習,我們清楚,塊級元素展示時,預設為矩形,但這種方方正正的樣式,有時候不滿足我們在web頁面上的布局需求,所以今天來講一下圓角樣式 所謂的圓角樣式 border radius 是w3c制定出來,使預設顯示為矩形的塊元素展示乙個弧形邊緣的樣式 圓角樣式有如下幾個特性 可獨立設定四個角的...