# 支持的 CSS 属性

Lynx 支持大部分常用的 CSS 属性，同时也有一些 Lynx 特有的扩展。

## 布局属性

### Display

| 值                  | 说明                             | 版本 |
| ------------------- | -------------------------------- | ---- |
| `display: none`     | 隐藏元素                         | 1.0  |
| `display: flex`     | Flexbox 布局                     | 1.0  |
| `display: grid`     | Grid 布局                        | 1.0  |
| `display: linear`   | Linear 布局（Lynx 特有，默认）   | 1.0  |
| `display: relative` | Relative 布局（Lynx 特有）       | 2.0  |
| `display: block`    | Block 布局（回退到 Flex/Linear） | 2.0  |
| `display: auto`     | 自动选择布局                     | 2.0  |

### Flex 相关

- `flex-direction`
- `flex-wrap`
- `flex-flow` - 简写属性
- `justify-content`
- `align-items`
- `align-self`
- `align-content`
- `flex-grow`
- `flex-shrink`
- `flex-basis`
- `flex`（简写）
- `order`
- `gap`, `row-gap`, `column-gap`

### Grid 相关

- `grid-template-columns`
- `grid-template-rows`
- `grid-auto-columns`
- `grid-auto-rows`
- `grid-column-start`, `grid-column-end`
- `grid-row-start`, `grid-row-end`
- `grid-column-span`, `grid-row-span` - Lynx 特有
- `grid-auto-flow`
- `justify-items`
- `justify-self`
- `align-items`
- `align-self`
- `gap`, `row-gap`, `column-gap`

### Linear 相关（Lynx 特有）

- `linear-orientation`
- `linear-direction` - Lynx 2.2+
- `linear-gravity`
- `linear-layout-gravity`
- `linear-cross-gravity` - Lynx 1.6+
- `linear-weight`
- `linear-weight-sum`

### Relative 相关（Lynx 特有）

- `relative-id`
- `relative-align-top`, `relative-align-bottom`
- `relative-align-left`, `relative-align-right`
- `relative-align-inline-start`, `relative-align-inline-end` - RTL 支持
- `relative-top-of`, `relative-bottom-of`
- `relative-left-of`, `relative-right-of`
- `relative-inline-start-of`, `relative-inline-end-of` - RTL 支持
- `relative-center`
- `relative-layout-once` - 内部优化属性

### Position 相关

- `position: relative | absolute | fixed | sticky`
- `top`, `right`, `bottom`, `left`
- `z-index`
- `inset-inline-start`, `inset-inline-end` - RTL 支持

## 盒模型属性

### 尺寸

- `width`, `height`
- `min-width`, `min-height`
- `max-width`, `max-height`
- `aspect-ratio`

### 外边距

- `margin`
- `margin-top`, `margin-right`, `margin-bottom`, `margin-left`
- `margin-inline-start`, `margin-inline-end`（LTR/RTL 自适应）

### 内边距

