样式属性
| 支持格式
| 默认值
| 备注
|
display
| none / flex / block / inline / inline-block
| block
| -
|
position
| relative / absolute / fixed / static
| static
| 不支持使用 sticky
|
overflow
| hidden / visible
| visible
| 不支持 scroll,请使用scroll-view
|
pointer-events
| auto / none
| auto
| -
|
box-sizing
| border-box / content-box
| border-box
| -
|
transform
| none /
| none
| -
|
transform-origin
| left / center / right / top / bottom / {1, 2}
| 50% 50%
| -
|
z-index
| / auto
| auto
| -
|
visibility
| visible / hidden
| visible
| -
|
color
|
| black
| -
|
opacity
|
| 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
| -
| -
| 简写属性,支持解析但以展开属性为准
|
flex-direction
| row / row-reverse / column / column-reverse
| row
| -
|
flex-wrap
| nowrap / wrap / wrap-reverse
| nowrap
| -
|
flex-grow
|
| 0
| -
|
flex-shrink
|
| 1
| -
|
flex-basis
|
| auto
| -
|
background
| -
| -
| 简写属性,支持解析但以展开属性为准
|
background-color
|
| transparent
| -
|
background-image
| none /
| none
| 仅支持单图,不支持多张图片
|
background-size
| contain / cover / [ | auto]{1, 2}
| auto
| -
|
background-position
| left / center / right / top / bottom /
| 0 0
| -
|
background-repeat
| repeat-x / repeat-y / repeat / no-repeat
| repeat
| -
|
width
|
| auto
| -
|
height
|
| auto
| -
|
min-width
|
| auto
| -
|
min-height
|
| none
| -
|
max-width
|
| auto
| -
|
max-height
|
| none
| -
|
left
|
| auto
| -
|
right
|
| auto
| -
|
top
|
| auto
| -
|
bottom
|
| auto
| -
|
padding
| {1,4}
| 0 0 0 0
| -
|
padding-left
|
| 0
| -
|
padding-top
|
| 0
| -
|
padding-right
|
| 0
| -
|
padding-bottom
|
| 0
| -
|
margin
| {1,4}
| 0 0 0 0
| -
|
margin-left
|
| 0
| -
|
margin-top
|
| 0
| -
|
margin-right
|
| 0
| -
|
margin-bottom
|
| 0
| -
|
border-width
| -
| -
| 简写属性,支持解析但以展开属性为准
|
border-style
| -
| -
| 简写属性,支持解析但以展开属性为准
|
border-color
| -
| -
| 简写属性,支持解析但以展开属性为准
|
border-left-width
|
| 3
| -
|
border-left-style
|
| none
| -
|
border-left-color
|
| black
| 默认值与 web 不同, web 默认值是 currentcolor
|
border-top-width
|
| 3
| -
|
border-top-style
|
| none
| -
|
border-top-color
|
| black
| 默认值与 web 不同, web 默认值是 currentcolor
|
border-right-width
|
| 3
| -
|
border-right-style
|
| none
| -
|
border-right-color
|
| black
| 默认值与 web 不同, web 默认值是 currentcolor
|
border-bottom-width
|
| 3
| -
|
border-bottom-style
|
| none
| -
|
border-bottom-color
|
| black
| 默认值与 web 不同, web 默认值是 currentcolor
|
border-left
| -
| -
| 简写属性,支持解析但以展开属性为准
|
border-right
| -
| -
| 简写属性,支持解析但以展开属性为准
|
border-top
| -
| -
| 简写属性,支持解析但以展开属性为准
|
border-bottom
| -
| -
| 简写属性,支持解析但以展开属性为准
|
border
| -
| -
| 简写属性,支持解析但以展开属性为准
|
box-shadow
| none / inset && {2,4} &&
| none
| 不支持多个叠加
|
border-top-left-radius
| {1, 2}
| 0
| 四边的 border 样式需一致
|
border-top-right-radius
| {1, 2}
| 0
| 四边的 border 样式需一致
|
border-bottom-left-radius
| {1, 2}
| 0
| 四边的 border 样式需一致
|
border-bottom-right-radius
| {1, 2}
| 0
| 四边的 border 样式需一致
|
border-radius
| -
| -
| 简写属性,支持解析但以展开属性为准
|
line-height
| | normal
| -
|
text-align
| left / center / right / start / end
| start
| 不支持 justify
|
white-space
| normal / nowrap / pre / pre-wrap / pre-line
| normal
| -
|
text-overflow
| clip / ellipsis
| clip
| -
|
word-break
| normal / break-all / keep-all / break-word
| normal
| -
|
overflow-wrap
| normal / break-word
| normal
| -
|
vertical-align
| baseline / sub / super / text-top / text-bottom / middle / top / bottom / /
| baseline
| -
|
text-decoration-line
| none / underline / line-through / overline
| none
| -
|
text-decoration-style
| solid
| solid
| 不支持 double / dotted / dashed / wavy
|
text-decoration
| -
| -
| 简写属性,支持解析但以展开属性为准
|
text-shadow
| none / && {2,3}
| none
| -
|
aspect-ratio
| -
| auto
| -
|
font
| -
| -
| 简写属性,支持解析但以展开属性为准。不支持 caption / icon 等系统字体。
|
font-size
|
| 16px
| 不支持smaller等 keywords
|
font-weight
| normal / bold /
| normal
| -
|
font-family
| serif / sans-serif / monospace /
| normal
| 不支持 oblique
|
animation
|
| 各项属性初始值
| -
|
animation-name
| none /
| none
| -
|
animation-duration
|
| 0s
| -
|
animation-delay
|
| 0s
| -
|
animation-timing-function
|
| ease
| -
|
animation-iteration-count
| infinite /
| 1
| 取值范围: >= 0
|
animation-direction
| normal / reverse / alternate / alternate-reverse
| normal
| -
|
animation-fill-mode
| none / backwards / forwards / both
| none
| -
|
animation-play-state
| running / paused
| running
| -
|
@keyframes
| @keyframes { }
| | 是 keyframes 名称, 是动画内容。 样式属性支持详见 可动画属性。
|
transition
|
| 各项属性初始值
| -
|
transition-property
| | all
| 设置为 none 时不会触发任何 transition 动画 样式属性支持详见 可动画属性。
|
transition-duration
|
| 0s
| -
|
transition-delay
|
| 0s
| -
|
transition-timing-function
|
| ease
| -
|