您的位置:首页 > Web前端 > CSS

用样式表美化QTabwidget外观

2016-05-09 13:41 489 查看
没有仔细看是否正确,先保存到这里,以后研究一下

一、参考文章:http://bbs.csdn.net/topics/390632657?page=1





setStyleSheet("QTabWidget::pane{border-width:1px;border-color:rgb(48, 104, 151);\

border-style: outset;background-color: rgb(132, 171, 208);\

background: transparent;} \

QTabWidget::tab-bar{border-width:0px;}\

QTabBar::tab{border-bottom-color: #C2C7CB;\

border-top-left-radius: 0px;\

border-top-right-radius: 0px;\

max-width: 75px; min-width:75px; min-height:25px;\

font:14px Times New Roman;\

padding: 0px;\

}\

QTabBar::scroller {\

width:25;\

border:0;\

padding: 0px;\

}\

QTabBar QToolButton::right-arrow {\

background-color:rgb(132, 171, 208);\

border-width: 0;\

background-image: url(:/images/tab/rightbtn.png);\

}\

QTabBar QToolButton::right-arrow:hover {\

background-color:rgb(132, 171, 208);\

border-width: 0;\

background-image: url(:/images/tab/hoverrightbtn.png);\

}\

QTabBar QToolButton::right-arrow:disabled {\

background-color:rgb(132, 171, 208);\

border-width: 0;\

background-image: url(:/images/tab/grayrightbtn.png);\

}\

QTabBar QToolButton::left-arrow {\

background-color:rgb(132, 171, 208);\

border-width: 0;\

background-image: url(:/images/tab/leftbtn.png);\

}\

QTabBar QToolButton::left-arrow:hover {\

background-color:rgb(132, 171, 208);\

border-width: 0;\

background-image: url(:/images/tab/hoverleftbtn.png);\

}\

QTabBar QToolButton::left-arrow:disabled {\

background-color:rgb(132, 171, 208);\

border-width: 0;\

background-image: url(:/images/tab/grayleftbtn.png);\

}\

QTabBar::tab:first:selected {\

margin-left: 30; margin-right: 0;\

color: white;\

border-image: url(:/images/tab/sel3.png);\

}\

QTabBar::tab:first:!selected {\

color: black;\

margin-left: 30; margin-right: 0;\

border-image: url(:/images/tab/normal3.png);\

}\

QTabBar::tab:first:hover:!selected {\

color: black;\

margin-left: 30; margin-right: 0;\

border-image: url(:/images/tab/hover3.png);\

}\

QTabBar::tab:middle:selected {\

margin-top: 0; margin-left: -15; margin-right: 8;\

color: white;\

border-image: url(:/images/tab/sel3.png);\

}\

QTabBar::tab:middle:!selected {\

color: black;\

margin-top: 0; margin-left: -15; margin-right: 8;\

border-image: url(:/images/tab/normal3.png);\

}\

QTabBar::tab:middle:hover:!selected {\

color: black;\

margin-top: 0; margin-left: -15; margin-right: 8;\

border-image: url(:/images/tab/hover3.png);\

}\

QTabBar::tab:last:selected {\

margin-top: 0px; margin-left: 0; margin-right: 0;\

color: white;\

border-image: url();\

}\

QTabBar::tab:last:!selected {\

color: black;\

margin-top: 0; margin-left: 0; margin-right: 0;\

border-image: url();\

}\

QTabBar::tab:last:hover:!selected {\

color: black;\

margin-top: 0; margin-left: 0; margin-right: 0;\

border-image: url();\

}\

QTabBar::tab:only-one {\

margin: 0;\

}");

tab标签的长度,也需要重载QTabBar来动态计算。

二、设置QTabwidget的TabBar的样式1

QString tabBarStyle = "QTabBar::tab {min-width:100px;color: white;border: 2px solid;border-top-left-radius: 10px;border-top-right-radius: 10px;padding:5px;}\

QTabBar::tab:!selected {margin-top: 5px;} \

QTabBar::tab:selected {color: blue;}";

m_TabWidget->setStyleSheet(tabBarStyle);

三、设置QTabwidget的TabBar的样式2

QTabWidget::pane{

border:none;

}

QTabWidget::tab-bar{

alignment:left;

}

QTabBar::tab{

background:transparent;

color:white;

min-width:30ex;

min-height:10ex;

}

QTabBar::tab:hover{

background:rgb(255, 255, 255, 100);

}

QTabBar::tab:selected{

border-color: white;

background:white;

color:green;

}



http://blog.csdn.net/libaineu2004/article/details/39829749
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: