QT5常用樣式表

阿新 • • 發佈：2019-01-14

先來個顏色程式碼表

自繪按鈕（需準備三張圖片對應正常狀態，滑鼠經過狀態以及按鈕按下時的狀態，以下只用了兩張）

ui->Button->setStyleSheet("
QPushButton {border-image:url(:/icon/close);} //正常狀態
QPushButton:hover{border-image:url(:/icon/close_on);} //滑鼠經過時顯示這張
QPushButton:hover:pressed{border-image:url(:/icon/close);} //按下按鈕時
");

ui->Button->setStyleSheet("
	QPushButton {border-image:url(:/icon/close);}		   //正常狀態
	QPushButton:hover{border-image:url(:/icon/close_on);}      //滑鼠經過時顯示這張
	QPushButton:hover:pressed{border-image:url(:/icon/close);} //按下按鈕時
");

效果

普通按鈕(直接修飾一個按鈕)

[cpp] view plain copy print?

ui->Button->setStyleSheet("
QPushButton{border: 2px solid grey; //邊框寬2畫素顏色為灰色
background:rgb(183,203,188); //按鈕背景色
border-radius: 8px;} //按鈕四個角的弧度大小
QPushButton:hover{border-color:rgb(183,203,188);}
QPushButton:pressed{border-color:gray}
");

ui->Button->setStyleSheet("
QPushButton{border: 2px solid grey;    //邊框寬2畫素顏色為灰色
	background:rgb(183,203,188);   //按鈕背景色
	border-radius: 8px;}           //按鈕四個角的弧度大小
QPushButton:hover{border-color:rgb(183,203,188);}
QPushButton:pressed{border-color:gray} 
");

效果

滾動條（以列表框中的垂直滾動條為例，其他滾動條類似）

[cpp] view plain copy print?

ui->listWidget->verticalScrollBar()->setStyleSheet("
QScrollBar{border: 0px solid transparent; //設定滾動條整體樣式
background:transparent;
width:11px;
padding-top:10px; //滾動條上下箭頭預留大小
padding-bottom:10px;}
QScrollBar:handle{background:lightgray; //設定滾動條中滑塊的樣式
border:0px solid transparent;
border-radius:2px;}
QScrollBar:handle:hover{background:#669999;} //滑鼠經過滑塊改變滑塊顏色
QScrollBar:sub-line{background:lightgray; }
QScrollBar:add-line{background:lightgray;} //這幾個為滑塊下面的槽的顏色
QScrollBar:add-page:vertical, QScrollBar:sub-page:vertical{background:transparent;}QScrollBar:add-line:vertical{height:10px; //上箭頭樣式
width:11px;
border-image:url(:/icon/down);
subcontrol-position:bottom;}
QScrollBar:sub-line:vertical{height:10px; //下箭頭樣式
width:11px;
border-image:url(:/icon/up);
subcontrol-position:top;}
QScrollBar:add-line:vertical:hover{height:10px; //滑鼠經過上箭頭時
width:11px;
border-image:url(:/icon/down_on);
subcontrol-position:bottom;}
QScrollBar:sub-line:vertical:hover{height:10px; //滑鼠經過下箭頭時
width:11px;
border-image:url(:/icon/up_on);
subcontrol-position:top;}
QScrollBar:handle:vertical{min-height:5px} //設定垂直滑塊的最小高度值,否則列表很大時滑塊會消失
");

ui->listWidget->verticalScrollBar()->setStyleSheet("
QScrollBar{border: 0px solid transparent; //設定滾動條整體樣式
	background:transparent;
 	width:11px;
	padding-top:10px; //滾動條上下箭頭預留大小
	padding-bottom:10px;}
QScrollBar:handle{background:lightgray;  //設定滾動條中滑塊的樣式
	border:0px solid transparent; 
	border-radius:2px;}
QScrollBar:handle:hover{background:#669999;} //滑鼠經過滑塊改變滑塊顏色
QScrollBar:sub-line{background:lightgray; }  
QScrollBar:add-line{background:lightgray;}  //這幾個為滑塊下面的槽的顏色
QScrollBar:add-page:vertical, QScrollBar:sub-page:vertical{background:transparent;}QScrollBar:add-line:vertical{height:10px;  //上箭頭樣式
	width:11px;
	border-image:url(:/icon/down);
	subcontrol-position:bottom;}
QScrollBar:sub-line:vertical{height:10px;  //下箭頭樣式
	width:11px;
	border-image:url(:/icon/up);
	subcontrol-position:top;} 
QScrollBar:add-line:vertical:hover{height:10px; //滑鼠經過上箭頭時
	width:11px;
	border-image:url(:/icon/down_on);
	subcontrol-position:bottom;}  
QScrollBar:sub-line:vertical:hover{height:10px; //滑鼠經過下箭頭時
	width:11px;
	border-image:url(:/icon/up_on);
	subcontrol-position:top;}  
QScrollBar:handle:vertical{min-height:5px} //設定垂直滑塊的最小高度值,否則列表很大時滑塊會消失
");

效果

進度條

[cpp] view plain copy print?

ui->QSlider->setStyleSheet("
QSlider:groove:horizontal {border: 1px solid #00688B;
height:5px;
border-radius: 3px;}
QSlider:handle:horizontal{background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,stop:0.6 #45ADED, stop:0.778409 rgba(255, 255, 255, 255));
width:10px;
margin-top:-3px;
margin-bottom:-3px;border-radius:5px;}
QSlider:handle:horizontal:hover {background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #2A8BDA,stop:0.778409 rgba(255, 255, 255, 255));
width:10px;
margin-top: -3px;
margin-bottom: -3px;
border-radius:5px;}
QSlider:sub-page{border-radius:3px;
background:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #009ACD, stop:1 #008B8B);
margin: 2px 0;}
");

ui->QSlider->setStyleSheet("
QSlider:groove:horizontal {border: 1px solid #00688B;
	height:5px;
	border-radius: 3px;}
QSlider:handle:horizontal{background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,stop:0.6 #45ADED, stop:0.778409 rgba(255, 255, 255, 255));
	width:10px;
	margin-top:-3px;
	margin-bottom:-3px;border-radius:5px;}
QSlider:handle:horizontal:hover {background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #2A8BDA,stop:0.778409 rgba(255, 255, 255, 255));
	width:10px;
	margin-top: -3px;
	margin-bottom: -3px;
	border-radius:5px;}
QSlider:sub-page{border-radius:3px;
background:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #009ACD, stop:1 #008B8B);
	margin: 2px 0;}
");

效果

搜尋框（一個lineEdit加一個圖形按鈕searchBtn）

1.ui->lineEdit->setTextMargins(0, 0, ui->searchBtn->width(), 0);
2.ui->lineEdit->setStyleSheet("QLineEdit{border: 1px solid gray;border-radius: 3px;background:rgb(200, 231, 232);} QLineEdit:hover{border-color:transparent; }");
3.給searchBtn設定一個icon圖示
4.ui->searchBtn ->setStyleSheet("background:transparent;");

效果

TabWidget

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;
}

效果圖:

例項總結:

*{
  font-size:13px;
  color:white;
  font-family:"宋體";
}
CallWidget QLineEdit#telEdt
{
  font-size:24px;
}
QMainWindow,QDialog{
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #1B2534, stop: 0.4 #010101,
                                 stop: 0.5 #000101, stop: 1.0 #1F2B3C);
}
QWidget{
    background:#121922;
}
QLabel{
   background:transparent;
}
DailForm QLineEdit#phoneLineEdt{
  font-size:36px;
  font-weight: bold;
}
QPushButton,QToolButton{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #5B5F5F, stop: 0.5 #0C2436,
                                 stop: 1.0 #27405A);
    border-style: outset;
    border-width: 1px;
    border-radius: 5px;
    border-color: #11223F;
    padding: 1px;
}
QPushButton::hover,QToolButton::hover{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #758385, stop: 0.5 #122C39,
                                 stop: 1.0 #0E7788);
    border-color: #11505C;
}
QPushButton::pressed,QToolButton::pressed{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #969B9C, stop: 0.5 #16354B,
                                 stop: 1.0 #244F76);
    border-color: #11505C;
}
QPushButton::disabled,QToolButton::disabled{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #282B2C, stop: 0.5 #09121A,
                                 stop: 1.0 #111D29);
    border-color: #0A1320;
    color:#6A6864;
}
QDialog QPushButton,QDialog QToolButton{
  min-width:30px;
  min-height:23px;
}
QToolButton[objectName="minimizeToolBtn"] {
    background: transparent;
    border:none;
    image:url(qss/minimize.png)
}
QToolButton[objectName="minimizeToolBtn"]:hover,QToolButton[objectName="minimizeToolBtn"]:pressed {
    image:url(qss/minimize_hover.png)
}
QToolButton[objectName="maximizeToolBtn"] {
    background: transparent;
    border:none;
    image:url(qss/maximize.png)
}
QToolButton[objectName="maximizeToolBtn"]:hover,QToolButton[objectName="maximizeToolBtn"]:pressed {
    image:url(qss/maximize_hover.png)
}
QToolButton[objectName="closeToolBtn"],QToolButton[objectName="customCloseWindow"] {
    background: transparent;
    border:none;
    image:url(qss/close.png)
}
QToolButton[objectName="closeToolBtn"]:hover,QToolButton[objectName="closeToolBtn"]:pressed{
    image:url(qss/close_hover.png)
}
QToolButton[objectName="customCloseWindow"]:hover,QToolButton[objectName="customCloseWindow"]:pressed{
    image:url(qss/close_hover.png)
}
QToolButton[objectName="titleSetUpToolBtn"]{
    background: transparent;
    border:none;
    image:url(qss/setup.png)
}
DailForm QToolButton#oneToolBtn,QToolButton#OneToolBtn,QToolButton#twoToolBtn,QToolButton#threeToolBtn,
         QToolButton#fourToolBtn,QToolButton#fiveToolBtn,QToolButton#sixToolBtn,
         QToolButton#sevenToolBtn,QToolButton#eightToolBtn,QToolButton#nineToolBtn,
         QToolButton#starToolBtn,QToolButton#zeroToolBtn,QToolButton#sharpToolBtn {
    font-size:36px;
    border-radius: 10px;
}
DailForm QToolButton#delToolBtn{
    border-radius: 10px;
}
QFrame{
    border-color:#32435E;
    border-width:1px;
    border-radius: 3px;
}
QLineEdit,QTextEdit {
    border: 1px solid #32435E;
    border-radius: 3px;
    /* padding: 0 8px; */
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #080B10,
                                 stop: 1.0 #212C3F);
    selection-background-color: #0A246A;
}
QLineEdit::hover{
  border-color:#5D8B9E;
}
QLineEdit[echoMode="3"] {
     lineedit-password-character: 9679;
}
#QLineEdit:read-only {
     background: #543F7C;
}
QTabWidget::pane { /* The tab widget frame */
     border: 0px solid #32435E;
     position: absolute;
     left: -0.1em;
}
QTabWidget#MainTabWidget::tab-bar {
     left: -3px; /* move to the right by 5px */
}
QTabWidget#MainTabWidget QTabBar::tab {
     height: 14ex;
     width: 14ex;
}
QTabBar::tab {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #292F31, stop: 1 #0C131E);
}
QTabBar::tab:selected{
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #113845,  stop: 1.0 #15A8FF);
}
QTabBar::tab:hover {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #113845,  stop: 1.0 #0E6F80);
}
#QTabBar::tab:selected {
     border-color: #32435E;
     border-right-color: #32435E; /* same as pane color */
}
#QTabBar::tab:!selected {
     margin-left: 2px; /* make non-selected tabs look smaller */
}
#QTabBar:tab:first:selected {
    margin-top: 0;
}
QTabBar:tab:last:selected {
    margin-right: 0;
}
QTabBar:tab:only-one {
     margin: 0;
}
QListWidget{
    border: 1px solid #32435E;
    background:#050609;
}
QListWidget::item:selected {
     /*border: 0px solid #33CCFF;*/
     border:none;
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #6A848C,  stop: 1.0 #0F9EAF);
     padding:0px;
     margin:0px;
}
#QListWidget::item:selected:!active {
     border-width: 0px ;
}
#QListWidget::item:selected:active {
     border-width: 1px;
}

