Skyline Wxss

Skyline WXSS 样式支持

适用场景

• 检查某个 CSS 属性/值在 Skyline 下是否可用
• 排查 WXSS 样式在 Skyline 下不生效的问题
• 从 WebView 迁移到 Skyline 时评估样式兼容性
• 使用渐变、滤镜、遮罩等高级样式时了解限制
• 查阅 Skyline 支持的 CSS 属性语法

文档索引

WXSS CLI

请务必调用 skyline CLI 对 WXSS 进行检查，确保用法正确。

npx skyline-cli --help

列出所有支持的 WXSS 属性

npx skyline-cli wxss list

从 stdin 读取 WXSS 文本并检查语法

echo "view { color: red;  }" | npx skyline-cli wxss check --json

检查小程序工程内的 WXSS 文件

npx skyline-cli wxss check --json --miniprogram-root ${PROJECT_ROOT} --files pages/index/index.wxss pages/list/list.wxss

强制规则

NEVER: 使用不支持的 CSS 属性

以下属性设置后不生效：

MUST: 使用支持的属性值

部分属性可用但特定值不支持，会被静默忽略：

Incorrect:

.container {
  display: grid;           /* grid 不支持 */
  position: sticky;        /* sticky 不支持 */
  overflow: auto;          /* auto 不支持 */
}

Correct:

.container {
  display: flex;           /* 使用 flex 替代 grid */
  position: relative;      /* sticky 需使用 sticky-header 组件 */
  overflow: hidden;        /* 使用 hidden，滚动用 scroll-view */
}

MUST: 注意渐变限制

渐变限制汇总：

• radial-gradient 仅支持 circle 形状（不支持 ellipse），尺寸仅支持 px，颜色停止仅支持 %
• linear-gradient 停止位置仅支持 % 和固定长度单位（px、rpx 等）
• conic-gradient 完全支持（无额外限制）

MUST: 注意背景/遮罩多值限制

• background-image / mask-image 最多支持 2 个值
• background-position 最多支持 2 组值
• background-repeat / background-size 不支持多组值

MUST: calc() 不支持角度类型

calc() 支持长度计算，但不支持角度计算，需直接写角度值。

MUST: text-overflow 仅在 text 组件生效

text-overflow: ellipsis 在 Skyline 下仅在 `<text>` 组件上生效，在 <view> 上不生效。推荐使用 <text> 组件的 overflow 和 max-lines 属性。

⚠️ 详见 skyline-components 技能了解 text 组件的属性限制。

NEVER: 使用 filter 的 url() 和 drop-shadow()

filter/backdrop-filter 不支持 url() 和 drop-shadow()，也不支持多个函数组合。用 box-shadow 替代 drop-shadow。

支持的函数：blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia()。

MUST: text-decoration-line 仅支持单值

仅支持单个值（none, underline, overline, line-through），不支持多值组合如 underline line-through。

MUST: mask-image 渐变不可用

mask-image 的 linear-gradient() 和 radial-gradient() 不支持，仅 url() 形式可用。

MUST: 注意简写属性的部分有效行为

以下 CSS 简写属性在展开后，部分子属性不生效：

💡 mask-position 简写有效：会自动展开为 mask-position-x + mask-position-y（类似 background-position 的机制）。

Quick Reference

布局属性速查

文本属性速查

边框与背景速查

Flex 属性（全部支持）

以下 Flex 属性的所有定义值完全支持： flex-direction, flex-wrap, align-items, align-self, align-content, justify-content, flex-grow, flex-shrink, flex-basis, order

非标准默认值

以下属性的默认值与 Web 标准不同，需注意：

完全支持的其他属性

pointer-events, text-decoration-style, background-size, transform, opacity, transition-*, animation-*, border-radius, box-shadow, text-shadow, color, font-size, font-family, font-feature-settings, line-height, letter-spacing, word-spacing, z-index, aspect-ratio, content, will-change（仅 auto/contents）, conic-gradient

相关技能

References 目录结构

references/
├── animation.md
├── basics.md
├── flex.md
├── layout.md
├── text.md
└── visual.md

WXSS 变换、过渡与动画

本文档定义 Skyline WXSS 支持的变换、过渡和动画属性。

✅ 以下属性完全支持。

---

变换属性

transform

transform = none | <transform-function>+

<transform-function> = matrix() | matrix3d()
    | translate() | translateX() | translateY() | translateZ() | translate3d()
    | scale() | scaleX() | scaleY() | scaleZ() | scale3d()
    | rotate() | rotateX() | rotateY() | rotateZ() | rotate3d()
    | skew() | skewX() | skewY()
    | perspective()

transform-origin / opacity

transform-origin = <length> && <length> && <length>?   /* 默认 50% 50% 0 */
opacity = <number>                                       /* 默认 1 */

---

过渡属性

transition

transition-property = none | <animatable-property>#    /* 默认 all */
transition-duration = <time>#              /* 默认 0s */
transition-timing-function = <timing-function>#    /* 默认 ease */
transition-delay = <time>#                 /* 默认 0s */

<animatable-property> = all | none
    | transform | transform-origin | opacity
    | 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
    | top | right | bottom | left
    | flex | flex-grow | flex-shrink | flex-basis
    | border | border-width | border-color | border-radius
    | 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-left-radius | border-top-right-radius | border-bottom-left-radius | border-bottom-right-radius
    | border-top | border-right | border-bottom | border-left
    | background-color | background-position | background-size | background
    | background-position-x | background-position-y
    | filter | backdrop-filter | box-shadow | z-index
    | text-decoration-color
    | mask | mask-size | mask-position | mask-position-x | mask-position-y

⚠️ 以下属性不支持 transition/animation：

- 文本相关：text-align、text-shadow、direction、white-space、word-break

- 字体相关：color、font-size、font-weight、font-style、font-family、font-feature-settings、line-height、letter-spacing、word-spacing

- 其他：visibility、pointer-events

---

动画属性

animation

animation-name = [ none | <custom-ident> | <string> ]#
animation-duration = <time>#
animation-timing-function = <timing-function>#
animation-delay = <time>#
animation-iteration-count = [ infinite | <number> ]#
animation-direction = [ normal | reverse | alternate | alternate-reverse ]#
animation-fill-mode = [ forwards | both ]#
animation-play-state = [ running | paused ]#

⚠️ animation-fill-mode：none 和 backwards 虽可写但实际表现均为 forwards

@keyframes

@keyframes <animation-name> {
  <keyframe-selector># { <declaration-list> }
}
<keyframe-selector> = from | to | <percentage>

---

缓动函数

<timing-function> = linear | ease | ease-in | ease-out | ease-in-out
    | steps( <integer> [ , start | end | jump-* ]? )
    | cubic-bezier( <number> , <number> , <number> , <number> )

---

优化属性

will-change

will-change = auto | contents

⚠️ 仅支持 auto 和 contents，不支持 scroll-position 和 <custom-ident>

---

本文档基于 Skyline 官方文档与实际测试生成。

WXSS 基础数据类型

本文档定义 Skyline WXSS 支持的基础数据类型。

标注说明：

- ⚠️ 不支持 = 设置后不生效

- ⛔ 不可用 = 该属性不支持

---

<length>

<length> = <number> <length-unit> | <percentage> | auto | <calc()> | <env()>
<length-unit> = px | rpx | vw | vh | vmin | vmax | rem | em
<percentage> = <number>%

<calc()> = calc( <calc-sum> )
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> = <calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> = <number> | <length> | ( <calc-sum> )

<env()> = env( <custom-ident> [ , <length> ]? )

支持的 env() 变量：safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left

⚠️ calc() 仅支持长度类型计算，不支持角度类型。

<number>

<number> = <integer> | <decimal>
<integer> = ['+' | '-']? <digit>+
<decimal> = <integer> '.' <digit>+

<image>

<image> = <url> | <gradient> | none
<url> = url( <string> )
<gradient> = <linear-gradient> | <radial-gradient> | <conic-gradient>

渐变语法详见 visual.md。

<color>

<color> = <named-color> | <hex-color> | rgb() | rgba() | hsl() | hsla() | hwb() | currentColor
<hex-color> = '#' <hex-digit>{3,4,6,8}

<angle> / <time>

<angle> = <number> [ deg | grad | rad | turn ]
<time> = <number> [ s | ms ]

---

语法符号说明

---

本文档基于 Skyline 官方文档与实际测试生成。

CSS Variable

Skyline 支持 CSS 变量（自定义属性）：

page {
  --primary-color: #1890ff;
  --spacing: 16px;
}

.container {
  color: var(--primary-color);
  padding: var(--spacing);
  width: var(--box-width, 100px);  /* 支持默认值 */
}

⚠️ 变量名必须以 -- 开头

⚠️ var() 支持默认值语法：var(--name, fallback)

---

WXSS Flex 布局属性

本文档定义 Skyline WXSS 支持的 Flex 布局属性。

✅ 以下 Flex 属性的所有值完全支持（除特别标注外）。

---

容器属性

flex-direction / flex-wrap

flex-direction = row | row-reverse | column | column-reverse
flex-wrap = nowrap | wrap | wrap-reverse

flex-direction 默认值：column（rendererOptions.skyline.defaultDisplayBlock: true 时为 row）

align-items / align-self / align-content / justify-content

align-items = stretch | center | flex-start | flex-end | baseline
            | normal | start | end | self-start | self-end
align-self = auto | stretch | center | flex-start | flex-end | baseline
           | start | end | self-start | self-end | normal
align-content = stretch | center | flex-start | flex-end
              | space-between | space-around | space-evenly
              | normal | start | end | baseline
justify-content = center | flex-start | flex-end
                | space-between | space-around | space-evenly
                | start | end | left | right | baseline | stretch

align-items 默认值：stretch（rendererOptions.skyline.defaultDisplayBlock: true 时为 normal） align-content 默认值：normal

---

项目属性

flex / flex-grow / flex-shrink / flex-basis / order

flex = none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
flex-grow = <number>          /* 默认 0 */
flex-shrink = <number>        /* 默认 1 */
flex-basis = <length>         /* 默认 auto */
order = <integer>             /* 默认 0 */

---

不可用属性

justify-items ⛔

justify-items = stretch | center | flex-start | flex-end | start | end | self-start | self-end | left | right

⛔ 不可用

---

本文档基于 Skyline 官方文档与实际测试生成。

WXSS 布局与定位属性

本文档定义 Skyline WXSS 支持的布局、定位和盒模型属性。

标注说明：⚠️ 不支持 | ⛔ 不可用

---

布局属性

display

display = none | block | inline | inline-block | flex | inline-flex

默认值：flex（rendererOptions.skyline.defaultDisplayBlock: true 时为 block）

⚠️ grid, flow-root 不支持

position

position = static | relative | absolute | fixed

默认值：relative

⚠️ sticky 不支持（可使用 sticky-header/sticky-section 替代）

overflow

overflow = visible | hidden

默认值：visible

⚠️ auto, scroll 不支持（滚动请使用 scroll-view 组件）

⚠️ 不支持单独设置 overflow-x / overflow-y

⚠️ 只支持单值，同时设置 X/Y

visibility

visibility = visible | hidden

默认值：visible

box-sizing

box-sizing = content-box | border-box

默认值：border-box（rendererOptions.skyline.defaultContentBox: true 时为 content-box）

⚠️ padding-box 不支持

float ⛔ / contain ⛔ / resize ⛔

⛔ 不可用（contain 可用 -wx-contain 替代）

aspect-ratio / content

aspect-ratio = auto | <number> [ '/' <number> ]?
content = normal | <string>

⚠️ content: none 等同于 normal（都映射为空）

