Properties

边框宽度 / 边框圆角

这些属性用于定义 PLCVisu 中控件的边框样式。

常规行为

要使边框(颜色、圆角或样式)可见,必须设置一个有效的 Border Width(边框宽度)
如果 Border Width 留空或设置为 0边框将不会显示,即使已设置颜色或圆角。

注意:即使已经正确设置 Border WidthBorder Radius,如果边框颜色为白色也可能看不到边框效果,尤其是在白色背景下的控件中。
建议设置对比度更高的边框颜色(如黑色或深灰色)以确保可见性。

支持的格式与单位

Border WidthBorder Radius 均支持标准 CSS 语法:

支持的单位:

  • 绝对单位pxptcmmmin
  • 相对单位emexrem%
  • 关键词(仅限 Border Width)thinmediumthick

值格式说明:

  • 单值:应用于四个方向(如 4px
  • 双值:上下 & 左右(如 4px 1px
  • 三值:上,左右,下(如 4px 2px 1px
  • 四值:上,右,下,左(如 4px 3px 2px 1px

具体行为可参考 CSS border-widthborder-radius,前提是控件本身支持。

⚠️ 使用 % 作为 Border Radius 时效果依赖控件形状,对于非正方形控件应谨慎使用。

示例

Border Width: 2px 0px 2px 0px
Border Radius: 0.5em

表示:

  • 上下边框宽度为 2px,左右无边框
  • 圆角大小根据字体大小 (em) 缩放

渲染说明

  • 请确保 Border Color(边框颜色) 设置为可见颜色(避免白底白边)。
  • 若设置了边框宽度但未指定颜色,将使用默认颜色(通常为白色或主题色)
  • 边框样式(如 solid、dashed)通过全局样式或 CSS 类控制,不能直接在此字段中设置。

已确认支持的格式表

值类型 px em ex rem % thin medium thick
Border Width ✔︎ ✔︎ ✔︎ ✔︎ ✔︎ ✔︎ ✔︎
Border Radius ✔︎ ✔︎ ✔︎ ✔︎ ✔︎

注意: thinmediumthick 为关键词,不可添加数值前缀(例如 3thin 是无效的)。

3thin
thick
medium
thin
Border Color(边框颜色)
em
Border Width: 2px 0px 2px 0px Border Radius: 0.5em
Border Radius
%
4px 3px 2px 1px
4px 2px 1px
4px 1px
4px
thick
medium
thin
%
rem
ex
em
in
mm
cm
pt
px
Border Radius
Border Width
Border Radius
Border Width
0
Border Width