QComboBox {
     border: 1px solid #32435E;
     border-radius: 3px;
     padding: 1px 18px 1px 3px;
     min-width: 6em;
}
QComboBox::hover{
  border-color:#5D8B9E;
}
QComboBox:editable {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #080B10,
                                 stop: 1.0 #212C3F);
}
QComboBox:!editable, QComboBox::drop-down:editable {
      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #080B10,
                                 stop: 1.0 #212C3F);
}
/* QComboBox gets the "on" state when the popup is open */
QComboBox:!editable:on, QComboBox::drop-down:editable:on {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #080B10,
                                 stop: 1.0 #212C3F);;
}
QComboBox:on { /* shift the text when the popup opens */
     padding-top: 3px;
     padding-left: 4px;
}
QComboBox::drop-down {
     subcontrol-origin: padding;
     subcontrol-position: top right;
     width: 15px;
     border-left-width: 1px;
     border-left-color: 32435E;
     border-left-style: solid; /* just a single line */
     border-top-right-radius: 3px; /* same radius as the QComboBox */
     border-bottom-right-radius: 3px;
}
QComboBox::down-arrow {
     image: url(qss/downarrow.png);
}
QComboBox::down-arrow:on { /* shift the arrow when popup is open */
     top: 1px;
     left: 1px;
}
QComboBox QAbstractItemView {
     border: 2px solid #32435E;
     selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #506B79,
                                 stop: 1.0 #0D95A6);
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #1B2534, stop: 0.4 #010101,
                                 stop: 0.5 #000101, stop: 1.0 #1F2B3C);
}

