qt中qcss的总结

1.QSpinBox

效果：

代码：

QSpinBox {
    padding-right: 15px; /* make room for the arrows */
    border-image: url(:/images/frame.png) 4;
    border-width: 3;
}

QSpinBox::up-button {
    subcontrol-origin: border;
    subcontrol-position: top right; /* position at the top right corner */
    width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
    border-image: url(:/images/spinup.png) 1;
    border-width: 1px;
}

QSpinBox::up-button:hover {
    border-image: url(:/images/spinup_hover.png) 1;
}

QSpinBox::up-button:pressed {
    border-image: url(:/images/spinup_pressed.png) 1;
}

QSpinBox::up-arrow {
    image: url(:/images/up_arrow.png);
    width: 7px;
    height: 7px;
}

QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off { /* off state when value is max */
   image: url(:/images/up_arrow_disabled.png);
}

QSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: bottom right; /* position at bottom right corner */
    width: 16px;
    border-image: url(:/images/spindown.png) 1;
    border-width: 1px;
    border-top-width: 0;
}

QSpinBox::down-button:hover {
    border-image: url(:/images/spindown_hover.png) 1;
}

QSpinBox::down-button:pressed {
    border-image: url(:/images/spindown_pressed.png) 1;
}

QSpinBox::down-arrow {
    image: url(:/images/down_arrow.png);
    width: 7px;
    height: 7px;
}

QSpinBox::down-arrow:disabled,
QSpinBox::down-arrow:off { /* off state when value in min */
   image: url(:/images/down_arrow_disabled.png);
}

2.QPushButton

效果：

代码：

QPushButton{color:#ffffff;background:#08bb06;border-radius:5px;width:112px;height:35px;font-family:microsoft yahei ui,microsoft yahei;font-size:15px;}
QPushButton:disabled{color:#FFFFFF}
QPushButton:pressed{background:#d4ebd4;}

3.QLabel

效果：

代码：

QLabel{font-family:\"Microsoft YaHei\";font-size:12px;background:transparent;color:#000000;}

效果：

代码：

4.QComboBox

效果：

代码：

QComboBox {border:1px solid #ddd; border-radius:3px;}
QComboBox:editable {background: white;}
QComboBox::drop-down {subcontrol-origin: padding;subcontrol-position: top right;width: 15px; border-top-right-radius: 3px; border-bottom-right-radius: 3px;}
QComboBox::down-arrow {image: url(picture/direction_down.png);}

5.QLineEdit

效果：

代码：

QLineEdit { border:1px solid #ddd;border-radius:3px;padding:0px 7px;font-size:12px;width:250px;}

6.QListView

效果：
代码：

QListView{background:#f2f2f2;color:#000000;padding:0px;margin:0px;outline:0px;border:0px;}
QListView::item{height:68px;width:100%;padding:0px;margin:0px;outline:0px;}
QListView::item:hover{background:#e2e2e2;padding:0px;margin:0px;}
QListView::item:selected{background:#e2e2e2;padding:0px;margin:0px;}
QListView::item:selected:active{background:#e2e2e2e;padding:0px;margin:0px;}

7.QScrollBar:vertical

效果：

代码：

/*垂直滑块整体*/
QScrollBar:vertical{width:8px;background:rgba(180,180,180,0%);margin:0px,0px,0px,0px;padding:0px;}
/*滑块样式*/
QScrollBar::handle:vertical{width:8px;background:rgba(180,180,180,35%);border-radius:4px;min-height:20;}
/*鼠标触及滑块样式*/
QScrollBar::handle:vertical:hover{width:8px;background:rgba(180,180,180,50%);border-radius:4px;min-height:20;}
QScrollBar::add-line:vertical{width:0px;height:0px;}
QScrollBar::sub-line:vertical{width:0px;height:0px;}
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{background:rgba(180,180,180,10%);border-radius:4px;}

横向滚动条

效果：

代码：

QScrollBar:horizontal {border: 0px;background:rgba(180,180,180,0%); height: 8px;margin: 0px;}
QScrollBar::handle:horizontal {height:8px;background:rgba(180,180,180,35%);border-radius:4px;min-height:20;}
QScrollBar::add-line:horizontal {width:0px;height:0px;}
QScrollBar::sub-line:horizontal {width:0px;height:0px;}
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {background: none;}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {background: none;}

8.QToolButton

效果：

代码：

QToolButton {background-color:#f2f2f2;border:none;font-size:16px;font-weight:500; height:28px;width:232px;padding:6px;cursor: pointer;}

猜你喜欢