开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
native 渲染
性能与优化
小程序全局配置
小程序页面
axml
sjs 语法参考
事件系统
自定义组件
基础能力
基础库
基础库更新日志
开发 > 框架 > native 渲染 > acss 样式支持度
收藏
订阅更新
我的文档
设置
模块支持
模块名称
支持情况
备注
css animation

详见 属性列表
css transition

详见 属性列表
背景与边框

详见 属性列表
盒子模型

详见 属性列表
默认为content-box
inline 布局

不支持 inline 元素相互嵌套
inline-block 布局

-
block 布局

-
flex 布局

详见 属性列表
字体

详见 属性列表
positioned 布局

只支持 staticrelativeabsolutefixed
不支持使用 sticky
详见 属性列表
css variable

-
media queries

仅支持特性查询,支持特性详见 媒体查询
font-face

支持 font-family 以及 src;
第三方字体文件仅支持 ttf、otf(10.5.86客户端) 字体类型。
不支持在 @font-face 中写其他属性,例如: unicode-rangefont-weight
选择器支持
类别
示例
支持情况
备注
通配选择器
* {}

-
元素选择器
tag {}

-
类选择器
.class {}

-
id 选择器
#id {}

-
分组选择器
a, b {}

-
直接子代选择器
a > b {}

-
后代选择器
a b {}

-
属性选择器
[attr] {}

-
一般兄弟选择器
a ~ b {}

-
紧邻兄弟选择器
a b {}

-
伪类选择器
:active {}

支持 :first-child:last-child:nth-child:root:empty:not:active:disabled:enabled:focus:hover
:focus-within
伪元素选择器
::before {}

只支持 ::before::after
媒体查询
特性值
客户端版本依赖
aspect-ratio
10.5.80
device-aspect-ratio
10.5.80
device-height
10.5.80
device-width
10.5.80
height
10.5.80
max-aspect-ratio
10.5.80
max-device-aspect-ratio
10.5.80
max-device-height
10.5.80
max-device-width
10.5.80
max-width
10.5.80
min-aspect-ratio
10.5.80
min-device-aspect-ratio
10.5.80
min-device-height
10.5.80
min-device-width
10.5.80
min-height
10.5.80
min-width
10.5.80
width
10.5.80
属性支持
样式属性
支持格式
默认值
备注
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 / / /
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
-
可动画属性
指允许通过 transition 及 animation (keyframes动画) 控制的属性。
样式属性

写法
客户端版本依赖
备注
background-color

见类型支持列表
-
-
opacity
number
1
-
0-1
transform
rotate([ | ])
rotate(45deg)
-
-
rotatex([ | ])
rotatex(45deg)
-
-
rotatey([ | ])
rotatey(45deg)
-
-
rotatez([ | ])
rotatez(45deg)
-
与 rotate() 等同
rotate3d(, , , [ | ])
rotate3d(0, 0, 1, 45deg)
-
-
scale(#{1, 2})
scale(1.2)
scale(1.2, 1.3)
-
如果只有一个值,则第二个值视为与第一个值等同。
比如:scale(1.2) == scale(1.2, 1.2)
scalex()
scalex(1.2)
-
-
scaley()
scaley(1.2)
-
-
scalez()
scalez(1.2)
-
-
scale3d(#{3})
scale3d(1.2, 1.3, 1.4)
-
-
translate( [, ]?)
translate(20px, 40px)
translate(40%)
10.5.80 起支持 calc()
如果只有一个值,则第二个值视为 0px。
translatex()
translatex(20px)
10.5.80 起支持 calc()
-
translatey()
translatey(20px)
10.5.80 起支持 calc()
-
translatez()
translatez(20px)
10.5.80 起支持 calc()
-
translate3d(, , )
translate3d(20%, 20%, 20px)
10.5.80 起支持 calc()
-
matrix(#{6})
matrix(1, 0, 0, 1, 10, 20)
-
-
matrix3d(#{16})
matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 10, 20, 0, 1)
-
-
width

-
10.5.70
-
height

-
10.5.70
-
top

-
10.5.70 仅支持 absolute 元素
-
right

-
10.5.70 仅支持 absolute 元素
-
bottom

-
10.5.70 仅支持 absolute 元素
-
left

-
10.5.70 仅支持 absolute 元素
-
类型支持列表
类别
格式
备注

auto
-
px
-
rem
-
em
-
rpx
-
vw
-
vh
-
vmin
-
vmax
-
env()
只支持 safe-area-inset-* 系列
calc()
-

%
-

color keywords
-
transparent
-
currentcolor
-
rgb[a]
-
#rrggbb / #rgb
-
hsl()
-
hsla()
-
hwb()
-


-

linear-gradient()
-
radial-gradient()
-


-

-

none
-
hidden
-
solid
-
dashed
-
dotted
-

brightness()
多个 function 暂不支持
contrast()
-
saturate()
-
invert()
-
opacity()
-
grayscale()
-
speia()
-

deg
-
grad
-
rad
-
turn
-

ease
-
ease-in
-
ease-out
-
ease-in-out
-
linear
-
cubic-bezier
-
steps
-
step-start
-
step-end
-

rotate
-
rotatex
-
rotatey
-
rotatez
-
rotate3d
-
scale
-
scalex
-
scaley
-
scalez
-
scale3d
-
translate
-
translatex
-
translatey
-
translatez
-
translate3d
-
skew
仅支持绘制,不支持任何形式动画
skewx
仅支持绘制,不支持任何形式动画
skewy
仅支持绘制,不支持任何形式动画
matrix
-
matrix3d
-
perspective
仅支持绘制,不支持任何形式动画
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图