文档手册

数量 450

添加文章编辑

属性Properties

2024-07-18 17:19:54

Properties

CSS 属性注意

如果未另行说明，则这些属性的行为与 W3C 规范中定义的相同。

方向

direction

显示和可见性

display
visibility - 标准，但也支持 none 被视为 display:none

浮

clear
float

颜色和字体

color
font
font-family
font-size
font-style
font-variant
font-variant-ligatures
font-variant-caps
font-weight
letter-spacing
line-height
baseline-shift
font-rendering-mode :

sub-pixel - 默认模式，字形可以从像素的分数开始;
snap-pixel - 字形从像素边界开始，用于编辑字段以正确显示插入符号;

文本呈现

text-decoration
text-decoration-style
text-decoration-line
text-decoration-color
text-decoration-thickness
text-indent
text-overflow
text-shadow
text-transform
white-space
text-wrap
word-wrap
word-break

tab-size

选择

text-selection-color
text-selection-background-color
text-selection-caret-color
text-selection

尺寸

min-height
min-width
max-height
max-width
height
width
size - 在 Sciter 中，size 是宽度和高度的快捷方式属性，接受一个或两个长度/弯曲值：

size: 100px - width:100px 和 height:100px ;
size: 100px 200px - width:100px 和 height:200px ;

box-sizing - 标准，但也支持 padding-box 价值。

路线

text-align
vertical-align - display：inline 和 display：inline-block 元素的标准，其他元素被视为 content-vertical-align ;
horizontal-align - （Sciter）别名 content-horizontal-align
content-vertical-align - （Sciter）块此元素内的垂直对齐：

top
middle
bottom

content-horizontal-align - （Sciter）块此元素内的水平对齐：

start - 向左或向右，取决于方向;
end - 向右或向左，取决于方向;
left
center
right

背景

background
background-attachment
background-color
background-image
background-position
background-position-top
background-position-left
background-position-right
background-position-bottom
background-repeat
background-offset
background-offset-top
background-offset-left
background-offset-right
background-offset-bottom
background-size
background-width
background-height
background-clip
background-image-frame
background-blend-mode

边界

border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
border-top-right-radius-x
border-top-right-radius-y
border-bottom-right-radius-x
border-bottom-right-radius-y
border-bottom-left-radius-x
border-bottom-left-radius-y
border-top-left-radius-x
border-top-left-radius-y

box-shadow

概述

outline-color
outline-width
outline-style - 接受以下值：

none
solid
dotted
dashed
glow - （特定于 Sciter 的）使用 blur-radius == outline-width 和 spread-radius == outline-offest 绘制框阴影
nwse-hatch - （Sciter 特定）使用 \\\\ 阴影刷进行绘画;
nesw-hatch - （Sciter 特定）使用 //// 阴影刷进行绘画;

outline-offset
outline

过滤器

filter
backdrop-filter

变换

transform
transform-origin
transform-origin-x
transform-origin-y

印刷

page-break-before
page-break-after
page-break-inside

边缘

margin
margin-bottom
margin-left
margin-right
margin-top

hit-margin - 特定于 Sciter 的非视觉边距，可扩展元素的命中框。影响 E：hover 检测元素的位置。

填充

padding
padding-bottom
padding-left
padding-right
padding-top

边框间距

border-spacing
border-spacing-x
border-spacing-y - 标准，但在 Sciter border-spacing 中应用于任何块元素的内容。因此 div { border-spacing:2em } 将在 div 的子项之间留出 2em 的边距。

列表

list-style
list-style-image
list-style-position
list-style-type
list-marker-color
list-marker-size
list-marker-style

溢出

overflow
overflow-x
overflow-y - 标准，但也支持 scroll-indicator 显示不占用空间滚动条的值，就像在手机上一样。

光标

cursor

图像渲染

image-rendering - Image-rendering 属性提供了有关缩放图像的算法的提示。支持以下值之一：

inherit 从父级继承值
auto 双线性或双三次插值
crisp-edges 线性插值
pixelated 最近邻插值
default Crisp-Edges 的别名
optimize-quality Auto 的别名
optimize-speed 像素化的别名

不透明度

opacity

定位

z-index
position
left
right
top
bottom

转换

transition
transition-delay
transition-duration
transition-property
transition-timing-function

动画

animation
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation-play-state

助剂

appearance - Only none value 用于抑制 S 和 <buttons> S 的 <input> 默认渲染
zoom
pointer-events

Sciter 特定属性

内容

content - 在 Sciter 中，可以为任何元素定义内容，而不仅仅是：：after 和：：before

层

layer :

auto - 默认值，无图层;
force - 为元素创建位图缓冲区，用于元素内部具有复杂绘图的情况;
disabled - 禁用缓冲;

content-isolate :

isolate - 默认情况下，样式集的内容不能由用户的样式重新定义;
none - 样式集的内容可以根据用户的样式进行重新定义;

边框形状

