QSS之QPushButton 详细介绍

官方参考资料

QPushButton {  
    /* 前景色 */  
    color:red;  

    /* 背景色 */  
    background-color:rgb(30,75,10);  

    /* 边框风格 */  
    border-style:outset;  

    /* 边框宽度 */  
    border-width:2px;  

    /* 边框颜色 */  
    border-color:rgb(10,45,110);  

    /* 边框倒角 */  
    border-radius:10px;  

    /* 字体 */  
    font:bold 14px;  

    /* 控件最小宽度 */  
    min-width:100px;  

    /* 控件最小高度 */  
    min-height:20px;  

    /* 内边距 */  
    padding:4px;  
}  

/* 鼠标按下时的效果 */  
QPushButton#pushButton:pressed {  
    /* 改变背景色 */  
    background-color:rgb(40,85,20);  

    /* 改变边框风格 */  
    border-style:inset;  

    /* 使文字有一点移动 */  
    padding-left:6px;  
    padding-top:6px;  
}  

/* 按钮样式 */  
QPushButton:flat {  
    border:2px solid red;  
}  

/* 当按钮打开菜单时:ui->pushButton->setMenu(btnMenu) */  
QPushButton:open{  
    background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #dadbde, stop: 1 #f6f7fa);  
}  

/* 子选择器:菜单 */  
QPushButton::menu-indicator {  
    image:url(:/images/close.png);  

    /* 去掉小三角号   
    image:none;*/  

    /* 绘制subcontrol 的参考矩形的位置 */  
    subcontrol-origin:padding;  

    /* 小三角的位置 */  
    subcontrol-position:bottom right;  
}  

QPushButton::menu-indicator:pressed,QPushButton::menu-indicator:open {  
    position:relative;  
    top:4px;  
    left:4px;  
} 

前景色 color:rgb(255, 0, 0)

QPushButton *btn = new QPushButton("我叫按钮");
btn->setStyleSheet( QString("QPushButton{color:rgb(255, 0, 0)}      \
                            QPushButton:hover{color:rgb(0, 255, 0)} \
                            QPushButton:pressed{color:rgb(0, 0, 255)}") );
btn->show();

效果如下：
按钮上的字初始颜色是红色

鼠标移到按钮上后，按钮按钮上字的颜色变成绿色

鼠标点击后，按钮按钮上字的颜色变成蓝色

背景色 background-color:rgb(255, 0, 0)

QPushButton *btn = new QPushButton("我叫按钮");
btn->setStyleSheet( QString("QPushButton{background-color:rgb(255, 0, 0)}       \
                            QPushButton:hover{background-color:rgb(0, 255, 0)}  \
                            QPushButton:pressed{background-color:rgb(0, 0, 255)}") );
btn->show();

效果如下：
按钮初始背景色是红色

鼠标移到按钮上后，按钮背景色变成绿色

鼠标点击后，按钮背景色变成蓝色

边框风格 border:2px solid red

调整边框风格时，border-width >= 1。否则不管怎么调整，都看不出效果

border-style属性值	含义
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

QPushButton *btn = new QPushButton("我叫按钮");
btn->setStyleSheet( QString("QPushButton{border:2px solid #ff0000}       \
                            QPushButton:hover{border:5px dotted #00ff00} \
                            QPushButton:pressed{border:10px groove #0000ff}") );
btn->show();

效果如下：
按钮初始为普通红色边框

鼠标移到按钮上后，按钮边框变成绿色点状边框

扫描二维码关注公众号，回复： 859413 查看本文章

鼠标点击按钮后，按钮边框变成蓝色3D 凹槽边框

边框倒角 border-radius:2px

QPushButton *btn = new QPushButton("我叫按钮");
btn->setStyleSheet( QString("QPushButton{   border:2px solid red;               \
                                            border-top-left-radius:4px;         \
                                            border-top-right-radius:8px;        \
                                            border-bottom-left-radius:16px;     \
                                            border-bottom-right-radius:32px }   \
                            QPushButton:hover{border:5px dotted #00ff00}        \
                            QPushButton:pressed{border:10px groove #0000ff}") );
btn->show();

效果如下：