当前位置: 首页 > 工具软件 > QRadioButton > 使用案例 >

QRadioButton样式表

阙博容
2023-12-01

//样式基本格式

QRadioButton{

font-family: "Microsoft YaHei";//字体类型

font-size: 25px;//字体大小,像素

color: #bdc8e2//字体颜色

outline:0px;//去掉焦点虚线框

border:3px solid red //外边框

min-width:30px;//尺寸

min-height:30px;

background-color:rgba(r,g,b,a);//值transparent为透明

}

//设置字体样式

font-family: "Microsoft YaHei";//字体类型

font-size: 25px;//字体大小,像素

font-style: italic;//字体斜体样式,mormal不斜体

font-weight:bold;//字体加粗样式,mormal不加粗

color: #bdc8e2//字体颜色

 

font: bold italic 18px "Microsoft YaHei";//顺序要求:style weight size family 或者 weight style  size family

 

//文字位置

Spacing:5px;//选择框和文字之间的距离(水平)

padding-left: 10px;距离左边边界的距离(包括选择框)

padding-top: 10px;距离顶边边界的距离(包括选择框)

padding-right: 10px;距离右边边界的距离(包括选择框)

padding-bottom: 10px;距离底边边界的距离(包括选择框)

 

//边框样式

border-style: solid;//边框样式,实线:solid ;虚线:dashed; 点线:dotted;

不显示(默认):none;

border-width: 2px;

border-color: red;

border:2px,solid red;//同时设置

//某一条边框(其他三个边框: right,bottom,left)

border-top-style:solid;

border-top-width:2px;

border-top-color:red;

 

//圆角

border-top-left-radius:20px;//左上角弧度

border-top-right-radius:20px;//右上角弧度

border-bottom-left-radius:20px;//左下角弧度

border-bottom-right-radius:20px;//右下角弧度

 

bordet-radius:20px;//同时设置4个角的弧度

 

//背景样式

background-color:rgba(r,g,b,a);//值transparent为透明

background-image:url(".png");//背景图片

background-repeat:no-repeat;//在x轴重复:repeat-x; 在y轴重复:repeat-y

background-position:left center;//图片显示位置:left,right,center,top,bottom;

 

background: url(".png") no-repeat left center #2e3648;//顺序任意

 

//动态样式(不存在pressed样式)

//鼠标悬浮

QRadioButton:hover{

color:

}

//按钮禁止

QRadioButton:disabled{

color:

}

//鼠标点击

QRadioButton:disabled{

color:

}

 

//单选框

QRadioButton::indicator{

width:32px;

height:18px;

image: url(./image1.png);

position:relative;//通过该参数可以修改图片位置:left,right…

left:0px;

right:0px;

top:0px;

bottom:0px;

}

//单选框动态样式

QRadioButton::indicator:hover{

Image:url(./image2.png);

}

QRadioButton::indicator:pressed{

Image:url(./image2.png);

}

//根据是否选中状态的动态样式(unchecked和没有添加任何状态时的样式是相同)

QRadioButton::indicator: unchecked{

Image:url(./image2.png);

}

QRadioButton::indicator:unchecked:hover{

Image:url(./image2.png);

}

QRadioButton::indicator:unchecked: pressed{

Image:url(./image2.png);

}

QRadioButton::indicator: checked{

Image:url(./image2.png);

}

QRadioButton::indicator: checked:hover{

Image:url(./image2.png);

}

QRadioButton::indicator: checked: pressed{

Image:url(./image2.png);

}

 

 

 类似资料: