display | none / flex / block | flex | 默认值可通过配置改成 block |
position | relative / absolute / fixed | relative | fixed 在微信客户端 8.0.43 版本开始支持,只支持相对于窗口 viewport 定位,不支持 top / left / bottom / right 默认值 auto 解析,z-index 只作用在兄弟节点;sticky 可使用 sticky-header/sticky-section 替代 |
overflow | hidden / visible | visible | scroll 不支持,只能通过 scroll-view 实现;不支持单独设置 overflow-x/y |
pointer-events | auto / none | auto | |
box-sizing | border-box / content-box | border-box | |
transform | none / <transform-function> | none | |
transform-origin | left / center / right / top / bottom / <length>{1, 2} | 50% 50% | |
z-index | <float> | 0 | 不支持层叠上下文,只对兄弟节点生效;不支持在 scroll-view 下的直接子节点上应用 |
visibility | visible / hidden | visible | |
color | <color> | black | |
opacity | <float> | 1 | |
align-items | stretch / center / flex-start / flex-end / baseline | stretch | |
align-self | auto / stretch / center / flex-start / flex-end / baseline | auto | |
align-content | stretch / center / flex-start / flex-end / space-between / space-around | auto | |
justify-content | center / flex-start / flex-end / space-between / space-around / space-evenly | flex-start | |
flex-direction | row / row-reverse / column / column-reverse | column | |
flex-wrap | nowrap / wrap / wrap-reverse | nowrap | |
flex-grow | <float> | 0 | |
flex-shrink | <float> | 1 | |
flex-basis | <length> | auto | |
order | <float> | 0 | |
flex | | | 简写属性,支持解析但以展开属性为准 |
background-color | <color> | transparent | |
background-image | none / <image> | none | 不支持多张图片 |
background-size | contain / cover / [<length> | auto]{1, 2} | auto | |
background-position | left / center / right / top / bottom / <length> | 0 0 | 完全支持 <bg-position> #,请参考 MDN |
background-repeat | repeat-x / repeat-y / repeat / no-repeat | repeat | |
background | | | 简写属性,支持解析但以展开属性为准 |
width | <length> | auto | |
height | <length> | auto | |
min-width | <length> | auto | |
min-height | <length> | none | |
max-width | <length> | auto | |
max-height | <length> | none | |
left | <length> | auto | |
right | <length> | auto | |
top | <length> | auto | |
bottom | <length> | auto | |
padding | <length>{1,4} | 0 0 0 0 | |
padding-left | <length> | 0 | |
padding-top | <length> | 0 | |
padding-right | <length> | 0 | |
padding-bottom | <length> | 0 | |
margin | <length>{1,4} | 0 0 0 0 | |
margin-left | <length> | 0 | |
margin-top | <length> | 0 | |
margin-right | <length> | 0 | |
margin-bottom | <length> | 0 | |
border-left-width | <length> | 3 | |
border-left-style | <border-style> | none | |
border-left-color | <color> | black | 默认值与 web 不同, web 默认值是 currentcolor |
border-top-width | <length> | 3 | |
border-top-style | <border-style> | none | |
border-top-color | <color> | black | 默认值与 web 不同, web 默认值是 currentcolor |
border-right-width | <length> | 3 | |
border-right-style | <border-style> | none | |
border-right-color | <color> | black | 默认值与 web 不同, web 默认值是 currentcolor |
border-bottom-width | <length> | 3 | |
border-bottom-style | <border-style> | none | |
border-bottom-color | <color> | black | 默认值与 web 不同, web 默认值是 currentcolor |
border-width | | | 简写属性,支持解析但以展开属性为准 |
border-style | | | 简写属性,支持解析但以展开属性为准 |
border-color | | | 简写属性,支持解析但以展开属性为准 |
border-left | | | 简写属性,支持解析但以展开属性为准 |
border-right | | | 简写属性,支持解析但以展开属性为准 |
border-top | | | 简写属性,支持解析但以展开属性为准 |
border-bottom | | | 简写属性,支持解析但以展开属性为准 |
border | | | 简写属性,支持解析但以展开属性为准 |
box-shadow | none / inset? && <length>{2,4} && <color> ? | none | 不支持多个叠加 |
border-top-left-radius | <length>{1, 2} | 0 | border-radius 非 0 时,四边的 border-width 可不一致,四边的 border-color 和 border-style 需一致 |
border-top-right-radius | <length>{1, 2} | 0 | border-radius 非 0 时,四边的 border-width 可不一致,四边的 border-color 和 border-style 需一致 |
border-bottom-left-radius | <length>{1, 2} | 0 | border-radius 非 0 时,四边的 border-width 可不一致,四边的 border-color 和 border-style 需一致 |
border-bottom-right-radius | <length>{1, 2} | 0 | border-radius 非 0 时,四边的 border-width 可不一致,四边的 border-color 和 border-style 需一致 |
border-radius | | | 简写属性,支持解析但以展开属性为准 |
transition-property | none / all / transform / opacity 等 | all | 基本都支持,暂不一一列举 |
transition-duration | <time> | 0 | |
transition-timing-function | <timing-function> | <timing-function> | |
transition-delay | <time> | 0 | |
transition | | | 简写属性,支持解析但以展开属性为准 |
font | | | 简写属性,支持解析但以展开属性为准;不支持 caption / icon 等系统字体; |
font-size | <length> | 16px | 不支持百分比;不支持 keyword (smaller..) |
line-height | normal / <number> / <length> / <percent> | normal | |
text-align | left / center / right / justify / start / end | start | |
font-weight | normal / bold / <float> | normal | |
white-space | normal / nowrap / normal | | |
text-overflow | clip / ellipsis | clip | 仅作用于 text 节点 |
word-spacing | normal / <length> | normal | |
letter-spacing | normal / <length> | normal | |
font-family | serif / sans-serif / monospace / cursive / fantasy / <string> | | |
font-style | normal / italic | normal | |
text-decoration-line | none / underline / overline / line-through | none | 仅作用于 text 节点 |
text-decoration-style | solid / double / dotted / dashed / wavy | solid | 仅作用于 text 节点 |
text-decoration-color | <color> | black | 仅作用于 text 节点;默认值和 web 不同,web 默认值是 currentcolor |
text-decoration | | | 简写属性,支持解析但以展开属性为准;当前仅支持设置一种类型;暂不支持复合使用 text-decoration |
text-shadow | none / <color> ? && <length>{2,3} | none | |
backdrop-filter | none / [<filter-function>] | none | 不支持 multi function;不支持 drop-shadow;不支持 url;与 opacity 混合有问题;blur 某些情况表现不一致; |
filter | none / [<filter-function>] | none | 不支持 multi function;不支持 drop-shadow;不支持 url; |
mask-image | none / <image> | none | 不支持多张图片 |
animation-delay | <time> | 0 | |
animation-direction | normal / reverse / alternate / alternate-reverse | normal | |
animation-duration | <time> | 0 | |
animation-fill-mode | forwards / both | none | none 与 backwards 暂未支持,表现均为 forwards |
animation-iteration-count | infinite / <number> | 1 | |
animation-name | none / <custom-ident> | none | |
animation-timing-function | <timing-function> | <timing-function> | |
animation | | | 简写属性,支持解析但以展开属性为准 |
will-change | auto / contents | auto | 声明绘制边界,优化渲染性能 |