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();
效果如下:
按钮初始为普通红色边框
鼠标移到按钮上后,按钮边框变成绿色点状边框
鼠标点击按钮后,按钮边框变成蓝色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();
效果如下: