小部件样式支持范围是小程序ACSS 语法的子集。
说明：本文档适用于小部件3.0。
选择器类型 |
示例 |
支持情况 |
补充说明 |
标签 |
tag |
支持 |
前端组件对原生组件有封装，名称可能不一致 |
类名 |
.class |
支持 |
|
ID |
#id |
支持 |
|
属性 |
[foo] |
支持 |
|
[foo="bar"] |
支持 |
||
[foo*="bar"] |
支持 |
||
[foo^="bar"] |
支持 |
||
[foo$="bar"] |
支持 |
||
[foo~="bar"] |
支持 |
||
[foo|="bar"] |
支持 |
||
选择器组合 |
A B |
支持 |
|
A > B |
支持 |
||
A + B |
支持 |
||
A ~ B |
支持 |
||
A, B |
支持 |
由编译工具支持，将逗号展开 |
|
@规则 |
@keyframes |
支持 |
|
@media |
支持 |
匹配规则未支持全 |
|
@font-face |
支持 |
||
伪类 |
:active |
不支持 |
|
:disabled |
不支持 |
||
:nth-child() |
不支持 |
||
:first-child |
支持 |
||
:last-child |
支持 |
||
:only-child |
支持 |
||
:nth-of-type() |
不支持 |
||
:first-of-type |
支持 |
||
:last-of-type |
支持 |
||
:only-of-type |
支持 |
值类型 |
名称 |
支持情况 |
补充说明 |
通用 keyword |
unset |
支持 |
未定义 |
initial |
支持 |
初始值 |
|
inherit |
支持 |
声明为继承 |
|
auto |
支持 |
自动计算，在不同属性中有不同含义 |
|
keyword identifier <string> |
字符串 |
支持 |
|
<length> |
长度 |
支持 |
|
<number> <integer> <dimention> |
数字 |
支持 |
|
<percentage> |
百分比 |
支持 |
|
<time> |
时间 |
支持 |
|
<angle> |
角度 |
支持 |
|
<resolution> |
分辨率 |
支持 |
|
<url> |
资源 |
支持 |
|
calc() min() max() clamp() |
数学函数 |
不支持 |
|
--* var() |
变量 |
不支持 |
样式单位 |
支持情况 |
补充说明 & 测试连接 |
px |
支持 |
像素数量 |
rpx |
支持 |
非标准单位，相对于 750 viewport 的大小 |
rem |
支持 |
相对根字体的大小 |
em |
支持 |
字体相对大小（目前效果与 rem 相同） |
vw |
支持 |
相对与 viewport 宽度的大小 |
vh |
支持 |
相对与 viewport 高度的大小 |
vmax |
支持 |
相对与 viewport 最大值的大小 |
vmin |
支持 |
相对与 viewport 最小值的大小 |
s |
支持 |
时间，秒 |
ms |
支持 |
时间，毫秒 |
deg |
支持 |
角度 |
grad |
支持 |
弧度 |
rad |
支持 |
弧度 |
turn |
支持 |
圈数 |
% |
支持 |
百分比，在部分属性中有效 |
带背景色的值是默认值。
属性名 |
值类型 |
支持情况 |
补充说明 & 测试连接 |
display |
block |
支持 |
- |
flex |
支持 |
||
inline |
支持 |
某些标签固定为 inline，如 <span> <i> <em>，不可通过 css 修改。 |
|
none |
支持 |
||
width |
长度 |
支持 |
- |
height |
长度 |
支持 |
- |
min-width |
长度 |
支持 |
- |
max-width |
长度 |
支持 |
- |
min-height |
长度 |
支持 |
|
max-height |
长度 |
支持 |
|
margin |
样式简写 |
支持 |
|
margin-top |
长度 |
支持 |
|
margin-right |
长度 |
支持 |
|
margin-bottom |
长度 |
支持 |
|
margin-left |
长度 |
支持 |
|
padding |
样式简写 |
支持 |
|
padding-top |
长度 |
支持 |
|
padding-right |
长度 |
支持 |
|
padding-bottom |
长度 |
支持 |
|
padding-left |
长度 |
支持 |
属性名 |
值类型 |
支持情况 |
补充说明 & 测试连接 |
row |
支持 |
- |
|
column |
支持 |
||
row-reverse |
支持 |
||
column-reverse |
支持 |
||
normal |
支持 |
- |
|
center |
支持 |
||
stretch |
支持 |
||
baseline |
不支持 |
||
flex-start |
支持 |
||
flex-end |
支持 |
||
normal |
支持 |
- |
|
center |
支持 |
||
space-between |
支持 |
||
space-around |
支持 |
||
space-evenly |
支持 |
||
stretch |
支持 |
||
baseline |
不支持 |
||
flex-start |
支持 |
||
flex-end |
支持 |
||
样式简写 |
支持 |
||
数字 |
支持 |
- |
|
数字 |
支持 |
||
auto |
支持 |
||
长度 |
支持 |
||
fill |
不支持 |
||
nowrap |
支持 |
||
wrap |
支持 |
||
wrap-reverse |
支持 |
||
样式简写 |
支持 |
||
auto |
支持 |
||
normal |
支持 |
||
self-start |
支持 |
||
self-end |
支持 |
||
flex-start |
支持 |
||
flex-end |
支持 |
||
center |
支持 |
||
stretch |
支持 |
||
baseline |
不支持 |
||
normal |
支持 |
||
flex-start |
支持 |
||
flex-end |
支持 |
||
center |
支持 |
||
stretch |
支持 |
||
baseline |
不支持 |
||
space-between |
支持 |
||
space-around |
支持 |
||
数字 |
支持 |
属性名 |
值类型 |
支持情况 |
补充说明 & 测试连接 |
static |
支持 |
- |
|
relative |
支持 |
||
absolute |
支持 |
||
fixed |
支持 |
||
sticky |
支持 |
||
top |
长度 |
支持 |
- |
right |
长度 |
支持 |
- |
bottom |
长度 |
支持 |
- |
left |
长度 |
支持 |
- |
z-index |
数字 |
支持 |
属性名 |
值类型 |
支持情况 |
补充说明 & 测试连接 |
font |
样式简写 |
支持 |
|
font-size |
长度 |
支持 |
- |
百分比 |
支持 |
||
数字 |
支持 |
- |
|
关键字 |
支持 |
||
资源 |
支持 |
||
normal |
支持 |
||
italic |
支持 |
||
oblique |
支持 |
||
left |
支持 |
||
right |
支持 |
||
center |
支持 |
||
justify |
支持 |
||
长度 |
支持 |
||
样式简写 |
支持 |
||
text-decoration-color |
颜色 |
支持 |
|
text-decoration-line |
none |
支持 |
|
underline |
支持 |
||
overline |
支持 |
||
line-through |
支持 |
||
text-decoration-style |
solid |
支持 |
|
double |
支持 |
||
dotted |
支持 |
||
dashed |
支持 |
||
wavy |
支持 |
||
text-decoration-thickness |
长度 |
支持 |
浏览器还未支持 |
clip |
支持 |
||
ellipsis |
支持 |
||
组合值 |
支持 |
||
长度 |
支持 |
||
数字 |
支持 |
||
baseline |
支持 |
||
middle |
支持 |
||
top |
支持 |
||
bottom |
支持 |
||
sub |
支持 |
||
super |
支持 |
||
normal |
支持 |
||
nowrap |
支持 |
||
pre |
支持 |
||
pre-wrap |
支持 |
||
pre-line |
支持 |
||
break-spaces |
支持 |
||
normal |
不支持 |
||
keep-all |
不支持 |
||
break-all |
支持 |
||
break-word |
支持 |
||
长度 |
支持 |
||
长度 |
支持 |
||
数字 |
支持 |
||
数字 |
支持 |
||
ltr |
支持 |
||
rtl |
支持 |
||
数字 |
支持 |
||
百分比 |
不支持 |
||
none |
不支持 |
||
capitalize |
不支持 |
||
uppercase |
不支持 |
||
lowercase |
不支持 |
属性名 |
值类型 |
支持情况 |
补充说明 & 测试连接 |
样式简写 |
支持 |
- |
|
border-top |
样式简写 |
支持 |
|
border-right |
样式简写 |
支持 |
|
border-bottom |
样式简写 |
支持 |
|
border-left |
样式简写 |
支持 |
|
border-width |
长度 |
支持 |
|
border-color |
颜色 |
支持 |
|
solid |
支持 |
||
none |
支持 |
||
hidden |
支持 |
||
dotted |
支持 |
||
dashed |
支持 |
||
double |
支持 |
||
inset |
支持 |
||
outset |
支持 |
||
长度 |
支持 |
||
百分比 |
支持 |
||
多值 |
支持 |
||
资源 |
不支持 |
||
Base64 |
不支持 |
单独设置某个方向的边框。
属性名 |
值类型 |
支持情况 |
补充说明 & 测试连接 |
border-top-width |
长度 |
支持 |
|
border-right-width |
长度 |
支持 |
|
border-bottom-width |
长度 |
支持 |
|
border-left-width |
长度 |
支持 |
|
border-top-color |
颜色 |
支持 |
|
border-right-color |
颜色 |
支持 |
|
border-bottom-color |
颜色 |
支持 |
|
border-left-color |
颜色 |
支持 |
|
border-top-style |
关键字 |
支持 |
|
border-right-style |
关键字 |
支持 |
|
border-bottom-style |
关键字 |
支持 |
|
border-left-style |
关键字 |
支持 |
|
border-top-left-radius |
长度 |
支持 |
|
border-top-right-radius |
长度 |
支持 |
|
border-bottom-left-radius |
长度 |
支持 |
|
border-bottom-right-radius |
长度 |
支持 |
属性名 |
值类型 |
支持情况 |
补充说明 & 测试连接 |
color |
预定义颜色名 |
支持 |
- |
#ABC | #AABBCC |
支持 |
||
#ABCD | #AABBCCDD |
支持 |
||
rgb() |
支持 |
||
rgba() |
支持 |
||
hsl() |
支持 |
||
hsla() |
支持 |
||
background |
样式简写 |
支持 |
|
background-color |
同 color |
支持 |
|
资源 |
支持 |
||
Base64 |
支持 |
||
linear-gradient() |
支持 |
||
radial-gradient() |
支持 |
||
conic-gradient() |
支持 |
||
支持 |
|||
支持 |
|||
repeat |
支持 |
||
no-repeat |
支持 |
||
repeat-x |
支持 |
||
repeat-y |
支持 |
||
space |
支持 |
||
around |
支持 |
||
样式简写 |
支持 |
||
background-position-x background-position-y |
top |
支持 |
|
bottom |
支持 |
||
left |
支持 |
||
right |
支持 |
||
center |
支持 |
||
长度 |
支持 |
||
auto |
支持 |
||
cover |
支持 |
||
contain |
支持 |
||
百分比 |
支持 |
||
长度 |
支持 |
||
padding-box |
支持 |
||
border-box |
支持 |
||
content-box |
支持 |
||
支持 |
|||
border-box |
支持 |
||
padding-box |
支持 |
||
content-box |
支持 |
||
text |
不支持 |
||
scroll |
不支持 |
||
fixed |
不支持 |
||
local |
不支持 |
||
关键字 |
不支持 |
||
circle() |
不支持 |
||
polygon() |
不支持 |
||
path() |
不支持 |
不在标准容器定义的 CSS 范围内，扩展支持，仅可用于 <img>?或 <image>?标签上。
属性名 |
值类型 |
支持情况 |
补充说明 & 测试连接 |
fill |
支持 |
||
contain |
支持 |
||
cover |
支持 |
||
none |
支持 |
||
scale-down |
支持 |
||
auto |
支持 |
||
smooth |
支持 |
||
high-quality |
支持 |
||
crisp-edges |
支持 |
||
pixelated |
支持 |
||
blur() |
支持 |
||
其他 |
不支持 |
transform样式的的添加与销毁均会触发节点rebuild，如果不希望触发，可为节点添加默认的transform样式。
属性名 |
值类型 |
支持情况 |
补充说明 & 测试连接 |
translate() |
支持 |
||
scale() |
支持 |
||
rotate() |
支持 |
||
skew() |
支持 |
||
matrix() |
支持 |
||
perspective() |
支持 |
||
translate3d() |
支持 |
||
scale3d() |
支持 |
||
rotate3d() |
支持 |
||
matrix3d() |
支持 |
||
top |
支持 |
||
bottom |
支持 |
||
left |
支持 |
||
right |
支持 |
||
center |
支持 |
||
长度 |
支持 |
||
flat |
不支持 |
||
preserve-3d |
不支持 |
||
none |
不支持 |
||
长度 |
不支持 |
||
visible |
不支持 |
||
hidden |
不支持 |
属性名 |
值类型 |
支持情况 |
补充说明 & 测试连接 |
样式简写 |
支持 |
||
字符串 |
支持 |
||
时间 |
支持 |
||
时间 |
支持 |
||
预定义时间函数 |
支持 |
||
cubic-bezier() |
支持 |
||
steps() |
支持 |
||
属性名 | 关键字 |
不支持 |
属性名 |
值类型 |
支持情况 |
补充说明 & 测试连接 |
样式简写 |
支持 |
||
字符串 |
支持 |
||
时间 |
支持 |
||
时间 |
支持 |
||
none |
支持 |
||
forwards |
支持 |
||
backwards |
支持 |
||
both |
支持 |
||
数字 |
支持 |
||
预定义时间函数 |
支持 |
||
cubic-bezier() |
支持 |
||
steps() |
支持 |
||
normal |
支持 |
||
reverse |
支持 |
||
alternate |
支持 |
||
alternate-reverse |
支持 |
||
running |
支持 |
||
paused |
支持 |
属性名 |
值类型 |
支持情况 |
补充说明 & 测试连接 |
关键字 |
不支持 |
||
关键字 |
不支持 |
||
样式简写 |
不支持 |
||
scroll-padding-top |
长度 |
不支持 |
|
scroll-padding-right |
长度 |
不支持 |
|
scroll-padding-bottom |
长度 |
不支持 |
|
scroll-padding-left |
长度 |
不支持 |
|
样式简写 |
不支持 |
||
scroll-margin-top |
长度 |
不支持 |
|
scroll-margin-right |
长度 |
不支持 |
|
scroll-margin-bottom |
长度 |
不支持 |
|
scroll-margin-left |
长度 |
不支持 |
|
auto |
不支持 |
||
smooth |
不支持 |
||
visible |
不支持 |
||
hidden |
不支持 |
||
auto |
不支持 |
||
关键字 |
不支持 |
属性名 |
值类型 |
支持情况 |
补充说明 & 测试连接 |
content-box |
不支持 |
暂不支持前端配置 |
|
border-box |
支持 |
与浏览器默认值不同，但这是实践中常用的写法，应当添加一个 reset.css 在降级后的 H5 中使用。 |
|
组合值 |
支持 |
||
多层阴影 |
支持 |
||
visible |
支持 |
||
hidden |
支持 |
||
scroll |
支持 |
||
auto |
支持 |
||
overflow-x overflow-y |
同上 |
支持 |
|
数字 |
支持 |
||
visible |
支持 |
||
hidden |
支持 |
||
专用函数 |
支持 |
仅用于图片，仅支持 blur() |
|
专用函数 |
支持 |
某些样式属性的值，可以从父节点继承而来。如果在父节点设置了某样式，所有子节点(如果没有单独覆盖父节点样式)都将生效。支持继承的属性如下。
color
direction
font
font-size
font-weight
font-style
font-stretch
font-family
font-variant
letter-spacing
line-height
text-align
text-indent
text-justify
text-shadow
text-transform
visibility
while-space
word-spacing
word-wrap
