qt样式表设置widget ,左下角为光源,右下角为阴影,背景色为#F4F5FA,外亮部#FFFFFF,外暗部#E1E3ED,模糊值2
时间: 2024-09-10 15:18:54 浏览: 74
在Qt中,你可以使用QSS(Qt StyleSheet)来精细地控制Widget的样式,包括位置、光照效果和颜色渐变。要实现你描述的效果,可以创建一个`.qss`文件或者直接在代码中设置样式属性。下面是一个示例:
```css
QWidget {
background-color: #F4F5FA; /* 背景色 */
border-radius: 0px; /* 如果需要圆角,自定义边框半径 */
}
/* 左下角光源效果 */
source-atop {
position: absolute;
bottom: 0;
left: 0;
width: 10%; /* 源的位置宽度,可根据需求调整 */
height: 10%; /* 源的高度 */
background-image: linear-gradient(to right top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8)); /* 白色渐变从透明到半透明 */
blur: 2px; /* 模糊值 */
}
/* 右下角阴影效果 */
drop-shadow-right-bottom {
position: absolute;
bottom: 0;
right: 0;
width: 10%; /* 阴影宽度,同样可调整 */
height: 10%;
background-image: linear-gradient(to left bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); /* 黑色渐变从浅灰到深灰 */
opacity: 0.5;
}
/* 外亮部和外暗部的颜色渐变 */
border-radius: 8px; /* 使边缘柔和过渡 */
QFrame {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #FFFFFF, stop: 1 #E1E3ED);
}
```
将这段CSS应用到你的Qt Widget上,可以在窗口加载完成之后通过`setStyleSheet()`方法动态添加,或者在UI的构建阶段将样式链接到对应的对象。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231044901.png)
![-](https://img-home.csdnimg.cn/images/20241231044955.png)
![txt](https://img-home.csdnimg.cn/images/20241231045021.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![docx](https://img-home.csdnimg.cn/images/20241231044901.png)
![doc](https://img-home.csdnimg.cn/images/20241231044833.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![docx](https://img-home.csdnimg.cn/images/20241231044901.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![doc](https://img-home.csdnimg.cn/images/20241231044833.png)