- `padding`
- `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
- `padding-inline-start`, `padding-inline-end`（LTR/RTL 自适应）

### 边框

- `border`
- `border-top`, `border-right`, `border-bottom`, `border-left`
- `border-width`, `border-style`, `border-color`
- `border-radius`
- `border-top-left-radius`, `border-top-right-radius`
- `border-bottom-left-radius`, `border-bottom-right-radius`
- `border-start-start-radius`, `border-start-end-radius` - RTL 支持
- `border-end-start-radius`, `border-end-end-radius` - RTL 支持
- `box-shadow`

### 盒模型

- `box-sizing: border-box | content-box | auto`（默认 `border-box`）
  - 显式 `border-box` 和 `content-box` 可用；迁移 Web 布局时不要只看 `box-sizing` 本身。若原页面同时依赖 `float`、浏览器默认 body margin/line-height、绝对定位包含块或 min/max 尺寸夹取，Lynx 与 Web 可能仍出现像素级差异。
- `overflow: visible | hidden | scroll`（部分支持）
- `clip-path`

## 视觉属性

### 背景

- `background`
- `background-color`
- `background-image`
- `background-size`
- `background-position`
- `background-repeat`
- `background-origin`
- `background-clip`

**兼容性注意**：

- `background-color` 适合直接用于普通 `view` / `page` 背景；常见命名色、透明色以及 `inherit` 继承值均受支持。
- `background` 简写支持常见背景值。迁移包含多个槽位的 Web 简写时，可以拆成已支持的长属性，便于确认每个槽位是否有 Lynx 对应能力。
- `background-attachment` 不在当前支持列表中。Web 简写里如果带有 `fixed` / `scroll` 等 attachment 关键字，迁移时应先评估是否真的需要该滚动绑定语义；仅需要颜色、图片、repeat、position 时，建议显式写出对应长属性：

  ```css
  .box {
    background-image: url('bg.png');
    background-repeat: repeat;
    background-position: 0 0;
    background-color: transparent;
  }
  ```

- Web 对 `html` / `body` 背景有特殊的 canvas 绘制和传播规则；Lynx 的 `page` 是页面根节点和全页背景承载面。需要整页背景时，请优先在 `page` 上设置背景；只有需要内容容器背景时，才把 Web `body` 的背景迁移到根 `view`。
- `background-image: url(...)` 可配合 `background-size`、`background-position`、`background-repeat` 控制背景图尺寸、位置和重复方式。迁移逗号分隔的多图层背景时，不建议混用 `none` 作为透明占位层。Web 会让 `none` 继续参与其它 `background-*` 图层列表的索引对齐：

  ```css
  /* Web: 中间的 none 是一个透明占位层，第三个 position 仍对应 bottom.png */
  .panel {
    background-image: url(top.png), none, url(bottom.png);
    background-position: left top, center, right bottom;
  }
  ```

  在 Lynx 中需要相同视觉效果时，删除空图层，并同步删除其它 `background-*` 列表中对应位置的值；如果确实需要保留独立图层索引，使用嵌套 `<view>` 拆分背景层：

  ```css
  /* Lynx: 删除空图层，并保持其它背景列表的顺序一致 */
  .panel {
    background-image: url(top.png), url(bottom.png);
    background-position: left top, right bottom;
  }
  ```

### 颜色与透明度

- `color`
- `opacity`

### 变换

- `transform: translate, translateX, translateY, translate3d`
- `transform: scale, scaleX, scaleY, scale3d`
- `transform: rotate, rotateX, rotateY, rotateZ, rotate3d`
- `transform-origin`

### 过渡与动画

- `transition`
- `transition-property`
- `transition-duration`
- `transition-timing-function`
- `transition-delay`
- `animation`
- `animation-name`
- `animation-duration`
- `animation-timing-function`
- `animation-delay`
- `animation-iteration-count`
- `animation-direction`
- `animation-fill-mode`

**动画时间函数支持详情**：关键字 `ease`、`linear`、`ease-in`、`ease-out`、`ease-in-out`、`ease-in-ease-out` 均受支持；此外支持 `cubic-bezier(...)`、`steps(...)` 以及 Lynx 特有的 `square-bezier(...)`。详见 [CSS 值和单位](./values-and-units.md#动画时间函数)。

## 文本属性

### 字体

- `font-size`
- `font-weight`
- `font-family`
- `font-style`
- `line-height`

### 文本样式

- `color`
- `text-align`
- `text-decoration`
- `text-overflow: clip | ellipsis`
- `white-space: normal | nowrap`

### Lynx 文本特有

- `-x-auto-font-size`
- `-x-auto-font-size-preset-sizes`

## 其他属性

### 可见性

- `visibility: visible | hidden`
- `display: none`（完全移除）

### 内容裁剪

- `clip-path`
- `mask-image`（部分支持）

### Lynx 特有属性

- `-x-handle-color`
- `-x-handle-size`
- `-x-app-region`
- `-x-overlay`（iOS 特有）

## 不支持的属性

以下 Web CSS 属性在 Lynx 中**不支持**：

- ❌ `display: inline`（使用 `<text>` 组件）
- ❌ `display: inline-block`
- ❌ `float`
- ❌ `clear`
- ❌ `position: static`
- ❌ `table-*` 相关属性
- ❌ `list-style-*` 相关属性
- ❌ `writing-mode`
- ✅ `direction` — 支持 `ltr`, `rtl`, `normal`

### Grid 不支持的属性

- ❌ `grid-column`（简写属性，请使用 `grid-column-start/end`）
- ❌ `grid-row`（简写属性，请使用 `grid-row-start/end`）
- ❌ `grid-area`
- ❌ 命名网格线: `[name] 1fr`
- ❌ `subgrid`

## 版本说明

- **1.0**: 基础布局系统（Linear, Flex, Grid）
- **1.6**: 新增 `linear-cross-gravity`, `stretch` 值
- **2.0**: 新增 Relative 布局，`display: block/auto`
- **2.1**: 新增 `justify-content: stretch`, Grid 完善
- **2.2**: 新增 `linear-direction` 作为 `linear-orientation` 的替代