⚠️ content: url() 不支持

---

定位属性

top / right / bottom / left

top | right | bottom | left = <length>

默认值：auto

z-index

z-index = auto | <integer>

---

盒模型属性

width / height / min- / max-

width | height | min-width | min-height | max-width | max-height = <length>

padding / margin

padding = <length>{1,4}
margin = <length>{1,4}

margin 支持 auto 值

---

本文档基于 Skyline 官方文档与实际测试生成。

WXSS 文本属性

本文档定义 Skyline WXSS 支持的文本和字体属性。

标注说明：⚠️ 不支持 | ⛔ 不可用

---

基础文本

color / font-size / line-height

color = <color>             /* 继承，默认 #000 */
font-size = <length>        /* 继承 */
line-height = normal | <number> | <length> | <percentage>   /* 继承 */

direction ⛔

⛔ 不支持

---

字体属性

font-weight

font-weight = normal | bold | <number[100-900]>

⚠️ bolder, lighter 不支持

font-style

font-style = normal | italic | oblique [ <angle> ]?

⚠️ 不支持：oblique

font-family / font-feature-settings

font-family = [ <family-name> | <generic-family> ]#   /* 继承 */
font-feature-settings = normal | <feature-tag-value>#  /* 继承 */

---

空白与换行

white-space

white-space = normal | nowrap

默认值：normal

word-break

word-break = normal | break-all

默认值：normal

⚠️ keep-all 可解析但无实际效果（渲染层未实现），等同于 normal

⚠️ break-word 被映射为 normal

---

对齐

text-align

text-align = left | center | right | justify | start | end

默认值：start

⚠️ justify-all, match-parent 不支持

vertical-align

vertical-align = baseline | top | middle | bottom

⚠️ text-top, text-bottom 不支持

---

装饰

text-decoration

text-decoration = <text-decoration-line> || <text-decoration-style> || <text-decoration-color>

⚠️ 简写部分有效：展开后 text-decoration-thickness 不生效，其余 3 个子属性正常生效

⚠️ 仅在 <text> 和 <input> 组件上生效

text-decoration-line

text-decoration-line = none | underline | overline | line-through

⚠️ 仅支持单值，不支持多值组合（如 underline line-through）

⚠️ 仅在 <text> 和 <input> 组件上生效

text-decoration-style / text-decoration-color

text-decoration-style = solid | double | dotted | dashed | wavy
text-decoration-color = <color>

⚠️ 仅在 <text> 和 <input> 组件上生效

text-overflow

text-overflow = clip | ellipsis    /* 默认 clip; 继承 */

⚠️ text-overflow: ellipsis 在 Skyline 下仅在 `<text>` 组件上生效，在 <view> 等组件上不生效。推荐使用 <text> 组件的 overflow 和 max-lines 属性实现文本截断。详见 skyline-components 技能。

text-shadow / letter-spacing / word-spacing

text-shadow = none | [ <length>{2,3} && <color>? ]#
letter-spacing = normal | <length>              /* 继承 */
word-spacing = normal | <length>                /* 继承 */

---

不可用属性

text-indent ⛔ / overflow-wrap ⛔ / writing-mode ⛔ / text-decoration-thickness ⛔

⛔ 以上属性不可用

>

⚠️ `text-decoration` 简写部分有效：text-decoration 简写展开后，text-decoration-thickness 不生效，其余 3 个子属性（line/style/color）正常生效。

list-style-type ⛔ / list-style-image ⛔ / list-style-position ⛔

⛔ 列表样式属性不可用

---

本文档基于 Skyline 官方文档与实际测试生成。

WXSS 背景、边框与视觉效果

本文档定义 Skyline WXSS 支持的背景、边框、滤镜和遮罩属性。

标注说明：⚠️ 不支持 | ⛔ 不可用

---

背景属性

background-color / background-image

background-color = <color>
background-image = <bg-image>#
<bg-image> = none | <url> | <gradient>

background-position / background-size

