QT之qss教程- QScrollBar

1、正常模式，如图

QScrollBar:horizontal {
	border:2px solid red;
	background:#32CC99;
	height:15px;
	margin:0px 20px 0px 20px;
}

/* 滑动块设置 */
QScrollBar::handle:horizontal {
	/* 颜色 */
	background:white;
	
	/* 长度 */
	min-width:20px;
}

/* 添加右侧控制块 */
QScrollBar::add-line:horizontal {
	/* 外边框 */
	border:2px solid blue;
	
	/* 背景色 */
	background:#32CC99;
	
	/* 宽度 */
	width:20px;
	
	/* 位置 */
	subcontrol-position:right;
	
	/* 画线区域选择 */
	subcontrol-origin:margin;
}

/* 左侧控制块 */
QScrollBar::sub-line:horizontal {
	border:2px solid green;
	background:yellow;
	width:20px;
	subcontrol-position:left;
	subcontrol-origin:margin;
}

/* 控制块上的小箭头 */
QScrollBar::left-arrow:horizontal,QScrollBar::right-arrow:horizontal {
	border:2px solid grey;
	width:3px;
	height:3px;
	background:white;
}

/* 滑块左边 */
QScrollBar::add-page:horizontal,QScrollBar {
	background:#112233;
}

/* 滑块右边 */
QScrollBar::sub-page:horizontal {
	background:#44F566;
}

2、两个控制块连在一起，如图

QScrollBar:horizontal {
	border:2px solid red;
	background:cyan;
	height:20px;
	margin:0 40 0 0px;
}

/* 滑动块设置 */
QScrollBar::handle:horizontal {
	background:gray;
	min-width:20px;
}

/* 添加右侧控制块 */
QScrollBar::add-line:horizontal {
	background:blue;
	border:2px solid black;
	width:16px;
	subcontrol-position:right;
	subcontrol-origin:margin;
}

/* 左侧控制块 */
QScrollBar::sub-line:horizontal {
	background:magenta;
	border:2px solid black;
	width:16px;
	subcontrol-position:top right;
	subcontrol-origin:margin;
	position:absolute;
	right:20px;
}

/* 控制块上的小箭头 */
QScrollBar::left-arrow:horizontal,QScrollBar::right-arrow:horizontal {
	width:3px;
	height:3px;
	background:pink;
}

/* 滑块左边 */
QScrollBar::add-page:horizontal {
	background:#112233;
}

/* 滑块右边 */
QScrollBar::sub-page:horizontal {
	background:#335F66;
}

3、垂直方向，如图

QScrollBar:vertical {
	border:2px solid red;
	background:#32CC99;
	width:15px;
	margin:22 0 22 0px;
}

/* 滑块设置 */
QScrollBar::handle:vertical {
	background:white;
	min-height:20px;
}

/* 底部控制块 */
QScrollBar::add-line:vertical {
	border:2px solid grey;
	background:#453D89;
	height:20px;
	subcontrol-position:bottom;
	subcontrol-origin:margin;
}

/* 顶部控制块 */
QScrollBar::sub-line:vertical {
	border:2px solid blue;
	background:#FD5647;
	height:20px;
	subcontrol-position:top;
	subcontrol-origin:margin;
}

/* 控制块上的小箭头 */
QScrollBar::up-arrow:vertical,QScrollBar::down-arrow:vertical {
	border:2px solid grey;
	width:3px;
	height:3px;
	background:white;
}

/* 滑块上边区域 */
QScrollBar::add-page:vertical {
	background:#E5D812;
}

/* 滑块下边区域 */
QScrollBar::sub-page:vertical {
	background:#47F8A96;
}