马上注册,享受更多特权
您需要 登录 才可以下载或查看，没有帐号？立即注册 
x
触摸屏的按钮可以通过插入图片来改变风格样式使画面更丰富。但由于不同按钮的长宽比也有不同，使用相同图片作背景会存在圆角变形的情况，在PS里重新切图也会比较费事。在编辑画面的过程偶然发现了样式这个东西，可以通过只改样式来实现美化控件的作用。我做了一些简单的样式（自己看着还行），分享给大家，希望能给大家提供一点思路。
下面分享样式代码。
底部导航栏按钮样式
QSSPushButton, QSSButton{
/*边框*/
border:1px solid #4FC7F8;
/*背景*/
background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 #58C4F4, stop:0.4 #2791DD,stop:0.6 #1070D9, stop:1 #1070D9);
/*字体颜色*/
color:#fff;
/*圆角*/
border-radius:0px;
}
QSSPushButton:hover, QSSButton:hover{
border:1px solid #EEFDBC;
background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 #B4DD3E, stop:0.4 #B4DD3E,stop:0.6 #75C00C, stop:1 #71AD07);
}
QSSPushButton:checked, QSSPushButton:focus, QSSPushButton:pressed,
QSSButton:checked, QSSButton:focus, QSSButton:pressed{
background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 #B4DD3E, stop:0.4 #B4DD3E,stop:0.6 #75C00C, stop:1 #71AD07);
color:#000;
}
侧边导航栏按钮样式
QSSPushButton, QSSButton{
border:1px solid #ccc;
background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #F8F8F8, stop:0.4 #ECECEC,stop:0.6 #E0E0E0, stop:1 #F1F1F1);
color:#000;
border-radius:0px;
}
QSSPushButton:hover, QSSButton:hover{
border:1px solid #4FC7F8;
background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #56C2F7, stop:0.4 #338FE5,stop:0.6 #1272C8, stop:1 #1192F0);
color:#fff;
}
QSSPushButton:checked, QSSPushButton:focus, QSSPushButton:pressed,
QSSButton:checked, QSSButton:focus, QSSButton:pressed{
border:1px solid #4FC7F8;
background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #56C2F7, stop:0.4 #338FE5,stop:0.6 #1272C8, stop:1 #1192F0);
color:#fff;
}
输入框样式（数值IO域）
QSSLineEdit {
color: #0E8BDC;
background:#ffffff;
border-bottom: 2px solid #efefef;
border-right: 2px solid #efefef;
border-top:1px solid #aaa;
border-left:1px solid #aaa;
border-radius:0px;
}
QSSLineEdit:hover, QSSLineEdit:focus {
border: 2px solid #4b81ba;
}
文本标签
没有样式
外观->背景色：#F2F2F2
按钮
QSSButton {
border:2px solid rgb(217,217,217);
/*白色背景*/
background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgb(227,227,227), stop:1 rgb(250,250,250));
/*红色背景background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #DF6F6F, stop:1 #CC4348);*/
/*蓝色背景background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #58C4F4, stop:0.4 #2791DD,stop:0.6 #1070D9, stop:1 #1070D9);*/
/*橙色背景background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #FB9F04,stop:0.4 #F09224, stop:0.6 #e37301,stop:1 #D45800);*/
/*绿色背景background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #B4DD3E, stop:0.4 #B4DD3E,stop:0.6 #75C00C, stop:1 #71AD07);*/
color:#111;
border-radius:8px;
}
文本标签不填文字作渐变背景
QSSLabel {
color: #fff;
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1, stop:0 #2CD8D5,stop:0.56 #C5C1FF stop:1 #FFBAC3);
}
文本标签不填文字作透明背景
QSSLabel {
color: #fff;
background: rgba(0,0,0,20%);
}
|