QT5常用樣式表

先來個顏色程式碼表自繪按鈕（需準備三張圖片對應正常狀態，滑鼠經過狀態以及按鈕按下時的狀態，以下只用了兩張） [plain] view plain copy print? ui->Button->setStyleSheet(" QPus

CSS選擇器詳解及常用樣式表標記標籤屬性

本學期開設有個ASP.NET課程，剛開始兩週，一直處於複習 web技術階段，剛好自己準備好好學一下CSS的相關內容，就順路一起看看，瞭解CSS常用的選擇器，這樣在後續的個人網站開發上，可以更方便，進入正題：CSS：Cascading Style Sheets(層疊樣式表) 常

css清除常用預設樣式表

/*公共樣式*/ html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select { margin: 0; padding: 0; }div

QT5樣式表使用歸納總結

1、設定控制元件為圓角 border-radius: 10px; //10px表示圓角幅度，值越大角越圓。 2、設定顏色半透明，此處以設定背景顏色舉例，其他顏色設定也可參考。 background-color: rgba(89, 108, 94, 80%);

CSS——（CSS樣式規則，CSS樣式表單，選擇器，常用的CSS屬性）

CSS（Cascading Style Sheets，層疊樣式表單）是由W3C所提出，主要的用途是控制網頁的外觀，也就是定義網頁的編排，顯示，格式化及特殊效果，有部分功能與HTML重疊。 1.CSS樣式規則與選擇器 CSS樣式表單是由一條一條的樣式規則（st

外部樣式表聲明的樣式並不會進入style對象

樣式 http img 一個 16px col function cnblogs image 在網頁設計當中，我們註重網頁的行為（js）、結構（HTLM）、樣式（css）分離開內聯樣式表或者內部樣式表聲明的樣式信息都會進入style對象。我們可以測試一下：但是我們的

HTML CSS 層疊樣式表一

鏈接 mage type類 css 裏的 div adding set clas CSS，全拼Cascading Style Sheets，層疊樣式表，用於控制html<body>的元素的樣式和布局。一、CSS的三種引用方式 1.內嵌 <div sty

HTML CSS 層疊樣式表四

技術分享清除上層 -1 絕對定位有序定位 color abs 一、頁面布局：div+css布局 1.<style > 　　*{ 　　　　margin:0px; 　　　　padding:0px; 　　} 　　#ad{ 　　　　width:100px; 　　

HTML CSS 層疊樣式表二

auto ansi ext pan 字體樣式平鋪 eat 文本大小一、 #ID{ 　　　　width:寬度px; 　　　　height:高度px; 　　　　background-color:red; 背景顏色的兩種加法　　　　background:rgba

第五課樣式表

att char pad vertica ack attach ima ext 技術分享 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

CSS樣式表

標題百分比比較對齊方式 nal 表示滾動條 pad 相關 CSS樣式表的樣式主要可以分為大小，背景，字體，對齊方式，邊界邊框，列表方塊，格式布局等。元素的大小： #div1{ width:300px; height:100

JS 對html標簽的屬性的幹預以及JS 對CSS 樣式表屬性的幹預

inpu cti doc tel tex ttext button abcd element -任何標簽的任何屬性都可以修改! -HTML裏是怎麽寫, JS就怎麽寫以下是一段js 作用於 css 的 href的代碼 <link id="l1"

SQL Server常用系統表

data pro 根據結果同時最大 sys 次數 max 1、查詢當前數據庫中的用戶表 select *from sysobjects where xtype=‘U‘; 2、獲取SQL Server允許同時用戶連接的最大數 SELECT @@MAX_CONNECTIO

CSS一些常用樣式

css nowrap pac 省略號 splay ellipsis 限制行 space isp 限制行數溢出省略號 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-c

如何在PeopleSoft中找到並更改默認樣式表名稱

swa 網站 app 控制樣式表 rom 技術分享使用 data PeopleSoft的默認樣式表名稱是用來控制應用程序的外觀的。在PeopleSoft中可以使用集中樣式表來更改應用程序的外觀，oracle為每個應用程序版本設置了默認的樣式表。下面是不同應用程序版

樣式表練習

外匯樣式 -s lns for www spa gree font <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type

CSS基礎--常用樣式

mage rgb 方式 idt 單位 ont nbsp jpeg ima 一、背景相關背景顏色　　　　　　 background-color ：顏色名稱/rgb值/十六進制值背景圖片　　　　　　 background-image　：url(‘‘)

久未更 ~ 五之 —— 引入外部CSS樣式表小節

col div ... fun class utf-8 css樣式 splay date > > > > > 久未更系列一：在html中引入外部css樣式表 1 //引入外部css樣式表 2 //<lilnk&

CSS3常用樣式總結

ans vps 旋轉 apple ted -c 6.0 tro image 原地旋轉 transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:r

css（層疊樣式表）（1課時）

繼承 http 效果樣式表圖片地址不清楚內嵌設置 class選擇器 1、css全稱為疊層樣式表，在HTML中有4種引入方式 a、行內樣式<dic style="color:red"></div> b、內嵌式：在<head>

QT5常用樣式表

相關推薦