QSlider 的样式设置_qslider样式_robertkun的博客-CSDN博客
Qslider样式_qslider的多种样式_DayDay_Upppp的博客-CSDN博客
【Qt】QSlider----qss(round handle) 圆形滑块_qslider 圆形滑块_Qyee16的博客-CSDN博客
QT QSlider控件 样式表 渐变色的特殊格式_qslider颜色_陈小宇啊~的博客-CSDN博客
陈小宇的这篇,效果太绝了。
1.
#Form{
background-color: rgb(67, 87, 83);
}
QSlider::groove:horizontal {
border: 1px solid #4A708B;
height:15px;
/*必须有这两句,一句也不能少,不然高度是默认高度。
groove:槽
*/
}
QSlider::sub-page:horizontal {
background-color: rgb(0, 255, 0);
border: 3px solid rgb(255, 85, 0);
height: 15px;
border-radius: 7px;
/*按钮左边*/
}
QSlider::add-page:horizontal {
background: rgb(170, 170, 255);
border: 3px solid rgb(170, 255, 0);
height: 15px;
border-radius: 7px;
/*按钮右边*/
}
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: 15px;
border-radius: 7px;
}/*按钮*/
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: 15px;
}
问题:
放到最左侧或最右侧时,会有破绽。
如何解决呢?
2.
QSlider::groove:horizontal {
border: 1px solid #bbb;
background: white;
height: 10px;
border-radius: 4px;
}
QSlider::sub-page:horizontal {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #66e, stop: 1 #bbf);
background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,
stop: 0 #bbf, stop: 1 #55f);
border: 1px solid #777;
height: 10px;
border-radius: 4px;
}
QSlider::add-page:horizontal {
background: #fff;
border: 1px solid #777;
height: 10px;
border-radius: 4px;
}
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));
border: 1px solid #777;
border-radius:6px;
width: 13px;
margin-top: -2px;
margin-bottom: -2px;
}
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));
border: 1px solid #444;
border-radius: 6px;
}