1. 程式人生 > >QT QSS樣式表心得

QT QSS樣式表心得



//預設為底白
#m_pPlaybackBtn
{
    color:rgb(0,0,0);
    background-color:White;
    border:1px solid rgb(255,255,255);
   
}
//選中為帶黑色邊框
#m_pPlaybackBtn:hover{  
border:1px solid rgb(0,0,0); 
}

//在控制元件上,從左偏移5個畫素寫字
{
padding:5px;
}

//邊框圖片處理
border-image: url(:/mydialog/theme/qq/s_a1.png) 10 9 8 7;
右邊 4個數字分別以空格分開,意思將圖片進行剪裁再填充,如果後面不帶4個10,預設以圖片進行平鋪,帶4個10,意思是將圖片上面剪裁10個畫素,再將左邊剪裁9個畫素
注意如果是負數,那就是向外擴張9個畫素,然後下面剪裁8個畫素,右邊剪裁7個畫素。

border-width:50px 40px 30px 20px;
意思是邊框下面空50畫素,左邊空40,上面空30,右邊空20畫素。

//繪製圓角
#widget
{
 border-top-left-radius:10px;
 border-top-right-radius:10px;
 background-color: rgb(1, 159, 149);
 border:2px solid rgb(1, 159, 149);
}

#m_pBtnOutputBack
{
 border:transparent;
 border-image: url(:/iVMS4200/Alarm/Images/Alarm/back_normal.png) 0 -380 0 0;
    border-width: 3px -80px 3px 10px
}

#m_pBtnOutputBack:hover
{
 border:transparent;
    border-image: url(:/iVMS4200/Alarm/Images/Alarm/back_hoversel.png)  0 -380 0 0;
    border-width: 3px -80px 3px 10px
}