border-shape - 声明任意形状的元素。
接受定义形状的 SVG path(m ... z) 值。如果与 overflow:hidden then 组合，则通过该路径剪辑元素的内容。

夹子盒

clip-box 定义使用 overflow：hidden 时裁剪的区域，接受：

default - content-box 或 padding-box，取决于上下文;
content-box
padding-box
border-box
margin-box
hit-margin-box

填充和描边

fill
fill-opacity
fill-rule
stroke
stroke-width
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-dasharray
stroke-dashoffset
stroke-opacity
stop-color
stop-opacity
marker
marker-start
marker-mid
marker-end
这些是标准的 SVG 属性，但在 Sciter 中，它们适用于任何元素的矢量图像：
```
 button {
 background: path(m 0 0 ... z) no-repeat;
 fill:red;
 stroke: blue;
 }
```

流程 - 布局管理器

flow - 请参阅 Flows and Flexes。
flow-rows
flow-columns

滚动

scroll-manner
scroll-manner-x
scroll-manner-y 使用以下 prop/value 参数接受 scroll-manner(prop1:val1[, ...propN:valN]) ：

animation:true|false - 开/关动画滚动;
step: <length> - 前进一个滚动步骤（单击滚动条上的下一个/上一个按钮）;
page: <length> - 提前一页滚动页;
wheel-step: <length> - 提前点击鼠标滚轮;

行为和组件支持

behavior ： <name-of-native-behavior> 查看行为

prototype
aspect - 参见 DOM 组件和方面

前景

foreground
foreground-attachment
foreground-image
foreground-position
foreground-position-top
foreground-position-left
foreground-position-right
foreground-position-bottom
foreground-repeat
foreground-size
foreground-width
foreground-height
foreground-clip
foreground-image-frame
foreground-image-cursor
foreground-blend-mode
Sciter 中的元素可能定义了前景图像，该图像被精确定义为背景图像，但呈现在内容之上;
foreground-color
在某些情况下，您可以通过定义 semitransparent foreground-color: rgba(255,0,0,0.5) 来突出显示元素。该前景色图层将绘制在元素的背景和内容之上;

角色

role - 字符串，定义元素的角色，例如 tr {role : "option"} 将允许可选择的表行作为选择中的选项;

图像转换

background-image-transformation
foreground-image-transformation - 各种图像转换方法的空格分隔列表

contrast(0 ... 1.0)
brightness(0 ... 1.0)
gamma(0 ... 4.0)
hue(0..360deg)
saturation(0 ... 1.0)
opacity(0 ... 1.0)
flip-x() - 水平翻转图像;
flip-y() - 垂直翻转图像;

滚动条样式

vertical-scrollbar
horizontal-scrollbar
这些属性接受定义滚动条外观的样式集的名称，请参阅滚动条样式。
overscroll-behavior
overscroll-behavior-x
overscroll-behavior-y
这些属性定义当可滚动到达滚动区域的边界时会发生什么：

auto - 触摸滚动执行回滚动画，鼠标滚轮滚动 - 无翻滚;
contain - 带有回滚动画的滚动;
none - 完全没有卷轴;

context-menu 接受以下任一内容：

selector(...) 定义将用作上下文菜单的菜单元素的选择器，或者
url(...) 定义 <menu> 元素的部分 HTML 的 url;

样式集

style-set - 请参阅样式集

映射，RTL 支持

mapping - 接受函数 left-to-right(part1 , ... partN ) ，其中零件为：

margin - 交换左右边距;
border - 交换左右边框;
background - 交换左右背景道具和图像;
background-image - 水平镜像图像;
background-position - 交换左右背景图像位置;
foreground - 交换左右前景道具和图像;
layout - 在 LTR 和 RTL 之间交换方向;
alignment - 将文本对齐方式从左更改为右;

popup-position : <popup-reference-point> <anchor-reference-point>
popup-anchor-reference-point
popup-reference-point - 这两个接受命名的参考点值：

top-left
top-center
top-right
middle-left
middle-center
middle-right
bottom-left
bottom-center
bottom-right

popup-animation ： popup-animation(param:value, ...) 其中参数为：

类型：其中之一 blend | inflate | slide | roll - 窗口外观动画的类型;
轴： one of horizontal | vertical ;
标题：其中之一 start-to-end | end-to-start ;
持续时间：动画的持续时间，例如; 100ms

文档手册

属性Properties

CSS 属性 注意

方向

显示和可见性

浮

颜色和字体

文本呈现

选择

尺寸

路线

背景

边界

概述

过滤 器

变换

印刷

边缘

填充

边框间距

列表

溢出

光标

图像渲染

不透明度

定位

转换

动画

助剂

Sciter 特定属性

内容

层

边框形状

夹子盒

填充和描边

流程 - 布局管理器

滚动

行为和组件支持

前景

角色

图像转换

滚动条样式

上下文菜单

样式集

映射，RTL 支持

弹窗位置：

弹出动画：

CSS 属性注意

过滤器