Properties
边框宽度 / 边框圆角
这些属性用于定义 PLCVisu 中控件的边框样式。
常规行为
要使边框(颜色、圆角或样式)可见,必须设置一个有效的 Border Width(边框宽度)。
如果 Border Width 留空或设置为 0,边框将不会显示,即使已设置颜色或圆角。
注意:即使已经正确设置 Border Width 和 Border Radius,如果边框颜色为白色,也可能看不到边框效果,尤其是在白色背景下的控件中。
建议设置对比度更高的边框颜色(如黑色或深灰色)以确保可见性。
支持的格式与单位
Border Width 和 Border Radius 均支持标准 CSS 语法:
支持的单位:
- 绝对单位:
px、pt、cm、mm、in - 相对单位:
em、ex、rem、% - 关键词(仅限 Border Width):
thin、medium、thick
值格式说明:
- 单值:应用于四个方向(如
4px) - 双值:上下 & 左右(如
4px 1px) - 三值:上,左右,下(如
4px 2px 1px) - 四值:上,右,下,左(如
4px 3px 2px 1px)
具体行为可参考 CSS border-width 和 border-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 | ✔︎ | ✔︎ | ✔︎ | ✔︎ | ✔︎ | – | – | – |
注意:
thin、medium、thick为关键词,不可添加数值前缀(例如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