属性

:::tips font-style 表示该属性支持，但和Web存在差距。
box-shadow 表示该属性暂不支持 :::

定位相关属性

共 6 个，其中 1 个可能与 web 中表现会有差异。

position

• 属性值：[ relative、absolute、fixed ]
• 默认值：relative

top、left、bottom、right

• 属性值：<±number>[ px | rpx | vw | vh | % ]
• 默认值：

z-indexP

• 属性值：<±number>
• 默认值：
• 说明：可能在某些情况下 z-index 的表现与 web 中会有差异

文本相关属性

共 10 个，其中 1 个与 web 中表现存在点差异，有 1 个是 cube 中的私有属性。

font-size

• 属性值：[ px | rpx | vw | vh ]
• 默认值：

text-align

• 属性值：[ left | center | right ]
• 默认值：left

font-weight

• 属性值：[ normal | bold | lighter | bolder | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ]
• 默认值：normal

font-family

• 属性值：字体名称
• 默认值：系统默认字体

text-overflow

• 属性值：[ clip | ellipsis ]
• 默认值：clip

text-decoration

• 属性值：[ underline | line-through | none ]
• 默认值：none

line-height

• 属性值：[ normal | <±number>[ 无单位 | px | rpx | vw | vh | % ] ]
• 默认值：normal

font-style

• 属性值：[normal | italic]
• 默认值：normal

text-shadow P

• 属性值：[ none | $x $y $blur-radius $color ]
• 默认值：none
• 相关说明：
  • $x 是指 x 坐标的偏移量；
  • $y 是指 y 坐标的偏移量；
  • $blur-radius 阴影的模糊扩散量；
  • $color 阴影的颜色值；
  • 至少需要 $x 和 $y 两个值， $blur-radius 默认是 0 ， $color 默认是文本颜色；
  • 有且只有存在一组，不能像 web 中使用多组文本阴影；
  • 如果 $x 和 $y 的值较大，可能会出现文本阴影被截断的情况；

max-lines

• 属性值：
• 默认值：0
• 相关说明：
  • max-lines 是 waft 中独有的属性，用于显示文本的行数；
  • 默认值为 0，不限制行数，如 max-lines: 1; 的话，只显示一行文本；
  • 只在 text 文本组件生效, 其他组件不生效;

变形相关属性

共 2 个，这 2 个与 web 中表现有所差异。

transform P

• 属性值：[ martix() | rotate() | rotateX() | rotateY() | translate() | translateX() | translateY() | scale() | scaleX() | scaleY() | none ]
• 默认值： none
• 相关说明：不支持 3d 相关的变化，不支持 skew() 倾斜；

transform-origin P

• 属性值：<[ left | center | right | (top | bottom)] | [number[ px | rpx | vw | vh | % ]]> | 属性值：<[ top | center | bottom] | [number[ px | rpx | vw | vh | % ]]>
• 默认值：center
• 说明：
  • 如果仅有一个值时，可以为 left、center、right、top、bottom 任意一个值，或者数值+单位的形式；
  • 如果是两个值：第一个值为 left、center、right，第二值为 top、center、bottom，或者是数值+单位
  • 但目前暂不支持 left、right、top、bottom、center 与 center 的结合，可以考虑使用 50% 的方式；

过渡相关属性

共 5 个。 transition 相关的属性有且仅有一组，无法通过 , 隔开形成多组过渡效果；

transition

• 属性值： transition-property transition-duration transition-delay transition-timing-function
• 说明： transition-* 相关属性的简写

transition-propery

• 属性值：[ all | transform | opacity | background-color ]

transition-duration

• 属性值：[ ms | s ]

transition-delay

• 属性值：[ ms | s ]

transition-timing-function

• 属性值：[ ease | ease-in | ease-out | ease-in-out | linear | cubic-bezier() ]
• 默认值：ease

flex 弹性布局相关属性

共 10 个，其中有 1 个与 web 中存在点差异。

align-items

• 属性值：[ flex-start | flex-end | center | baseline | stretch ]
• 默认值：

justify-content

• 属性值：[ flex-start | flex-end | center | space-around | space-between ]
• 默认值：

flex-direction

• 属性值：[ row | row-reverse | column | column-reverse ]
• 默认值：row

flex

• 属性值：[ flex-grow | flex-shrink | flex-basis ]

flex-grow

• 属性值：
• 默认值：0

flex-shrink

• 属性值：
• 默认值：1

flex-basis P

• 属性值：[ auto | [ px | rpx | vw | vh | % ] ]
• 默认值：auto
• 说明：可能在 flex 简写的情况下，会无效，如无效可结合 width 代替使用；

flex-wrap

• 属性值：[ nowrap | wrap | wrap-reverse ]
• 默认值：nowrap

align-self

• 属性值：[ flex-start | flex-end | cener | baseline | stretch ]
• 默认值：

align-content

• 属性值：[ flex-start | flex-end | center | space-around | space-between ]
• 默认值：

边框相关属性

共 25 个，其中有 5 个跟 web 中存在差异。

border-radius P

• 属性值：[ px | rpx | vw | vh | % ]
• 默认值：0
• 注意: 如果使用 % 与 web 存在差异, web 50% 是一个圆, waft 100% 是一个圆

border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius P

• 属性值：[ px | rpx | vw | vh | % ]
• 默认值：0

border

• 属性值： border-width | border-style | border-color

border-width

• 属性值： border-top-width | border-right-width | border-bottom-width | border-left-width
• 说明：四个方向边框宽度的简写，以顺时针方向展示
  • 一个值：四个边框的值相同；
  • 两个值：分别代表上下、左右的边框值；
  • 三个值：分别代表上、左右、下的边框值；
  • 四个值：分别代表上、右、下、左四个方向的边框值；

