css 支持列表
样式表和 CSS 规则是由 Weex js 框架和原生渲染引擎管理的。要实现完整的 CSS 对象模型(CSSOM:CSS Object Model)并支持所有的 CSS 规则是非常困难的,而且没有这个必要。
出于性能考虑,Weex 目前只支持单个类选择器,并且只支持 CSS 规则的子集。
Weex 对于长度值目前只支持像素值,不支持相对单位(em、rem)。Rax 中的 rpx 单位将会转换为 px
样式支持程度参考
下表中 weex sdk version 是支持的最低版本,这份整理是来自 weex 0.16.0 的 style 支持情况
border | default | values | weex sdk version | platform |
---|
border-style | solid | solid, dashed, dotted | 0.5.0 | |
border-left-style | solid | solid, dashed, dotted | 0.5.0 | |
border-top-style | solid | solid, dashed, dotted | 0.5.0 | |
border-right-style | solid | solid, dashed, dotted | 0.5.0 | |
border-bottom-style | solid | solid, dashed, dotted | 0.5.0 | |
border-width | 0px | | 0.5.0 | |
border-left-width | 0px | | 0.5.0 | |
border-top-width | 0px | | 0.5.0 | |
border-right-width | 0px | | 0.5.0 | |
border-bottom-width | 0px | | 0.5.0 | |
border-color | #000000 | | 0.5.0 | |
border-left-color | #000000 | | 0.5.0 | |
border-top-color | #000000 | | 0.5.0 | |
border-right-color | #000000 | | 0.5.0 | |
border-bottom-color | #000000 | | 0.5.0 | |
border-radius | 0px | | 0.5.0 | |
border-left-radius | 0px | | 0.5.0 | |
border-top-radius | 0px | | 0.5.0 | |
border-right-radius | 0px | | 0.5.0 | |
border-bottom-radius | 0px | | 0.5.0 | |
box-shadow | default | values | weex sdk version | platform |
---|
box-shadow | | | 0.11.0 | ios |
flex | default | values | weex sdk version | platform |
---|
flex-direction | column | column, row | 0.5.0 | |
justify-content | flex-start | flex-start, flex-end, center, space-between | 0.5.0 | |
align-items | stretch | stretch, flex-start, flex-end, center | 0.5.0 | |
padding-bottom | 0px | | 0.5.0 | |
gradient | default | values | weex sdk version | platform |
---|
linear-gradient | | | 0.10.0 | |
height | default | values | weex sdk version | platform |
---|
height | 0px | | 0.5.0 | |
margin | default | values | weex sdk version | platform |
---|
margin-left | 0px | | 0.5.0 | |
margin-right | 0px | | 0.5.0 | |
margin-top | 0px | | 0.5.0 | |
margin-bottom | 0px | | 0.5.0 | |
other-common-style | default | values | weex sdk version | platform |
---|
opacity | 1 | | 0.5.0 | |
background-color | transparent | | 0.5.0 | |
padding | default | values | weex sdk version | platform |
---|
padding-left | 0px | | 0.5.0 | |
padding-right | 0px | | 0.5.0 | |
padding-top | 0px | | 0.5.0 | |
padding-bottom | 0px | | 0.5.0 | |
position | default | values | weex sdk version | platform |
---|
position | relative | relative, absolute, fixed, sticky | 0.5.0 | |
left | 0px | | 0.5.0 | |
right | 0px | | 0.5.0 | |
top | 0px | | 0.5.0 | |
bottom | 0px | | 0.5.0 | |
pseudo-class | default | values | weex sdk version | platform |
---|
active | 0px | | 0.9.5 | |
focus | 0px | | 0.9.5 | |
disabled | 0px | | 0.9.5 | |
enabled | 0px | | 0.9.5 | |
text | default | values | weex sdk version | platform |
---|
color | | | 0.5.0 | |
lines | 0 | | 0.5.0 | |
font-size | | | 0.5.0 | |
font-style | normal | normal, italic | 0.5.0 | |
font-weight | normal | normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900 | 0.9.0 | |
text-decoration | none | none, underline, line-through | 0.5.0 | |
text-align | left | left, center, right | 0.5.0 | |
font-family | | | 0.5.0 | |
text-overflow | | clip, ellipsis | 0.5.0 | |
transform | default | values | weex sdk version | platform |
---|
translateX | | | 0.5.0 | |
translateY | | | 0.5.0 | |
scale | | | 0.5.0 | |
scaleX | | | 0.5.0 | |
scaleY | | | 0.5.0 | |
rotate | | | 0.5.0 | |
rotateX | | | 0.14.0 | |
rotateY | | | 0.14.0 | |
perspective | | | 0.16.0 | android |
transform-origin | | | 0.5.0 | |
transition | default | values | weex sdk version | platform |
---|
transition-property | | width, height, top, bottom, left, right, backgroundColor, opacity, transform | 0.16.0 | |
transition-duration | 0 | | 0.16.0 | |
transition-delay | 0 | | 0.16.0 | |
transition-timing-function | ease | ease, ease-in, ease-out, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) | 0.16.0 | |
width | default | values | weex sdk version | platform |
---|
width | 0px | | 0.5.0 | |
发布评论