0 背景

因为需要对图片进行裁剪，需要进行上下左右裁剪，而QSpinBox只能进行上下调动，不是十分方便，因此上网查阅资料，发现可以改变qss样式，来改变按钮原始的样式。

1 结果展示

原始样式

更改qss样式后，

2 操作

打开ui设计界面，然后右键打开，选择改变样式表

输入下面的样式：

QTimeEdit::up-button,QDoubleSpinBox::up-button,QSpinBox::up-button {
	subcontrol-origin:border;
    subcontrol-position:right;
 	image: url(:/icon/add_right.png);
    width: 12px;
    height: 20px;       
}
QTimeEdit::down-button,QDoubleSpinBox::down-button,QSpinBox::down-button {
	subcontrol-origin:border;
    subcontrol-position:left;
 	image: url(:/icon/add_left.png);
    width: 12px;
    height: 20px;
}

为了实现减下加，可以更改为如下样式:

QTimeEdit::up-button,QDoubleSpinBox::up-button,QSpinBox::up-button {subcontrol-origin:border;
    subcontrol-position:right top;  
    image: url(:/icon/add_top.png);  
    width: 12px;
    height: 24px;
}


QTimeEdit::down-button,QDoubleSpinBox::down-button,QSpinBox::down-button {subcontrol-origin:border;
    subcontrol-position:right bottom;
    border-image: url(:/icon/add_bottom.png);
    width: 12px;
    height: 20px;      
}

3 知识详解

• subcontrol-origin(操作位置）：空白(margin)、边框(border)、填充(padding)和内容(content)。
  

• Subcontrol-Position（控制位置）：
  不同按钮的Subcontrol-Position默认值不同，如QSpinBox的 up-button 的默认值是 right top。

subcontrol-position 水平方向：
left
center
right

subcontrol-position 垂直方向：
top
center
bottom

• image(使用的图片):【图片地址】

• width,height（宽高，单位为像素）