1.这几个都是代码实现的,不使用图片,具体实现如下:
实现方式就是设置这5个位置的颜色值(用取色值的工具就可以获取到RGB值)和边框颜色值就好
按照上述的位置取值,再以下例子,供大家参考:
QPushButton {
background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(250, 204, 246, 255), /*第1个颜色值*/
stop:0.25 rgba(243, 144, 236, 255), /*第2个颜色值*/
stop:0.5 rgba(238, 81, 223, 255), /*第3个颜色值*/
stop:0.65 rgba(239, 92, 225, 255), /*第4个颜色值*/
stop:1 rgba(249, 186, 243, 255));/*第5个颜色值*/
border: 2px solid rgb(240,102,255);/*边框颜色值*/
border-radius: 10px;
}
QPushButton {
background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(204, 250, 227, 255), /*第1个颜色值*/
stop:0.25 rgba(126, 242, 185, 255), /*第2个颜色值*/
stop:0.5 rgba(76, 237, 157, 255), /*第3个颜色值*/
stop:0.65 rgba(91, 239, 166, 255), /*第4个颜色值*/
stop:1 rgba(184, 248, 217, 255));/*第5个颜色值*/
border: 2px solid rgb(78,238,158);/*边框颜色值*/
border-radius: 10px;
}
QPushButton {
background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(249, 202, 201, 255), /*第1个颜色值*/
stop:0.25 rgba(242, 126, 126, 255), /*第2个颜色值*/
stop:0.5 rgba(237, 78, 78, 255), /*第3个颜色值*/
stop:0.65 rgba(238, 89, 89, 255), /*第4个颜色值*/
stop:1 rgba(247, 175, 175, 255));/*第5个颜色值*/
border: 2px solid rgb(237,80,78);/*边框颜色值*/
border-radius: 10px;
}
QPushButton {
background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(199, 238, 249, 255),
stop:0.25 rgba(132, 217, 243, 255),
stop:0.5 rgba(80, 200, 238, 255),
stop:0.65 rgba(87, 203, 239, 255),
stop:1 rgba(186, 233, 249, 255));
border: 2px solid rgb(106,208,240);
border-radius: 10px;
}
QPushButton {
background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(247, 250, 204, 255),
stop:0.25 rgba(236, 243, 133, 255),
stop:0.5 rgba(226, 237, 76, 255),
stop:0.65 rgba(229, 239, 91, 255),
stop:1 rgba(229, 233, 160, 255));
border: 2px solid rgb(225,238,78);
border-radius: 10px;
}
常用的有如下几个:
/*按钮按下*/
QPushButton:pressed{
}
/*按钮选中*/
QPushButton:checked{
}
/*鼠标划过*/
QPushButton:hover{
}
2.不使用图片的,纯代码写的样式也可以这样:
.QPushButton {
background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(233, 233, 233, 255),
stop:0.35 rgba(220, 220, 220, 255),
stop:0.5 rgba(213, 213, 213, 255),
stop:0.65 rgba(230, 230, 230, 255),
stop:1 rgba(242, 242, 242, 255));
border: 1px solid rgb(128,126,126);
border-radius: 5px;
}
.QPushButton:hover{
background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(250, 250, 250, 255),
stop:0.5 rgba(255, 255, 255, 255),
stop:1 rgba(250, 250, 250, 255));
border: 1px solid rgb(63,140,161);
border-radius: 5px;
}
.QPushButton:pressed{
background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(255, 255, 255, 255),
stop:0.5 rgba(235, 247, 253, 255),
stop:1 rgba(213, 237, 250, 255));
border: 1px solid rgb(3,110,183);
border-radius: 5px;
}
3.如果不想写纯代码的样式,可以使用图片的样式
QPushButton {
border-image: url(:/image/functionButtons/normal_button_hover.png);
}
.QPushButton:hover{
border-image: url(:/image/functionButtons/normal_button_pressed.png);
}
.QPushButton:pressed{
border-image: url(:/image/functionButtons/normal_button.png);
}