border-*-width

• 属性值：[ px | rpx | vw | vh ]

border-color

• 属性值： border-top-color | border-right-color | border-bottom-color | border-left-color
• 说明：四个方向边框颜色的简写，以顺时针方向展示
  • 一个值：四个边框的颜色相同；
  • 两个值：分别代表上下、左右的边框颜色；
  • 三个值：分别代表上、左右、下的边框颜色；
  • 四个值：分别代表上、右、下、左四个方向的边框颜色；

border-*-color

• 属性值：[ 颜色值 | transparent | 颜色关键词 ]

border-style

• 属性值：border-top-style | border-right-style | border-bottom-style | border-left-style
• 说明：四个方向边框样式的简写，以顺时针方向展示
  • 一个值：四个边框的颜色相同；
  • 两个值：分别代表上下、左右的边框样式；
  • 三个值：分别代表上、左右、下的边框样式；
  • 四个值：分别代表上、右、下、左四个方向的边框样式；

border-*-style

• 属性值：[ none | solid | dotted | dashed ]

border-*

• 属性值： border-*-width | border-*-style | border-*-color
• 说明：四个方向的边框样式简写

:::info 以上 border 属性中出现的 * 主要代表的是 top、right、bottom、left 四个方向； :::

颜色与背景相关属性

共 7 个。

color

• 属性值：[ 颜色值 | transparent | 颜色关键词 ]

background

• 属性值： background-color | background-image | background-repeat | backgrond-position | (/ background-size )
• 背景相关属性的简写

background-color

• 属性值：[ 颜色值 | transparent | 颜色关键词 ]

background-image

• 属性值：[ none | url() | linear-gradient() ]
• 不支持 svg 格式的图片

background-repeat

• 属性值：[ no-repeat | repeat | repeat-x | repeat-y ]
• 默认值：repeat

background-position

• 属性值：[ [ px | rpx | vw | vh | % ] | top | bottom | left | right | center ]
• 说明：
  • 默认为元素的左上角，即坐标 0 0；
  • 可以为一个值，第一个值为水平方向，第二值默认为 center
  • 可以为两个值：
    • 都为数值时，代表的是 x 和 y 坐标；
    • 如果第二个值为数值，第一个值不能是 top 或者 bottom ，因为坐标是 x y；

background-size

• 属性值：[ cover | contain | auto]
• 默认值：auto
• 说明：
  • 可以为双值的写法，第一个值代表背景图的宽度，第二个值代表高度；
  • 如果非 cover 或者 contian 的话，一个值的写法代表的是宽度，高度为默认的 auto ；

动画相关属性

共 7 个。

animation

• 属性值： animation-name | animation-duration | animation-delay | animation-fill-mode | animation-iteration-count | animation-timing-function

animation-name

• 属性值：动画名称的字符串
• 说明：指定运行 @keyframes 中定义的动画名称

animation-duration

• 属性值：[ ms | s ]
• 默认值：0s

animation-delay

• 属性值：[ ms | s ]
• 默认值：0s

animation-fill-mode

• 属性值：[ none | forwards | backwards | both ]
• 默认值：none

animation-iteration-count

• 属性值：[ infinite | ]
• 默认值：1

animation-timing-function

• 属性值：[ ease | ease-in | ease-out | ease-in-out | linear | cubic-bezier() ]
• 默认值：ease

盒模型相关属性

display

• 属性值：[ flex | none ]
• 默认值：flex
• 说明：仅支持 display: flex; 属性，所有布局方式都是 flex

height、min-height、max-height

• 属性值：[ px | rpx | vw | vh | % ]

width、min-width、max-width

• 属性值：[ px | rpx | vw | vh | % ]

margin、padding

• 说明：
  • margin、padding 四个方向的简写方式，以顺时针方向展示；
  • 一个值：四个方向的值；
  • 两个值：分别代表上下、左右的值；
  • 三个值：分别代表上、左右、下的值；
  • 四个值：分别代表上、右、下、左的值

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

• 属性值：<±number>[ px | rpx | vw | vh | % ]

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

• 属性值：[ px | rpx | vw | vh | % ]

overflow P

• 属性值：[ visible | hidden ]
• 默认值：visible

其他一些属性

共 3 个，其中有 1 个与 web 中有差异。

opacity

• 属性值：大于等于 0 且小于等于 1 的数

box-shadow

• 属性值：[ none | $x $y $blur-radius $color ]
• 相关说明：
  • $x 是指 x 坐标的偏移量；
  • $y 是指 y 坐标的偏移量；
  • $blur-radius 阴影的模糊扩散量；
  • $color 阴影的颜色值；
  • 四个值是必须同时存在，且颜色只有存在一组，不能像 web 中使用多组阴影；
  • 不支持内阴影

visibility

• 属性值：[ visible | hidden ]

选择器

选择器

@规则

单位

• px
• % （百分比单位并非所有的属性都支持，比如 border 就不支持）
• vw
• vh
• rpx

色彩值

• RGB、#RRGGBB

• rgb()、rgba()
• 色彩关键词：blue、red、yellow 等
• transparent

  其他

  | 属性/能力 | 补充说明 | | —- | —- | | box-sizing | 支持范围：
  M0 : border-box
  M1 : content-box | | overflow | | | opacity | | | — | | | filter | *支持范围：blur,brightness,grayscale | | calc | | | 继承 | 支持默认继承和主动继承（inherit） |