QT之QSS美化界面（附源码）

QSS之美化界面（附源码）

1、文本颜色
2、背景颜色
3、边框样式、宽度、颜色
4、圆角半径
5、自适应、布局

界面展示

1、粉红色

2、黄绿色

3、浅紫色

控件的状态：

:hover：鼠标悬停时的样式 ，简单的来说就是切换一张小图一张大图（qq、微信、微博等控件）


图片资源：

:pressed：鼠标按下时的样式 （以下样式可以自己下载源码测试）
:checked：复选框、单选按钮等被选中时的样式
:disabled：控件被禁用时的样式
:focus：控件获得焦点时的样式
:active：控件处于激活状态时的样式
:selected：控件处于选中状态时的样式

样式属性

颜色相关属性
color：文本颜色
background-color：背景颜色
border：边框样式、宽度、颜色
border-radius：圆角半径
尺寸和位置相关属性
width：宽度
height：高度
padding：内边距
margin：外边距
min-width / max-width：最小/最大宽度
min-height / max-height：最小/最大高度
字体相关属性
font-family：字体族
font-size：字体大小
font-weight：字体粗细
font-style：字体样式（如斜体）
背景和边框相关属性
background-image：背景图片
background-repeat：背景图片重复方式
border-image：边框图片
border-style：边框样式（如实线、虚线）
border-width：边框宽度
border-color：边框颜色
其他属性
text-align：文本对齐方式
vertical-align：垂直对齐方式
qproperty-alignment：对齐方式
qproperty-icon：图标
qproperty-iconSize：图标大小

粉红色界面QSS

/**
    该页面为粉红色皮肤
*/


/*背景*/
#frame_background{
border-image:url(:/res/pic/background-1.png);
}

/*登录背景*/
#frame_login{background-color:#ffffff}

/*右侧图片*/
#frame_pic{
    background-image:url(:/res/pic/1.png);

}
/*账户和密码框*/
#frame_user_name,#frame_pwd{
    border: 1px solid #696969;
    border-radius: 5px;
}

QLineEdit{
    border: none;
}


/*按钮-忘记密码*/
#btn_forget{
    border:none;
    color:#e83737;
}

/*按钮-忘记密码-鼠标悬停*/
#btn_forget:hover{
    border:none;
    color:#e83737;
}

/*按钮-登录*/
#btn_login{
    color:#ffffff;
    border: none;
    background-color:#fd6c92;
    border-radius: 5px;
}
/*按钮-登录-鼠标悬停*/
#btn_login:hover{
    color:#ffffff;
    border: none;
    background-color:#fd4979;
    border-radius: 5px;
}
/*按钮-登录-鼠标按下*/
#btn_login:pressed{
    color:#ffffff;
    border: none;
    background-color:#fd6c92;
    border-radius: 5px;
}
/*label-login*/
#label_login
{
    color:#e83737;

}
/*图标-账户*/
#label_user_name
{
    border-image:url(:/res/pic/user_name.png);
}
/*图标-密码*/
#label_pwd
{
    border-image:url(:/res/pic/pwd.png);

}
/*按钮-qq*/
#btn_qq{
    background-image:url(:/res/pic/qq.png);
    background-position:center;
    background-repeat:no-repeat;
    border:none;
}
/*按钮-qq-鼠标悬停*/
#btn_qq:hover{
    background-image:url(:/res/pic/qq-hover.png);
    background-position:center;
    background-repeat:no-repeat;
    border:none;
}
/*按钮-微信*/
#btn_wx{
    background-image:url(:/res/pic/wx.png);
    background-position:center;
    background-repeat:no-repeat;
    border:none;
}
/*按钮-微信-鼠标悬停*/
#btn_wx:hover{
    background-image:url(:/res/pic/wx-hover.png);
    background-position:center;
    background-repeat:no-repeat;
    border:none;
}
/*按钮-微博-*/
#btn_wb{
    background-image:url(:/res/pic/wb.png);
    background-position:center;
    background-repeat:no-repeat;
    border:none;
}
/*按钮-微博-鼠标悬停*/
#btn_wb:hover{
    background-image:url(:/res/pic/wb-hover.png);
    background-position:center;
    background-repeat:no-repeat;
    border:none;
}

/*按钮-粉红*/
#btn_1{
color:#e83737;
background-color:#ffffff;
border:none;
border-radius: 10px;
}
/*按钮-黄绿*/
#btn_2{
color:#d7b105;
background-color:#ffffff;
border:none;
border-radius: 10px;
}
/*按钮-浅紫*/
#btn_3{
color:#7185ff;
background-color:#ffffff;
border:none;
border-radius: 10px;
}
/*按钮-青绿*/
#btn_4{
color:#7bb7a5;
background-color:#ffffff;
border:none;
border-radius: 10px;
}

### qss颜色说明
粉红：style-1.qss
黄绿：style-2.qss
浅紫：style-3.qss
青蓝：style-4.qss