background-position = <bg-position>#
background-size = <bg-size>#
<bg-size> = auto | cover | contain | <length>{1,2}

默认值：background-size: auto

background-repeat

background-repeat = <repeat-style>#
<repeat-style> = repeat-x | repeat-y | [ repeat | no-repeat ]{1,2}

background-attachment ⛔ / background-clip ⛔ / background-origin ⛔

⛔ 以上三个属性不可用

>

⚠️ `background` 简写部分有效：background 简写展开后，background-attachment/background-origin/background-clip 不生效，其余子属性（color/image/repeat/position/position-x/position-y/size）正常生效。

---

渐变语法

linear-gradient

<linear-gradient> = linear-gradient( [ <angle> | to <side-or-corner> , ]? <color-stop-list> )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop> [ , <color-stop> ]+
<color-stop> = <color> [ <length-percentage> [ <length-percentage> ]? ]?

⚠️ 颜色停止位置仅支持 % 和固定长度单位（px、rpx 等）

radial-gradient

<radial-gradient> = radial-gradient( circle [ <size> ]? [ at <position> ]? , <color-stop-list> )
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length>

⚠️ 限制：

- 仅支持 circle 形状（不支持 ellipse）

- 尺寸仅支持 px 单位

- 颜色停止位置仅支持 % 单位

conic-gradient

<conic-gradient> = conic-gradient( [ from <angle> ]? [ at <position> ]? , <angular-color-stop-list> )
<angular-color-stop-list> = <angular-color-stop> [ , <angular-color-stop> ]+
<angular-color-stop> = <color> [ <angle-percentage> [ <angle-percentage> ]? ]?
<angle-percentage> = <angle> | <percentage>

✅ conic-gradient 完全支持，无额外限制。

背景/遮罩多值限制

⚠️ 多值数量限制：

- background-image / mask-image 最多支持 2 个值

- background-position 最多支持 2 组值

- background-repeat 最多支持 2 组值

- background-size 最多支持 2 组值

---

边框属性

border-width / border-style / border-color

border-width = <line-width>{1,4}
<line-width> = thin | medium | thick | <length>

border-style = <line-style>{1,4}
<line-style> = none | solid | dotted | dashed

border-color = <color>{1,4}

border-color 默认值：currentColor

border-radius / box-shadow

border-radius = <length>{1,4} [ / <length>{1,4} ]?
box-shadow = none | <shadow>#
<shadow> = inset? && <length>{2,4} && <color>?

---

滤镜属性

filter / backdrop-filter

filter = none | <filter-function>
backdrop-filter = none | <filter-function>

<filter-function> = blur() | brightness() | contrast() | grayscale()
    | hue-rotate() | invert() | opacity() | saturate() | sepia()

⚠️ 不支持多个 filter 函数组合

⚠️ 不支持：url(), drop-shadow()

---

遮罩属性

mask-image / mask-size / mask-repeat / mask-position

mask-image = <mask-image-value>#
<mask-image-value> = none | <url>  /* ⚠️ 渐变不支持，仅 url() 可用 */
mask-size = <bg-size>#             /* 默认 auto */
mask-repeat = <repeat-style>#      /* ⚠️ 非标准默认值: no-repeat（Web 标准默认 repeat） */
mask-position = <bg-position>#     /* ✅ 简写有效，自动展开为 x/y */
mask-position-x = <bg-position-value>#   /* 默认 center */
mask-position-y = <bg-position-value>#   /* 默认 center */

✅ mask-position 简写有效：会自动展开为 mask-position-x + mask-position-y。

⚠️ mask-image 最多支持 2 个值。

mask-origin ⛔ / mask-clip ⛔ / mask-mode ⛔

⛔ 以上属性不可用

>

⚠️ `mask` 简写部分有效：mask 简写展开后，mask-origin/mask-clip 不生效，其余子属性（mask-image/repeat/position/position-x/position-y/size）正常生效。

---

本文档基于 Skyline 官方文档与实际测试生成。