当前位置: 首页 > article >正文

基于深度学习的视觉检测小项目(十二) 使用线条边框和渐变颜色美化界面

         到目前为止,已经建立起了基本的项目架构,样式表体系也初步具备,但是与成品的界面相比,还是差点什么。

我的界面效果图:

优秀demo的界面截图:

是的,我的界面太“平” 了,没有立体感,没有质感。

放大后的局部:

可以看到,专业的ui界面,大量使用了修饰线条和颜色渐变。

所以,这期了解一下修饰线条和颜色渐变的应用。

渐变的基础知识:Qt 的线性渐变的类QLinearGradient 学习笔记-CSDN博客,以及

Qt 的径向渐变的类QRadialGradient 学习笔记-CSDN博客

• 画面中不同的部件的交界处可以使用两条高反差的线来产生立体感

#form_top {
	border-bottom: 4px solid #000000;	
	background-color: #1c1c1c;
}
#form_top QLabel{
	color:#b6b6b6;
}
#form_main{
	border-top: 1px solid #464646;	
	background-color: #282828;
}

        上面的样式表设置中,顶部方框(form_top)的下边(border_bottom)用了#000000的黑色线条,而下部的form_main用了#464646的对比色作为上边(border_top),这样就在分界处产生了立体感。

显示效果:

• 使用渐变的方法来定义部件的分界线以及背景色,产生局部的立体感

以按钮为例:

将按钮的样式表定义为:

QPushButton{
border: 3px solid #000000;	
color:#adadad;
border-top: 4px solid qlineargradient(x1: 1, y1: 0, x2: 1, y2: 1, stop: 0 #000000, stop: 1 #454545);

background-color: qlineargradient(x1: 1, y1: 0, x2: 1, y2: 1, stop: 0 #2d2d2d, stop: 1 #000000);

}

 效果图:

        由于能够找到的范例并不多,以上只是我作为一个业余编程爱好者的一些粗鄙探索,也算是抛砖引玉,期望与各位同学多多交流。


http://www.kler.cn/a/501892.html

相关文章:

  • QT Quick QML 实例之椭圆投影,旋转
  • TensorFlow Quantum快速编程(基本篇)
  • 【ROS2】☆ launch之Python
  • 硬件设计-七位半电压表硬件方案(下)
  • HTML和CSS相关的问题,为什么页面加载速度慢?
  • vue使用自动化导入api插件unplugin-auto-import,避免频繁手动导入
  • JSON转EXCEL
  • 《零基础Go语言算法实战》【题目 2-27】goroutine 的使用问题
  • MPLS原理及配置
  • 【SpringBoot】用一个常见错误说一下@RequestParam属性
  • 解锁“搭子小程序”开发新机遇,助力企业数字化转型
  • 【SH】Xiaomi9刷Windows10系统研发记录 、手机刷Windows系统教程、小米9重装win10系统
  • HTML实战课堂之简单的拜年程序
  • 4G、5G移远模块SIM卡热插拔问题解决
  • 10.Linux 时间
  • 一文讲解常见API开发工具
  • 【机器学习:十、神经网络概述】
  • 1. 初识Scala
  • 一 rk3568 Android 11固件开发环境搭建 (docker)
  • NAT 代理服务器
  • 【芯片设计- RTL 数字逻辑设计入门 9.2 -- flip flop 与 寄存器的关系详细介绍】
  • 【LeetCode】力扣刷题热题100道(26-30题)附源码 轮转数组 乘积 矩阵 螺旋矩阵 旋转图像(C++)
  • 项目实战--网页五子棋(用户模块)(1)
  • 支持selenium的chrome driver更新到131.0.6778.264
  • JDK8新特性详解
  • mermaid大全(语法、流程图、时序图、甘特图、饼图、用户旅行图、类图)