十一月 1

QSS之声明

盒子模型

控件可以分为:margin,border,padding和content四部分。这个模型成为盒子模型。值得注意的是,resize控制的是整个盒子模型的尺寸。

border边框设置

边框。可以设置的项目包括宽度,样式和颜色。可以在border中统一进行设置

border-width边框宽度

可以传入一个值,表示各边设置成同样的宽度,也可以传入两个值,分别为上下,和左右,还可以传入四个值,分别为上右下左。需要写上单位,例如px

border-top-width等

单独设置某一侧的边框宽度。如上面的例子

border-style边框样式。

可以传入一个值,表示各边设置成同样的样式,也可以可以传入四个值,分别是上右下左边框设置

border-top-style等

单独设置某一侧的边框样式。如上面的例子

可以设置的样式举例

  • none
  • dotted
  • solid
  • dashed
  • double
  • ...

    border-color边框颜色

    可以传入一个值,表示各边设置成同样的颜色,也可以传入两个值,分别为上下,和左右,还可以传入四个值,分别为上右下左。需要写上单位,例如px

    border-top-color等

    单独设置某一侧的边框颜色。如上面的例子

    可以设置的颜色举例

  • red
  • rgb(100,100,100)
  • 00ff00

  • 渐变颜色

    border-image

    用一张图片设置边框示

    border-width: 30px
    border-image: url(../source/border_image.png) 30px 30px 30px 30px stretch;

    margin外边距设置

    可以传入一个值,表示各边设置成同样的外边距,也可以可以传入四个值,分别是上右下左外边距设置

    margin-left

    左边距,类似的有左右上下的边距

    padding内边距设置

    可以传入一个值,表示各边设置成同样的内边距,也可以可以传入四个值,分别是上右下左内边距设置

    padding-left

    左边距,类似的有左右上下的边距

    background背景

    可统一设置多个值。类似border属性的统一设置

    background-color

    背景颜色

    background-image

    背景图片

    background-repeat

    背景图片是否重复

  • no-repeat
  • repeat-x
  • repeat-y
  • repeat-xy(默认)

    background-position

    图片放置位置

  • top
  • bottom
  • left
  • right

    background-origin

    参照位置

  • padding(默认)
  • border
  • margin
  • content

    background-clip

    裁剪策略

  • padding(默认)
  • border
  • margin
  • content

    background-attachment

    背景是否随着内容移动

  • scroll
  • fixed

    字体 font

  • 字体家族 font-family
  • 字体尺寸 font-size
  • 字体样式 font-style
  • 字体权重(加粗)font-weight
  • 颜色 color

    设置最大最小尺寸

  • 最小宽度 min-width
  • 最小高度 min-height
  • 最大宽度 max-width
  • 最大高度 max-height

    前景图片 image

    子控件相对父控件位置

  • subcontrol-origin
  • subcontrol-position
  • position: relative 和 position: absolute
  • 位置微调 top,bottom,left,right


文章由安静原创,发表于www.ajnote.com。转载请注明出处

发表 2020年11月1日 自 anjing 类别 "Pyside2学习笔记

发表评论

电子邮件地址不会被公开。 必填项已用*标注