QT-CHECKBOX的美化记录

主要参考：
Qt Style Sheets Examples

官方例程上的原文如下：

QCheckBox {    spacing: 5px;/*复选框文本与勾选框（就是左边的勾选小框框，自己瞎叫的）的距离*/    /*还可以设置一些常用的属性，这里都是设置复选框而不是勾选框的。    font:...    background-color:...    padding:...    */}QCheckBox::indicator {    width: 13px;/*勾选框的大小*/    height: 13px;}/*勾选框未选中时的图像*/QCheckBox::indicator:unchecked {    image: url(:/images/checkbox_unchecked.png);}/*勾选框未选中时有光标停留的图像*/QCheckBox::indicator:unchecked:hover {    image: url(:/images/checkbox_unchecked_hover.png);}/*勾选框未选中被点击的图像*/QCheckBox::indicator:unchecked:pressed {    image: url(:/images/checkbox_unchecked_pressed.png);}/*勾选框选中时的图像*/QCheckBox::indicator:checked {    image: url(:/images/checkbox_checked.png);}/*勾选框选中时有光标停留的图像*/QCheckBox::indicator:checked:hover {    image: url(:/images/checkbox_checked_hover.png);}/*勾选框未选中时被点击的图像*/QCheckBox::indicator:checked:pressed {    image: url(:/images/checkbox_checked_pressed.png);}/*勾选框在未定状态时有光标停留的图像*/QCheckBox::indicator:indeterminate:hover {    image: url(:/images/checkbox_indeterminate_hover.png);}/*勾选框在未定状态时被点击的图像*/QCheckBox::indicator:indeterminate:pressed {    image: url(:/images/checkbox_indeterminate_pressed.png);}

一般图像资源有三个添加选项可选：

• background-image: 保持image原始尺寸
• border-image:这个可以让image随边界自适应放大缩小
• image:保持image原始尺寸，默认是repeat填充空白，要设置norepeat,

image-repeat:repeat-x 图像横向平铺
image-repeat:repeat-y 图像纵向平铺
image-repeat:repeat 图像横向和纵向都平铺
image-repeat:no-repeat 图像不平铺

在添个自己常用到的

QCheckBox::indicator:focus{    border:-10px;/*当用方向按键选中时的情况，上面hover只能是鼠标悬停，这个可以补充下按键的情况*/}QCheckBox::indicator{    position: absolute; //勾选框在QCheckBox的位置方式是绝对还是相对的，如果是relative,那勾选框好像无法随外框大小改变，只有在absolute时，长，宽不指定值就会随之改变    top: 0px;  //勾选框的位置    left: 0px;  //勾选框的位置    color: #758794;    width: 100%;//指定了宽，所在宽不变，高会随外框变化而变    padding: 1px 0 0 0;    margin-xx:勾选框外边距（与外框的距离）    padding-xx:内边距（可以改勾选框大小）}QCheckBox{     spacing:10px;// 文字与勾选框的距离     margin-xx:外边距（外框与实际控件外界的距离）     padding-xx:内边距（与勾选框的距离）}

支持的属性看Supported HTML Subset
更具体的直接看CSS 参考手册

中文CSS教程

http://blog.csdn.net/du_bingbing/article/details/52755789#t8