目錄**
說明: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制定出來,使預設顯示為矩形的塊元素展示乙個弧形邊緣的樣式 圓角樣式有如下幾個特性 可獨立設定四個角的...