QSS美化

最新推荐文章于 2025-05-02 15:45:01 发布

转载最新推荐文章于 2025-05-02 15:45:01 发布

· 692 阅读

版权

原文链接：https://blog.youkuaiyun.com/pingis58/article/details/85161238?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158617377219195162528404%2522%252C%2522scm%2522%253A%252220140713.130056874..%2522%257D&request_id=158617377219195162528404&biz_id=0&utm_source

PYQT 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Qt中QSS（Qt样式表）的使用方法，包括基础概念、加载方式、盒子模型、选择器、Border-Image特性和子控件样式。重点解析了Border-Image属性的复合写法，包括图片、剪裁位置、重复性、边框背景宽度和边框背景扩散的概念及应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

摘自：https://qtdebug.com/qtbook-qss/

Qt 提供的 widget 的默认外观很多时候都不符合项目的界面需求，必须要改，修改一个 widget 的外观（Look and Feel）有以下的方法：

继承 Widget，然后在 paintEvent() 里绘制
继承 QStyle
使用 QSS（Qt Style Sheet）
对于 item view 来说还有一种方式，还可以使用 Delegate

这几种方式里最简单灵活的是使用 QSS，虽然有人说 QSS 的效率低，具体有多低没测试过，但是在普通 PC 上从来没感觉出来，再说现在的硬件也不差这么点性能消耗，随便一个写的差点的函数的消耗就比这多的多，作为一个实用主义者，不追求理论上的效率完美，能满足需求的前提下什么好用用什么，QSS 就是修改 widget 外观的首选，什么效果不满意，修改一下 QSS 的文件就可以看到效果，甚至不需要重新编译、打包发布程序（如果把 QSS 放在文件中，并且实现动态加载 QSS）。

我们按下面的章节来介绍 QSS:

border-image用于给border（边框）贴上背景图像

类似于CSS中的background（背景）属性。例如：background:url(xx.jpg) 27px no-repeat;指的是图片(url(xx.jpg))，位置(27px)，重复性(no-repeat)。

border-image与此类似，border-image包括图片，剪裁位置（与background位置一样，也是数值，也支持百分值），重复性。
例如：border-image:url(border.png) 27 repeat; 指的就是图片(url(border.png))，剪裁位置(27)，重复方式(repeat)。
图片描述


 
 
   
   
    
    
   
   
   
   
    
    
     
     下面我们将border-image的复合写法分解描述，
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     border-image的主要参数就是上面提到的三个：图片，剪裁位置，重复性。
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     其实还有另外两个，文章最后面再讲。更好理解

1、图片(border-image-source)

border-image的背景图使用url()调用，图片可以是相对路径或是绝对路径，也可以不使用图片，即border-image:none;

2、图片剪裁位置(border-image-slice)

没有单位，默认单位就是像素(px)。例如：border-image:url(border.png) 27 repeat;这里的27专指27px。

支持百分比值，百分比值大小是相对于边框图片的大小，假设边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。

剪裁特性。类似于CSS中的clip属性。其有1~4个参数，代表上右下左四个方位的剪裁，符合CSS普遍的方位规则（与margin，padding等或border-width一致），举个简单的例子，前面提到，支持百分比宽度，所以这里“30% 35% 40% 30%”的示意可以用下图表示：

距离图片上部30%的地方，距离右边35%，距离底部40%，左边30%的地方各剪裁一下。也就是对图片进行了“四刀切”，形成了九个分离的区域，这就是九宫格，这是下面深入讲解border-image的基础。

3、重复性(border-image-repeat)

取值为repeat（重复）只是其中之一，其余两个是round（平铺）和stretch（拉伸）。其中，stretch是默认值。

参数0~2个，0则使用默认值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;；1则表示水平方向及垂直方向均使用此参数；2个参数的话则第一个参数表水平方向，第二个参数表示垂直方向。例如：border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平铺），垂直方向repeat（重复）。

关于round 和repeat 的区别。
round会凑整填充（进行了适度的拉伸）。repeat不进行拉伸，不凑整。 具体效果看文章后边的例子。

4、实际渲染规则

通过裁切属性值，将边框背景图切出了“九宫格”的模型，那这张背景图怎么对应地贴在div的边框上呢？

<————————> 图片描述

图片描述

如图在border-image中的橙红色的四个边角只会呆在border的四个角,并且水平和垂直方向均被拉伸来填充border的四个角。
如图上下区域即border-top-image和border-bottom-image受到第一个参数——水平方向效果影响：如果为repeat，则此区域被水平重复(round水平平铺，stretch水平拉伸)来填充对应的上下border【该区域在垂直方向上首先会按所对应的border-image-width的值等比缩放，然后再按参数设置在边框水平方向上进行重复或平铺或拉伸】
左右区域border-left-image和border-right-image 的作用效果亦然【该区域在水平方向上首先会按所对应的border-image-width的值等比缩放，然后再按参数设置在边框垂直方向上进行重复或平铺或拉伸】

图片描述

我们用下图(27×3)px *(27×3)pxpng 做实验，我给不同部位加了一个序号做标志，便于观察。
图片描述


 
 
   
   
    
    
   
   
   
   
    
        
     
     // 加一个蓝色背景的父级，便于我们分析效果。
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         .border_image {
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     width: 
     
     400px;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             height: 
     
     115px;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             border: 
     
     3em double orange;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             -webkit-border-image: url(border.png) 
     
     27 round;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             border-image: url(border.png) 
     
     27 round;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         .box {
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     background: blue;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         }
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <div 
     
     class=
     
     "box">
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     <div class="border_image"></div>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <
     
     /div>

效果如下


 
 
   
   
    
    
   
   
   
   
    
       
     
     //去掉重复属性，即默认都为stretch
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
        border-image: url(border.png) 
     
     27;

效果如下


 
 
   
   
    
    
   
   
   
   
    
      
     
     //使用repeat
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
       border-image: url(border.png) 
     
     27 
     
     repeat;

效果如下


 
 
   
   
    
    
   
   
   
   
    
        
     
     //边框宽度改变
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         border-image: url(border.png) 
     
     27 
     
     repeat stretch;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         border-width: 3rem 1rem;

效果如下

5、(边框背景宽度)border-image-width


 
 
   
   
    
    
   
   
   
   
    
    
     
     这个属性默认是边框的宽度，用来限制相应区域背景图的范围，
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     首先相应背景区域的图像会根据这个属性值进行缩放。然后再重复或平铺或拉伸。
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     在复合写法中应该位于 slice属性 和
     
     repeat属性中间 用“/”间隔
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     如：border-image:url(border.png) 
     
     27 / 6rem / 
     
     repeat;

语法：border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}


  
  
    
    
     
     
    
    
    
    
     
     
      
      length 带 px, em, 
      
      in … 单位的尺寸值
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      percentage 百分比
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      number 不带单位的数字；它表示 border-width 的倍数
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      auto 使用 
      
      auto， border-image-width 将会使用 border-image-slice 的值


 
 
   
   
    
    
   
   
   
   
    
    
     
         border: 
     
     3em double orange;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         border-image: url(border.png) 
     
     27 
     
     round;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         border-image-width: 
     
     6
     
     rem;

效果如下
（白框为border）
图片描述

    border-image-width: 1.5rem;

效果如下
（白框为border）
图片描述


 
 
   
   
    
    
   
   
   
   
    
    
     
         border: 
     
     3em double orange;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         border-image: url(border.png) 
     
     27 
     
     round;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         border-image-width: 
     
     6
     
     rem 
     
     1.5
     
     rem;

效果如下
（白框为border）
图片描述

6、（边框背景扩散）border-image-outset


 
 
   
   
    
    
   
   
   
   
    
    
     
     语法：border-image-outset: [ <length> | <number> ]{
     
     1,
     
     4}
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     相当于把原来的贴图位置向外延伸。不能为负值，试一下就知道。
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     在复合写法中应该位于 border-image-width 后面，用“/”间隔
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     如：border-image:url(border.png) 
     
     27 / 
     
     6
     
     rem / 
     
     1.5
     
     rem /repeat;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     向外延伸
     
     1.5
     
     rem再贴图。。


 
 
   
   
    
    
   
   
   
   
    
        
     
     border: 3
     
     em 
     
     double 
     
     orange;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     border-image: 
     
     url(
     
     border
     
     .png) 27 
     
     round;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     border-image-width: 1
     
     .5rem;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     border-image-outset: 1
     
     .5rem;