tmui-cli 2.0.3 → 2.0.5

package/data/uni-app-x-docs/.vuepress/utils/cssJson.json

@@ -0,0 +1 @@
+{"align-content":{"name":"## align-content\n","description":"\nalign-content 属性用于在 Flex 弹性布局中设置多行（或多列）作为一个整体在交叉轴方向的分布方式。注意：如果子元素只有一行（或一列）该属性不起作用，需配合 flex-wrap: wrap 使用。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nalign-content: normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>;\n```\n","values":"\n### align-content 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| center | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。 |\n| flex-start | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 所有行从容器交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。 |\n| flex-end | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 所有行从容器交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐，同时所有后续行与前一个对齐。 |\n| space-between | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。 |\n| space-around | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |\n| stretch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 拉伸所有行来填满剩余空间，剩余空间平均地分配给每一行。 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | stretch |\n\n **注意**：W3C 默认值为：normal","unixTags":"### 适用组件 @unix-tags \n - [view](/component/view.md)\n- [scroll-view](/component/scroll-view.md)\n- [list-view](/component/list-view.md)\n- [list-item](/component/list-item.md)\n- [flow-item](/component/flow-item.md)\n- [swiper-item](/component/swiper-item.md)\n- [navigator](/component/navigator.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/align-content)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.flex.align-content)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/flex/align-content.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/flex/align-content.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/flex/align-content\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/flex/align-content\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>align-content: center</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"align-content: center\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"align-content: center\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>align-content: flex-start</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"align-content: flex-start\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"align-content: flex-start\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>align-content: flex-end</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"align-content: flex-end\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"align-content: flex-end\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>align-content: space-between</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"align-content: space-between\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"align-content: space-between\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>align-content: space-around</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"align-content: space-around\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"align-content: space-around\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>align-content: stretch</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"align-content: stretch\">\n            <view class=\"flex-item-stretch red\"></view>\n            <view class=\"flex-item-stretch green\"></view>\n            <view class=\"flex-item-stretch blue\"></view>\n            <view class=\"flex-item-stretch red\"></view>\n            <view class=\"flex-item-stretch green\"></view>\n            <view class=\"flex-item-stretch blue\"></view>\n          </view>\n          <view class=\"common\" style=\"align-content: stretch\" flatten>\n            <view class=\"flex-item-stretch red\"></view>\n            <view class=\"flex-item-stretch green\"></view>\n            <view class=\"flex-item-stretch blue\"></view>\n            <view class=\"flex-item-stretch red\"></view>\n            <view class=\"flex-item-stretch green\"></view>\n            <view class=\"flex-item-stretch blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n        <text class=\"uni-subtitle-text\">align-content: center; 和 align-content: flex-start;</text>\n      </view>\n\n      <view class=\"demo-box\">\n        <scroll-view class=\"common\" style=\"align-content: center;\" direction=\"horizontal\">\n          <view class=\"flex-item red\"></view>\n          <view class=\"flex-item green\"></view>\n          <view class=\"flex-item blue\"></view>\n          <view class=\"flex-item red\"></view>\n          <view class=\"flex-item green\"></view>\n          <view class=\"flex-item blue\"></view>\n        </scroll-view>\n        <scroll-view class=\"common\" style=\"align-content: flex-start;\" direction=\"horizontal\">\n          <view class=\"flex-item red\"></view>\n          <view class=\"flex-item green\"></view>\n          <view class=\"flex-item blue\"></view>\n          <view class=\"flex-item red\"></view>\n          <view class=\"flex-item green\"></view>\n          <view class=\"flex-item blue\"></view>\n        </scroll-view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"common-box\">\n        <!-- 普通版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">align-content</text>\n          <text class=\"uni-info\">设置值: {{data.alignContent}}</text>\n          <text class=\"uni-info\">获取值: {{data.alignContentActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"test-flex-container test-view\" :style=\"{ alignContent: data.alignContent }\">\n              <view class=\"test-item-small red\"></view>\n              <view class=\"test-item-small green\"></view>\n              <view class=\"test-item-small blue\"></view>\n              <view class=\"test-item-small red\"></view>\n              <view class=\"test-item-small green\"></view>\n              <view class=\"test-item-small blue\"></view>\n            </view>\n          </view>\n        </view>\n\n        <!-- 拍平版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">拍平</text>\n          <text class=\"uni-info\">设置值: {{data.alignContent}}</text>\n          <text class=\"uni-info\">获取值: {{data.alignContentActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"test-flex-container test-view-flatten\" :style=\"{ alignContent: data.alignContent }\" flatten>\n              <view class=\"test-item-small red\"></view>\n              <view class=\"test-item-small green\"></view>\n              <view class=\"test-item-small blue\"></view>\n              <view class=\"test-item-small red\"></view>\n              <view class=\"test-item-small green\"></view>\n              <view class=\"test-item-small blue\"></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"alignContentEnum\" title=\"align-content 枚举值\" @change=\"radioChangeAlignContent\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.alignContent\" title=\"align-content 自定义值\" type=\"text\" @confirm=\"inputChangeAlignContent\"></input-data>\n      </view>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const alignContentEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'flex-start' },\n    { value: 2, name: 'flex-end' },\n    { value: 3, name: 'center' },\n    { value: 4, name: 'space-between' },\n    { value: 5, name: 'space-around' },\n    { value: 6, name: 'stretch' }\n  ]\n\n  const data = reactive({\n    alignContent: 'center',\n    alignContentActual: '',\n    alignContentActualFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n\n  const getPropertyValues = () => {\n    data.alignContentActual = viewRef.value?.style.getPropertyValue('align-content') ?? ''\n    data.alignContentActualFlat = viewRefFlat.value?.style.getPropertyValue('align-content') ?? ''\n  }\n\n  const changeAlignContent = (value: string) => {\n    data.alignContent = value\n    viewRef.value?.style.setProperty('align-content', value)\n    viewRefFlat.value?.style.setProperty('align-content', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeAlignContent = (index: number) => {\n    const selectedItem = alignContentEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeAlignContent(selectedItem.name)\n    }\n  }\n\n  const inputChangeAlignContent = (value: string) => {\n    changeAlignContent(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeAlignContent,\n    data\n  })\n</script>\n\n<style>\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .flex-item {\n    width: 40px;\n    height: 40px;\n    border-bottom:#ddd solid 1px;\n  }\n  .flex-item-stretch {\n    width: 40px;\n  }\n  .red {\n    background-color: red;\n  }\n  .green {\n    background-color: green;\n  }\n  .blue {\n    background-color: blue;\n  }\n  .common {\n    flex: 1;\n    margin: 0 10px;\n    height: 160px;\n    background-color: gray;\n    flex-flow: row wrap;\n  }\n\n  .common-box{\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 150px;\n    background-color: gray;\n  }\n\n\n  .test-flex-container {\n    width: 100%;\n    height: 100%;\n    background-color: gray;\n    flex-flow: row wrap;\n  }\n\n  .test-item-small {\n    width: 35px;\n    height: 35px;\n  }\n\n  .scroll-view-label {\n    font-size: 12px;\n    text-align: center;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"align-items":{"name":"## align-items\n","description":"\nalign-items 属性将所有直接子元素上的 align-self 值设置为一个组。在 Flex 弹性布局中控制子元素在交叉轴方向的对齐方式，相当于为所有子元素设置了默认的 align-self 值。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nalign-items: normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ];\n```\n","values":"\n### align-items 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| center | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素在交叉轴上居中。如果元素在交叉轴上的尺寸（高度/宽度）大于其容器，那么在两个方向均等溢出。 |\n| flex-start | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素在交叉轴上对齐起始位置。 |\n| flex-end | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素在交叉轴上对齐结尾位置。 |\n| stretch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素在交叉轴方向未设置尺寸（高度/宽度）或设置为 auto，会被拉伸到与行相同的高度或列相同的宽度。同时元素仍然保持其宽高比例的约束。 |\n| baseline | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 所有元素向基线对齐。交叉轴起点到元素基线距离最大的元素将会于交叉轴起点对齐以确定基线。 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | stretch |\n\n **注意**：W3C 默认值为：normal","unixTags":"### 适用组件 @unix-tags \n - [view](/component/view.md)\n- [scroll-view](/component/scroll-view.md)\n- [list-view](/component/list-view.md)\n- [list-item](/component/list-item.md)\n- [flow-item](/component/flow-item.md)\n- [swiper-item](/component/swiper-item.md)\n- [navigator](/component/navigator.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/align-items)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.flex.align-items)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/flex/align-items.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/flex/align-items.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/flex/align-items\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/flex/align-items\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>align-items: center</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"align-items: center\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"align-items: center\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>align-items: flex-start</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"align-items: flex-start\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"align-items: flex-start\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>align-items: flex-end</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"align-items: flex-end\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"align-items: flex-end\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>align-items: stretch</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"align-items: stretch\">\n            <view class=\"flex-item-stretch red\"></view>\n            <view class=\"flex-item-stretch green\"></view>\n            <view class=\"flex-item-stretch blue\"></view>\n          </view>\n          <view class=\"common\" style=\"align-items: stretch\" flatten>\n            <view class=\"flex-item-stretch red\"></view>\n            <view class=\"flex-item-stretch green\"></view>\n            <view class=\"flex-item-stretch blue\"></view>\n          </view>\n        </view>\n        </view>\n      </view>\n\n      <view>\n        <text>text组件 align-items: center</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"align-items: center\">\n            <text class=\"flex-item red\">text1</text>\n            <text class=\"flex-item green\">text2</text>\n            <text class=\"flex-item blue\">text3</text>\n          </view>\n          <view class=\"common\" style=\"align-items: center\" flatten>\n            <text class=\"flex-item red\">text1</text>\n            <text class=\"flex-item green\">text2</text>\n            <text class=\"flex-item blue\">text3</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n      </view>\n\n      <view>\n        <text class=\"uni-subtitle-text\">align-items: center; 和 align-items: flex-start;</text>\n        <view class=\"demo-box\">\n          <scroll-view class=\"common\" style=\"align-items: center;\" direction=\"horizontal\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </scroll-view>\n          <scroll-view class=\"common\" style=\"align-items: flex-start;\" direction=\"horizontal\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </scroll-view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"common-box\">\n        <!-- 普通版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">align-items</text>\n          <text class=\"uni-info\">设置值: {{data.alignItems}}</text>\n          <text class=\"uni-info\">获取值: {{data.alignItemsActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"test-flex-container test-view\" :style=\"{ alignItems: data.alignItems }\">\n              <view class=\"test-item-small red\"></view>\n              <view class=\"test-item-small green\"></view>\n              <view class=\"test-item-small blue\"></view>\n            </view>\n          </view>\n        </view>\n\n        <!-- 拍平版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">拍平</text>\n          <text class=\"uni-info\">设置值: {{data.alignItems}}</text>\n          <text class=\"uni-info\">获取值: {{data.alignItemsActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"test-flex-container test-view-flatten\" :style=\"{ alignItems: data.alignItems }\" flatten>\n              <view class=\"test-item-small red\"></view>\n              <view class=\"test-item-small green\"></view>\n              <view class=\"test-item-small blue\"></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n          <enum-data :items=\"alignItemsEnum\" title=\"align-items 枚举值\" @change=\"radioChangeAlignItems\" :compact=\"true\"></enum-data>\n          <input-data :defaultValue=\"data.alignItems\" title=\"align-items 自定义值\" type=\"text\" @confirm=\"inputChangeAlignItems\"></input-data>\n      </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const alignItemsEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'flex-start' },\n    { value: 2, name: 'flex-end' },\n    { value: 3, name: 'center' },\n    { value: 4, name: 'stretch' }\n  ]\n\n  const data = reactive({\n    alignItems: 'center',\n    alignItemsActual: '',\n    alignItemsActualFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n\n  const getPropertyValues = () => {\n    data.alignItemsActual = viewRef.value?.style.getPropertyValue('align-items') ?? ''\n    data.alignItemsActualFlat = viewRefFlat.value?.style.getPropertyValue('align-items') ?? ''\n  }\n\n  const changeAlignItems = (value: string) => {\n    data.alignItems = value\n    viewRef.value?.style.setProperty('align-items', value)\n    viewRefFlat.value?.style.setProperty('align-items', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeAlignItems = (index: number) => {\n    const selectedItem = alignItemsEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeAlignItems(selectedItem.name)\n    }\n  }\n\n  const inputChangeAlignItems = (value: string) => {\n    changeAlignItems(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeAlignItems,\n    data\n  })\n</script>\n\n<style>\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .flex-item {\n    width: 40px;\n    height: 40px;\n  }\n\n  .flex-item-stretch {\n    width: 40px;\n  }\n  .red {\n    background-color: red;\n  }\n  .green {\n    background-color: green;\n  }\n  .blue {\n    background-color: blue;\n  }\n  .common {\n    flex: 1;\n    margin: 0 10px;\n    height: 100px;\n    background-color: gray;\n    flex-direction: row;\n  }\n\n  .common-scroll {\n    flex: 1;\n    margin: 0 10px;\n    height: 100px;\n    background-color: gray;\n    flex-direction: row;\n  }\n\n  .common-box{\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 150px;\n    background-color: gray;\n  }\n\n\n  .test-flex-container {\n    width: 100%;\n    height: 100%;\n    background-color: gray;\n    flex-direction: row;\n  }\n\n  .test-item-small {\n    width: 30px;\n    height: 30px;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"align-self":{"name":"## align-self\n","description":"\nalign-self 属性在 Flex 弹性布局中设置元素在容器中的交叉轴方向的对齐方式，覆盖父元素设置的 align-items 值。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nalign-self: auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>;\n```\n","values":"\n### align-self 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 默认值。与父元素的 align-items 值一致。 |\n| center | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素在交叉轴上居中。如果元素在交叉轴上的尺寸（高度/宽度）大于其容器，那么在两个方向均等溢出。 |\n| flex-start | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素在交叉轴上对齐起始位置。 |\n| flex-end | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素在交叉轴上对齐结尾位置。 |\n| stretch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 如果元素未设置高度或设为auto，将占满整个容器的高度。 |\n| baseline | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 所有元素向基线对齐。交叉轴起点到元素基线距离最大的元素将会于交叉轴起点对齐以确定基线。 |\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/align-self)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.flex.align-self)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/flex/align-self.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/flex/align-self.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/flex/align-self\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/flex/align-self\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\n  <view class=\"css-page uni-theme-root\" style=\"flex-grow: 1;\">\n    <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n    <view>\n      <text class=\"theme-label\">align-self: auto</text>\n      <view class=\"demo-box\">\n        <view class=\"demo-container align-start\">\n          <view class=\"common\" style=\"align-self: auto;\"></view>\n        </view>\n        <view class=\"demo-container align-start\">\n          <view class=\"common\" style=\"align-self: auto;\" flatten></view>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <text class=\"theme-label\">align-self: center</text>\n      <view class=\"demo-box\">\n        <view class=\"demo-container align-center\">\n          <view class=\"common\" style=\"align-self: center;\"></view>\n        </view>\n        <view class=\"demo-container align-center\">\n          <view class=\"common\" style=\"align-self: center;\" flatten></view>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <text class=\"theme-label\">align-self: flex-start</text>\n      <view class=\"demo-box\">\n        <view class=\"demo-container align-start\">\n          <view class=\"common\" style=\"align-self: flex-start;\"></view>\n        </view>\n        <view class=\"demo-container align-start\">\n          <view class=\"common\" style=\"align-self: flex-start;\" flatten></view>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <text class=\"theme-label\">align-self: flex-end</text>\n      <view class=\"demo-box\">\n        <view class=\"demo-container\">\n          <view class=\"common\" style=\"align-self: flex-end;\"></view>\n        </view>\n        <view class=\"demo-container\">\n          <view class=\"common\" style=\"align-self: flex-end;\" flatten></view>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <text class=\"theme-label\">align-self: stretch</text>\n      <view class=\"demo-box\">\n        <view class=\"demo-container\">\n          <view class=\"common\" style=\"align-self: stretch;\"></view>\n        </view>\n        <view class=\"demo-container\">\n          <view class=\"common\" style=\"align-self: stretch;\" flatten></view>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <text class=\"uni-title-text\">scroll-view 组件</text>\n    </view>\n\n    <view class=\"demo-box\">\n      <view class=\"demo-container align-center\">\n        <scroll-view class=\"common\" style=\"align-self: center;\" direction=\"horizontal\">\n          <text class=\"scroll-view-label\">align-self: center</text>\n        </scroll-view>\n      </view>\n      <view class=\"demo-container align-center\">\n        <scroll-view class=\"common\" style=\"align-self: flex-start;\" direction=\"horizontal\">\n          <text class=\"scroll-view-label\">align-self: flex-start</text>\n        </scroll-view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n    </view>\n\n    <!-- 普通版本 -->\n    <view class=\"test-container\">\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">view 组件</text>\n        <text class=\"uni-info\">设置值: {{data.alignSelf}}</text>\n        <text class=\"uni-info\">获取值: {{data.alignSelfActual}}</text>\n        <view class=\"test-box\">\n          <view ref=\"viewRef\" class=\"common test-view\" :style=\"{ alignSelf: data.alignSelf }\">\n            <text class=\"common-text\">view</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">text 组件</text>\n        <text class=\"uni-info\">设置值: {{data.alignSelf}}</text>\n        <text class=\"uni-info\">获取值: {{data.alignSelfActualText}}</text>\n        <view class=\"test-box\">\n          <text ref=\"textRef\" class=\"common cyan-label test-text\" :style=\"{ alignSelf: data.alignSelf }\">text</text>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">image 组件</text>\n        <text class=\"uni-info\">设置值: {{data.alignSelf}}</text>\n        <text class=\"uni-info\">获取值: {{data.alignSelfActualImage}}</text>\n        <view class=\"test-box\">\n          <image ref=\"imageRef\" class=\"common test-image\" :style=\"{ alignSelf: data.alignSelf }\" src=\"/static/test-image/logo.png\"></image>\n        </view>\n      </view>\n    </view>\n\n    <!-- 拍平版本 -->\n    <view class=\"test-container\">\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">view 组件拍平</text>\n        <text class=\"uni-info\">设置值: {{data.alignSelf}}</text>\n        <text class=\"uni-info\">获取值: {{data.alignSelfActualFlat}}</text>\n        <view class=\"test-box\">\n          <view ref=\"viewRefFlat\" class=\"common test-view-flatten\" :style=\"{ alignSelf: data.alignSelf }\" flatten>\n            <text class=\"common-text\">view</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">text 组件拍平</text>\n        <text class=\"uni-info\">设置值: {{data.alignSelf}}</text>\n        <text class=\"uni-info\">获取值: {{data.alignSelfActualTextFlat}}</text>\n        <view class=\"test-box\">\n          <text ref=\"textRefFlat\" class=\"common cyan-label test-text-flatten\" :style=\"{ alignSelf: data.alignSelf }\" flatten>text</text>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">image 组件拍平</text>\n        <text class=\"uni-info\">设置值: {{data.alignSelf}}</text>\n        <text class=\"uni-info\">获取值: {{data.alignSelfActualImageFlat}}</text>\n        <view class=\"test-box\">\n          <image ref=\"imageRefFlat\" class=\"common test-image-flatten\" :style=\"{ alignSelf: data.alignSelf }\" flatten src=\"/static/test-image/logo.png\"></image>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt uni-common-mb\">\n      <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n      <enum-data :items=\"alignSelfEnum\" title=\"align-self 枚举值\" @change=\"radioChangeAlignSelf\" :compact=\"true\"></enum-data>\n      <input-data :defaultValue=\"data.alignSelf\" title=\"align-self 自定义值\" type=\"text\" @confirm=\"inputChangeAlignSelf\"></input-data>\n    </view>\n\n    <!-- #ifndef MP-ALIPAY -->\n      <text class=\"uni-title-text uni-common-mt\">native-view 组件：align-self: center 和 flex-start</text>\n      <text class=\"uni-subtitle-text\">native-view 作为 flex 子项</text>\n      <view class=\"demo-box uni-common-mb\">\n        <view class=\"demo-container align-center\">\n          <test-native-view class=\"common\" style=\"align-self: center;\"></test-native-view>\n        </view>\n        <view class=\"demo-container align-center\">\n          <test-native-view class=\"common\" style=\"align-self: flex-start;\"></test-native-view>\n        </view>\n      </view>\n    <!-- #endif -->\n  </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const alignSelfEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'auto' },\n    { value: 2, name: 'center' },\n    { value: 3, name: 'flex-start' },\n    { value: 4, name: 'flex-end' },\n    { value: 5, name: 'stretch' }\n  ]\n\n  const data = reactive({\n    alignSelf: 'center',\n    alignSelfActual: '',\n    alignSelfActualText: '',\n    alignSelfActualImage: '',\n    alignSelfActualFlat: '',\n    alignSelfActualTextFlat: '',\n    alignSelfActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    data.alignSelfActual = viewRef.value?.style.getPropertyValue('align-self') ?? ''\n    data.alignSelfActualFlat = viewRefFlat.value?.style.getPropertyValue('align-self') ?? ''\n    data.alignSelfActualText = textRef.value?.style.getPropertyValue('align-self') ?? ''\n    data.alignSelfActualTextFlat = textRefFlat.value?.style.getPropertyValue('align-self') ?? ''\n    data.alignSelfActualImage = imageRef.value?.style.getPropertyValue('align-self') ?? ''\n    data.alignSelfActualImageFlat = imageRefFlat.value?.style.getPropertyValue('align-self') ?? ''\n  }\n\n  const changeAlignSelf = (value: string) => {\n    data.alignSelf = value\n    viewRef.value?.style.setProperty('align-self', value)\n    viewRefFlat.value?.style.setProperty('align-self', value)\n    textRef.value?.style.setProperty('align-self', value)\n    textRefFlat.value?.style.setProperty('align-self', value)\n    imageRef.value?.style.setProperty('align-self', value)\n    imageRefFlat.value?.style.setProperty('align-self', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeAlignSelf = (index: number) => {\n    const selectedItem = alignSelfEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeAlignSelf(selectedItem.name)\n    }\n  }\n\n  const inputChangeAlignSelf = (value: string) => {\n    changeAlignSelf(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeAlignSelf,\n    data\n  })\n</script>\n\n<style>\n  .theme-label {\n    color: var(--text-color, #333333);\n  }\n\n  .cyan-label,\n  .common-text,\n  .scroll-view-label {\n    color: #1a1a1a;\n  }\n\n  .demo-container {\n    display: flex;\n    background-color: #cdcbcb;\n    border: #ddd solid 1px;\n    flex: 1;\n    margin: 0 10px;\n  }\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .align-start {\n    align-items: flex-start;\n  }\n\n  .align-center {\n    align-items: center;\n  }\n\n  .common {\n    width: 80px;\n    height: 80px;\n    background-color: cyan;\n  }\n\n  .common-text {\n    width: 50px;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    display: flex;\n    width: 100%;\n    height: 80px;\n    background-color: gray;\n    align-items: flex-start;\n  }\n\n  .scroll-view-label {\n    font-size: 12px;\n    text-align: center;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"animation":{"name":"## animation\n","description":"\nCSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。\n\n\n### uni-app x 兼容性 <Help />\n| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- |\n| x | 5.25 | x | 5.25 | x | 5.25 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nanimation: <single-animation>#;\n```\n","values":"\n### animation 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| alternate | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. |\n| alternate-reverse | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"}],\"rows\":[[\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction. |\n| backwards | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | The beginning property value (as defined in the first @keyframes at-rule) is applied before the animation is displayed, during the period defined by 'animation-delay'. |\n| both | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Both forwards and backwards fill modes are applied. |\n| forwards | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | The final property value (as defined in the last @keyframes at-rule) is maintained after the animation completes. |\n| infinite | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Causes the animation to repeat forever. |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | No animation is performed |\n| normal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Normal playback. |\n| reverse | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"}],\"rows\":[[\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | All iterations of the animation are played in the reverse direction from the way they were specified. |\n","defaultValue":"","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation)\n","example":"","restrictions":"\n### 值限制\n- time\n- timing-function\n- enum\n- identifier\n- number\n"},"animation-composition":{"name":"## animation-composition\n","description":"\nThe animation-composition CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously.\n\n\n### uni-app x 兼容性 <Help />\n| Android | iOS | HarmonyOS |\n| :- | :- | :- |\n| x | x | x |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nanimation-composition: <single-animation-composition>#;\n```\n","values":"\n### animation-composition 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| replace | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | The effect value overrides the underlying value of the property. This is the default value. |\n| add | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | The effect value builds on the underlying value of the property. This operation produces an additive effect. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value. |\n| accumulate | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | The effect and underlying values are combined. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value. |\n","defaultValue":"### 默认值 @default-value \n `replace`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-composition)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-composition)\n","example":"","restrictions":""},"animation-delay":{"name":"## animation-delay\n","description":"\nanimation-delay CSS 属性指定从应用动画到元素开始执行动画之前等待的时间量。动画可以稍后开始、立即从开头开始或立即开始并在动画中途播放。\n\n\n### uni-app x 兼容性 <Help />\n| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- |\n| x | 5.25 | x | 5.25 | x | 5.25 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nanimation-delay: <time>#;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0s`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-delay)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-delay)\n","example":"","restrictions":"\n### 值限制\n- time\n"},"animation-direction":{"name":"## animation-direction\n","description":"\nanimation-direction CSS 属性设置动画是应正向播放、反向播放还是在正向和反向之间交替播放。\n\n\n### uni-app x 兼容性 <Help />\n| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- |\n| x | 5.25 | x | 5.25 | x | 5.25 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nanimation-direction: <single-animation-direction>#;\n```\n","values":"\n### animation-direction 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| alternate | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 动画在每个循环中正反交替播放，第一次迭代是正向播放。确定循环是奇数还是偶数的计数从 1 开始。 |\n| alternate-reverse | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"}],\"rows\":[[\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 动画在每个循环中正反交替播放，第一次迭代是反向播放。确定循环是奇数还是偶数的计数从 1 开始。 |\n| normal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 动画在每个循环中正向播放。换句话说，每次动画循环时，动画将重置为起始状态并重新开始。这是默认值。 |\n| reverse | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"}],\"rows\":[[\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 动画在每个循环中反向播放。换句话说，每次动画循环时，动画将重置为结束状态并重新开始。动画步骤将反向执行，并且时间函数也将被反转。例如，ease-in 时间函数变为 ease-out。 |\n","defaultValue":"### 默认值 @default-value \n `normal`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-direction)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-direction)\n","example":"","restrictions":"\n### 值限制\n- enum\n"},"animation-duration":{"name":"## animation-duration\n","description":"\nanimation-duration CSS 属性设置动画完成一个动画周期所需的时间。\n\n\n### uni-app x 兼容性 <Help />\n| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- |\n| x | 5.25 | x | 5.25 | x | 5.25 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nanimation-duration: <time>#;\n```\n","values":"\n### animation-duration 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | For time-based animations, auto is equivalent to a value of 0s (see below). For CSS scroll-driven animations, auto fills the entire timeline with the animation. |\n","defaultValue":"### 默认值 @default-value \n `0s`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-duration)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-duration)\n","example":"","restrictions":"\n### 值限制\n- time\n"},"animation-fill-mode":{"name":"## animation-fill-mode\n","description":"\nCSS 属性 animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标。\n\n\n### uni-app x 兼容性 <Help />\n| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- |\n| x | 5.25 | x | 5.25 | x | 5.25 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nanimation-fill-mode: <single-animation-fill-mode>#;\n```\n","values":"\n### animation-fill-mode 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| backwards | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。第一个关键帧取决于animation-direction的值：<br/>    <br/>      <br/>        <br/>          animation-direction<br/>          first relevant keyframe<br/>        <br/>      <br/>      <br/>        <br/>          normal or alternate<br/>          0% or from<br/>        <br/>        <br/>          reverse or alternate-reverse<br/>          100% or to |\n| both | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。 |\n| forwards | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 目标将保留由执行期间遇到的最后一个关键帧 (en-US)计算值。最后一个关键帧取决于animation-direction和animation-iteration-count的值：<br/>    <br/>      <br/>        <br/>          animation-direction<br/>          animation-iteration-count<br/>          last keyframe encountered<br/>        <br/>      <br/>      <br/>        <br/>          normal<br/>          even or odd<br/>          100% or to<br/>        <br/>        <br/>          reverse<br/>          even or odd<br/>          0% or from<br/>        <br/>        <br/>          alternate<br/>          even<br/>          0% or from<br/>        <br/>        <br/>          alternate<br/>          odd<br/>          100% or to<br/>        <br/>        <br/>          alternate-reverse<br/>          even<br/>          100% or to<br/>        <br/>        <br/>          alternate-reverse<br/>          odd<br/>          0% or from |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。 |\n","defaultValue":"### 默认值 @default-value \n `none`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-fill-mode)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-fill-mode)\n","example":"","restrictions":"\n### 值限制\n- enum\n"},"animation-iteration-count":{"name":"## animation-iteration-count\n","description":"\nanimation-iteration-count CSS 属性设置动画序列在停止前应播放的次数\n\n\n### uni-app x 兼容性 <Help />\n| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- |\n| x | 5.25 | x | 5.25 | x | 5.25 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nanimation-iteration-count: <single-animation-iteration-count>#;\n```\n","values":"\n### animation-iteration-count 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| infinite | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 无限循环播放动画。 |\n","defaultValue":"### 默认值 @default-value \n `1`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-iteration-count)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-iteration-count)\n","example":"","restrictions":"\n### 值限制\n- number\n- enum\n"},"animation-name":{"name":"## animation-name\n","description":"\nanimation-name CSS 属性指定一个或多个 @keyframes at-rule 的名称，这些 at-rule 描述了要应用于元素的动画。多个 @keyframes at-rule 以逗号分隔的名称列表的形式指定。如果指定的名称不匹配任何 @keyframes at-rule，则不会对任何属性进行动画处理。\n\n\n### uni-app x 兼容性 <Help />\n| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- |\n| x | 5.25 | x | 5.25 | x | 5.25 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nanimation-name: [ none | <keyframes-name> ]#;\n```\n","values":"\n### animation-name 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 一个特殊的关键字，表示没有关键帧。它可用于禁用动画，而不改变其他标识符的顺序，或禁用级联的动画。 |\n","defaultValue":"### 默认值 @default-value \n `none`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-name)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-name)\n","example":"","restrictions":"\n### 值限制\n- identifier\n- enum\n"},"animation-play-state":{"name":"## animation-play-state\n","description":"\nanimation-play-state CSS 属性设置动画是运行还是暂停。\n\n\n### uni-app x 兼容性 <Help />\n| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- |\n| x | 5.25 | x | 5.25 | x | 5.25 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nanimation-play-state: <single-animation-play-state>#;\n```\n","values":"\n### animation-play-state 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| paused | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当前动画已被停止。 |\n| running | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当前动画正在运行。 |\n","defaultValue":"### 默认值 @default-value \n `running`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-play-state)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-play-state)\n","example":"","restrictions":"\n### 值限制\n- enum\n"},"animation-range":{"name":"## animation-range\n","description":"\nThe animation-range CSS shorthand property is used to set the start and end of an animation's attachment range along its timeline, i.e. where along the timeline an animation will start and end.\n\n\n### uni-app x 兼容性 <Help />\n| Android | iOS | HarmonyOS |\n| :- | :- | :- |\n| x | x | x |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nanimation-range: [ <'animation-range-start'> <'animation-range-end'>? ]#;\n```\n","values":"\n### animation-range 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| normal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Represents the start of the timeline in the case of animation-range-start and the end of the timeline in the case of animation-range-end. This is the default value. |\n| cover | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Represents the full range of a named view progress timeline (see CSS scroll-driven animations for more details), from the point where the subject element first starts to enter the scroll port's view progress visibility range (0% progress) to the point where it has completely left it (100% progress). |\n| contain | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Represents the range of a named view progress timeline where the subject element is fully contained by, or fully contains, the scroll port's view progress visibility range.<br/>        <br/>          If the subject element is smaller than the scrollport, it ranges from the point where the subject element is first completely contained by the scroll port (0% progress), to the point where it is no longer completely contained by the scroll port (100% progress).<br/>          If the subject element is larger than the scrollport, it ranges from the point where the subject element first completely covers the scroll port (0% progress), to the point where it no longer completely covers the scroll port (100% progress). |\n| entry | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Represents the range of a named view progress timeline from the point where the subject element first starts to enter the scroll port (0% progress), to the point where it has completely entered the scroll port (100%). |\n| exit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Represents the range of a named view progress timeline from the point where the subject element first starts to exit the scroll port (0% progress), to the point where it has completely exited the scroll port (100%). |\n| entry-crossing | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Represents the range of a named view progress timeline from the point where the subject element first starts to cross the scroll port's starting edge (0% progress), to the point where it has completely crossed the scroll port's starting edge (100%). |\n| exit-crossing | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Represents the range of a named view progress timeline from the point where the subject element first starts to cross the scroll port's end edge (0% progress), to the point where it has completely crossed the scroll port's end edge (100%). |\n","defaultValue":"","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-range)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-range)\n","example":"","restrictions":""},"animation-range-end":{"name":"## animation-range-end\n","description":"\nThe animation-range-end CSS property is used to set the end of an animation's attachment range along its timeline, i.e. where along the timeline an animation will end.\n\n\n### uni-app x 兼容性 <Help />\n| Android | iOS | HarmonyOS |\n| :- | :- | :- |\n| x | x | x |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nanimation-range-end: [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `normal`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-range-end)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-range-end)\n","example":"","restrictions":""},"animation-range-start":{"name":"## animation-range-start\n","description":"\nThe animation-range-start CSS property is used to set the start of an animation's attachment range along its timeline, i.e. where along the timeline an animation will start.\n\n\n### uni-app x 兼容性 <Help />\n| Android | iOS | HarmonyOS |\n| :- | :- | :- |\n| x | x | x |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nanimation-range-start: [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `normal`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-range-start)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-range-start)\n","example":"","restrictions":""},"animation-timeline":{"name":"## animation-timeline\n","description":"\nThe animation-timeline CSS property specifies the timeline that is used to control the progress of a CSS animation.\n\n\n### uni-app x 兼容性 <Help />\n| Android | iOS | HarmonyOS |\n| :- | :- | :- |\n| x | x | x |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nanimation-timeline: <single-animation-timeline>#;\n```\n","values":"\n### animation-timeline 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | The animation is not associated with a timeline. |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | The animation's timeline is the document's default DocumentTimeline. |\n| scroll() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | An anonymous scroll progress timeline is provided by some ancestor scroller of the current element. The function parameters allow you to select the scroller, and the scrolling axis the timeline will be measured along.<br/>    See scroll() for more information. |\n| view() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | An anonymous view progress timeline is provided by the subject that animation-timeline: view(); is set on. The function parameters allow you to select the scrollbar axis along which timeline progress will be tracked and an inset that adjusts the position of the box in which the subject is deemed to be visible.<br/>    See view() for more information. |\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-timeline)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-timeline)\n","example":"","restrictions":""},"animation-timing-function":{"name":"## animation-timing-function\n","description":"\nanimation-timing-function CSS 属性设置动画在每个周期的持续时间内如何进行。\n\n\n### uni-app x 兼容性 <Help />\n| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- |\n| x | 5.25 | x | 5.25 | x | 5.25 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nanimation-timing-function: <easing-function>#;\n```\n","values":"\n### animation-timing-function 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| ease | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 等同于 cubic-bezier(0.25, 0.1, 0.25, 1.0)，即默认值，表示动画在中间加速，在结束时减速。。 |\n| linear | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 等同于 cubic-bezier(0.0, 0.0, 1.0, 1.0)，表示动画以匀速运动。 |\n| ease-in | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 等同于 cubic-bezier(0.42, 0, 1.0, 1.0)，表示动画一开始较慢，随着动画属性的变化逐渐加速，直至完成。 |\n| ease-out | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 等同于 cubic-bezier(0, 0, 0.58, 1.0)，表示动画一开始较快，随着动画的进行逐渐减速。 |\n| ease-in-out | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 等同于 cubic-bezier(0.42, 0, 0.58, 1.0)，表示动画属性一开始缓慢变化，随后加速变化，最后再次减速变化。 |\n| cubic-bezier() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 开发者自定义的三次贝塞尔曲线，其中 p1 和 p3 的值必须在 0 到 1 的范围内。 |\n| steps() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 按照 n 个定格在过渡中显示动画迭代，每个定格等长时间显示。例如，如果 n 为 5，则有 5 个步骤。动画是否在 0%、20%、40%、60% 和 80% 处或 20%、40%、60%、80% 和 100% 处暂停，或者在动画的 0% 和 100% 之间设置 5 个定格，又或是在包括 0% 和 100% 的情况下设置 5 个定格（在 0%、25%、50%、75% 和 100% 处）取决于使用以下跳跃项之一：<br/>    <br/>      jump-start<br/>      <br/>        表示一个左连续函数，因此第一个跳跃发生在动画开始时。<br/>      <br/>      jump-end<br/>      <br/>        表示一个右连续函数，因此最后一个跳跃发生在动画结束时。<br/>      <br/>      jump-none<br/>      <br/>        两端都没有跳跃。相反，在 0% 和 100% 标记处分别停留，每个停留点的持续时间为总动画时间的 1/n。<br/>      <br/>      jump-both<br/>      <br/>        在 0% 和 100% 标记处停留，有效地在动画迭代过程中添加一个步骤。<br/>      <br/>      start<br/>      <br/>        等同于 jump-start。<br/>      <br/>      end<br/>      <br/>        等同于 jump-end。<br/>      <br/>      step-start<br/>      <br/>        等同于 steps(1, jump-start)。<br/>      <br/>      step-end<br/>      <br/>        等同于 steps(1, jump-end)。 |\n| step-start | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 等同于 steps(1, jump-start)。 |\n| step-end | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 等同于 steps(1, jump-end)。 |\n| jump-start | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 表示一个左连续函数，因此第一个跳跃发生在动画开始时。 |\n| jump-end | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 表示一个右连续函数，因此最后一个跳跃发生在动画结束时。 |\n| jump-none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 两端都没有跳跃。相反，在 0% 和 100% 标记处分别停留，每个停留点的持续时间为总动画时间的 1/n。 |\n| jump-both | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在 0% 和 100% 标记处停留，有效地在动画迭代过程中添加一个步骤。 |\n| start | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 等同于 jump-start。 |\n| end | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 等同于 jump-end。 |\n","defaultValue":"### 默认值 @default-value \n `ease`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-timing-function)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-timing-function)\n","example":"","restrictions":"\n### 值限制\n- timing-function\n"},"backdrop-filter":{"name":"## backdrop-filter\n","description":"\nbackdrop-filter 属性设置元素的背景滤镜效果，即对其后方（背景透出）的所有内容添加图形效果（如毛玻璃、背景高斯模糊等）。为了看到效果，必须使元素或其背景至少部分透明。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- |\n| 4.0 | x | 5.25 | x | 5.25 | x | 5.25 |\n\n","syntax":"\n### 语法\n```\nbackdrop-filter: none | <filter-function-list>;\n```\n","values":"\n### backdrop-filter 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"x\",\"5.25\",\"x\",\"5.25\",\"x\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 清除/禁用背景滤镜效果 |\n| blur() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"x\",\"5.25\",\"x\",\"5.25\",\"x\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 对背景内容添加高斯模糊（Gaussian Blur）滤镜效果 |\n","defaultValue":"","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/backdrop-filter)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.backdrop-filter)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/backdrop-filter/backdrop-filter.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/backdrop-filter/backdrop-filter.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/backdrop-filter/backdrop-filter\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/backdrop-filter/backdrop-filter\n\n>示例\n```vue\n<template>\n  <view class=\"page-root uni-theme-root\">\n    <fps />\n\n    <view class=\"control-panel\">\n      <view class=\"control-section\">\n        <text class=\"control-label\">模糊半径</text>\n        <slider class=\"control-wrapper\"\n          :min=\"0\"\n          :max=\"15\"\n          :step=\"1\"\n          :value=\"blurValue\"\n          :show-value=\"true\"\n          @changing=\"updateBlurValue\"\n          @change=\"updateBlurValue\"\n        />\n      </view>\n\n      <view class=\"control-section\">\n        <text class=\"control-label\">背景颜色</text>\n        <view class=\"control-wrapper\">\n          <radio-group class=\"radio-group\" @change=\"updateBackgroundColor\">\n            <radio class=\"control-radio\" value=\"rgba(255, 255, 255, 0.3)\" :checked=\"backgroundColor == 'rgba(255, 255, 255, 0.3)'\">白色</radio>\n            <radio class=\"control-radio\" value=\"rgba(255, 0, 0, 0.3)\" :checked=\"backgroundColor == 'rgba(255, 0, 0, 0.3)'\">红色</radio>\n            <radio class=\"control-radio\" value=\"rgba(0, 255, 0, 0.3)\" :checked=\"backgroundColor == 'rgba(0, 255, 0, 0.3)'\">绿色</radio>\n            <radio class=\"control-radio\" value=\"rgba(0, 0, 255, 0.3)\" :checked=\"backgroundColor == 'rgba(0, 0, 255, 0.3)'\">蓝色</radio>\n          </radio-group>\n        </view>\n      </view>\n\n      <view class=\"control-section\">\n        <text class=\"control-label\">边框宽度</text>\n        <slider class=\"control-wrapper\"\n          :min=\"0\"\n          :max=\"20\"\n          :step=\"1\"\n          :value=\"borderWidthValue\"\n          :show-value=\"true\"\n          @changing=\"updateBorderWidth\"\n          @change=\"updateBorderWidth\"\n        />\n      </view>\n    </view>\n\n    <view class=\"scroll-panel\">\n      <view class=\"floating-display-layer\">\n        <view class=\"demo-section\">\n          <view class=\"demo-slot\">\n            <view class=\"glass-box\" style=\"backdrop-filter: blur(4px);\"></view>\n            <text class=\"demo-label\">静态 4px</text>\n          </view>\n          <view class=\"demo-slot\">\n            <view class=\"glass-box\" style=\"backdrop-filter: blur(8px);\"></view>\n            <text class=\"demo-label\">静态 8px</text>\n          </view>\n          <view class=\"demo-slot\">\n            <view class=\"glass-box\" style=\"backdrop-filter: blur(12px);\"></view>\n            <text class=\"demo-label\">静态 12px</text>\n          </view>\n        </view>\n\n        <view class=\"demo-section\">\n          <view class=\"demo-slot\">\n            <view class=\"glass-box\" :style=\"`backdrop-filter: blur(${blurValue}px);`\"></view>\n            <text class=\"demo-label\">动态 {{ blurValue }}px</text>\n          </view>\n          <view class=\"demo-slot\">\n            <view class=\"glass-box\" :style=\"`backdrop-filter: blur(${blurValue}px); background-color: ${backgroundColor}; border-width: ${borderWidthValue}px;`\"></view>\n            <view class=\"demo-label demo-label-stack\">\n              <text class=\"demo-label-text\">动态 {{ blurValue }}px</text>\n              <text class=\"demo-label-text\">{{ colorLabel }} / {{ borderWidthValue }}px</text>\n            </view>\n          </view>\n          <view class=\"demo-slot\"></view>\n        </view>\n      </view>\n\n      <scroll-view class=\"content-scroll-view\" direction=\"vertical\" :show-scrollbar=\"true\">\n        <view class=\"background-content\">\n          <view v-for=\"section in backgroundSections\" :key=\"section\" class=\"uni-common-mb\">\n            <view class=\"logo-row\">\n              <image v-for=\"logoIndex in logoIndexes\" :key=\"logoIndex\" class=\"logo-item\" src=\"/static/test-image/logo.png\" mode=\"widthFix\"></image>\n            </view>\n            <view class=\"uni-row uni-common-mt\">\n              <view v-for=\"(color, colorIndex) in solidColors1\" :key=\"colorIndex\" class=\"color-box\" :style=\"`background-color: ${color};`\"></view>\n            </view>\n            <view class=\"uni-row\">\n              <view v-for=\"(color, colorIndex) in solidColors2\" :key=\"colorIndex\" class=\"color-box\" :style=\"`background-color: ${color};`\"></view>\n            </view>\n            <view class=\"uni-row uni-common-mt\">\n              <view v-for=\"(gradientStyle, gradientIndex) in gradientStyles1\" :key=\"gradientIndex\" class=\"color-box\" :style=\"gradientStyle\"></view>\n            </view>\n            <view class=\"uni-row\">\n              <view v-for=\"(gradientStyle, gradientIndex) in gradientStyles2\" :key=\"gradientIndex\" class=\"color-box\" :style=\"gradientStyle\"></view>\n            </view>\n            <view class=\"uni-common-mt uni-common-mb\">\n              <text class=\"sample-line uni-common-mb\" v-for=\"(line, lineIndex) in sampleLines\" :key=\"lineIndex\">{{ line }}</text>\n            </view>\n          </view>\n        </view>\n      </scroll-view>\n    </view>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\n  const backgroundSections = [1, 2, 3, 4, 5, 6]\n  const logoIndexes = [1, 2, 3]\n  const solidColors1 = ['#ff0000', '#00ff00', '#ff0000', '#00ff00', '#ff0000', '#00ff00']\n  const solidColors2 = ['#0000ff', '#000000', '#0000ff', '#000000', '#0000ff', '#000000']\n  const gradientStyles1 = [\n    'background-image: linear-gradient(45deg, #ff0000, #ffffff);',\n    'background-image: linear-gradient(90deg, #00ff00, #ffffff);',\n    'background-image: linear-gradient(45deg, #ff0000, #ffffff);',\n    'background-image: linear-gradient(90deg, #00ff00, #ffffff);',\n    'background-image: linear-gradient(45deg, #ff0000, #ffffff);',\n    'background-image: linear-gradient(90deg, #00ff00, #ffffff);'\n  ]\n  const gradientStyles2 = [\n    'background-image: linear-gradient(0deg, #0000ff, #ffffff);',\n    'background-image: linear-gradient(135deg, #000000, #ffffff);',\n    'background-image: linear-gradient(0deg, #0000ff, #ffffff);',\n    'background-image: linear-gradient(135deg, #000000, #ffffff);',\n    'background-image: linear-gradient(0deg, #0000ff, #ffffff);',\n    'background-image: linear-gradient(135deg, #000000, #ffffff);'\n  ]\n  const sampleLines = Array.from({ length: 20 }, () : string => 'uni-app x 蒸汽模式 uni-app x 蒸汽模式')\n\n  const blurValue = ref(8)\n  const borderWidthValue = ref(2)\n  const backgroundColor = ref('rgba(255, 255, 255, 0.3)')\n  const colorLabel = ref('白色')\n\n  const updateBlurValue = (event : UniSliderChangeEvent) => {\n    blurValue.value = event.detail.value\n  }\n\n  const updateBorderWidth = (event : UniSliderChangeEvent) => {\n    borderWidthValue.value = event.detail.value\n  }\n\n  const updateBackgroundColor = (event : UniRadioGroupChangeEvent) => {\n    backgroundColor.value = event.detail.value\n    if (event.detail.value == 'rgba(255, 0, 0, 0.3)') {\n      colorLabel.value = '红色'\n    } else if (event.detail.value == 'rgba(0, 255, 0, 0.3)') {\n      colorLabel.value = '绿色'\n    } else if (event.detail.value == 'rgba(0, 0, 255, 0.3)') {\n      colorLabel.value = '蓝色'\n    } else {\n      colorLabel.value = '白色'\n    }\n  }\n</script>\n\n<style>\n.page-root {\n  flex: 1;\n}\n\n.control-panel {\n  padding: 20px;\n}\n\n.scroll-panel {\n  flex: 1;\n  position: relative;\n}\n\n.content-scroll-view {\n  flex: 1;\n}\n\n.background-content {\n  padding: 10px 20px 80px 20px;\n}\n\n.floating-display-layer {\n  position: absolute;\n  top: 20px;\n  left: 20px;\n  right: 20px;\n  pointer-events: none;\n  z-index: 10;\n}\n\n.logo-row {\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 12px;\n}\n\n.logo-item {\n  width: 33%;\n}\n\n.color-box {\n  flex: 1;\n  height: 64px;\n}\n\n.demo-section {\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 16px;\n}\n\n.demo-slot {\n  flex: 1;\n  align-items: center;\n}\n\n.demo-label {\n  margin: 4px;\n  background-color: rgba(255, 255, 255, 0.9);\n  padding: 4px 6px;\n  box-shadow: 3px 3px 3px gray;\n  color: #1a1a1a;\n}\n\n.demo-label-text {\n  color: #1a1a1a;\n}\n\n.glass-box {\n  width: 100px;\n  height: 100px;\n  background-color: rgba(255, 255, 255, 0.3);\n  border-width: 1px;\n  border-style: solid;\n  border-color: rgba(255, 255, 255, 0.4);\n  border-radius: 16px;\n}\n\n.demo-label-stack {\n  align-items: center;\n}\n\n.control-section {\n  flex-direction: row;\n  align-items: center;\n  background-color: var(--list-background-color, rgba(255, 255, 255, 0.9));\n  margin-bottom: 6px;\n  padding: 5px 10px;\n}\n\n.control-label {\n  margin-right: 10px;\n  color: var(--text-color, #1a1a1a);\n}\n\n.control-radio {\n  color: var(--text-color, #1a1a1a);\n}\n\n.sample-line {\n  color: var(--text-color, #333333);\n}\n\n.control-wrapper {\n  flex: 1;\n}\n\n.radio-group {\n  flex-direction: row;\n  justify-content: space-around;\n}\n</style>\n\n```\n\n:::","restrictions":""},"background":{"name":"## background\n","description":"\nbackground 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin, size, repeat 等。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nbackground: [ <bg-layer> , ]* <final-bg-layer>;\n```\n","values":"\n### background 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| fixed | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 背景固定于视口。在分页媒体中，如果没有视口，则“fixed”背景将相对于页面框固定，因此在每一页都会复制。 |\n| local | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 背景相对于元素内容固定：如果元素具有滚动机制，背景将随元素内容滚动。 |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 被视为图像层，但不绘制任何内容。 |\n| scroll | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 背景固定于元素自身，不随内容滚动（实际上附加在元素的边框上）。 |\n","defaultValue":"","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/background)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.background)\n","example":"","restrictions":"\n### 值限制\n- color\n- gradient\n"},"background-clip":{"name":"## background-clip\n","description":"\nbackground-clip 属性用于设置元素的背景（背景图片或颜色）是否延伸到边框区域、内边距区域、内容区域下面。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | x | x |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nbackground-clip: <box>#;\n```\n","values":"\n### background-clip 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| border-box | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 背景延伸到边框区域，被边框覆盖 |\n| padding-box | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 背景延伸到内边距（padding）区域，不会绘制到边框区域 |\n| content-box | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 背景仅绘制到内容区（content box）区域 |\n","defaultValue":"### 默认值 @default-value \n `border-box`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/background-clip)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.background.background-clip)\n","example":"","restrictions":"\n### 值限制\n- enum\n"},"background-color":{"name":"## background-color\n","description":"\nbackground-color 属性用于设置元素的背景色，属性的值为颜色值或关键字\"transparent\"。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nbackground-color: <color>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `transparent`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/background-color)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.background.background-color)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/background/background-color.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/background/background-color.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/background/background-color\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/background/background-color\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\n    <view class=\"css-page uni-theme-root\" style=\"flex-grow: 1\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text class=\"theme-label\">background-color: blue</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"background-color: blue\"></view>\n          <view class=\"common\" style=\"background-color: blue\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"theme-label\">background-color: #0000ff</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"background-color: #0000ff\"></view>\n          <view class=\"common\" style=\"background-color: #0000ff\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"theme-label\">background-color: #00f</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"background-color: #00f\"></view>\n          <view class=\"common\" style=\"background-color: #00f\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"theme-label\">background-color: #0000ff80</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"background-color: #0000ff80\"></view>\n          <view class=\"common\" style=\"background-color: #0000ff80\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"theme-label\">background-color: #00f8</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"background-color: #00f8\"></view>\n          <view class=\"common\" style=\"background-color: #00f8\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"theme-label\">background-color: rgb(0, 0, 255)</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"background-color: rgb(0, 0, 255)\"></view>\n          <view class=\"common\" style=\"background-color: rgb(0, 0, 255)\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"theme-label\">background-color: rgba(0, 0, 255, 0.5)</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"background-color: rgba(0, 0, 255, 0.5)\"></view>\n          <view class=\"common\" style=\"background-color: rgba(0, 0, 255, 0.5)\" flatten></view>\n        </view>\n      </view>\n      <view>\n        <text class=\"theme-label\">background-color: #0000ff80</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"background-color: #0000ff80\"></view>\n          <view class=\"common\" style=\"background-color: #0000ff80\" flatten></view>\n        </view>\n      </view>\n      <view style=\"margin-left: 30px;margin-right: 30px;\">\n        <button type=\"default\" @click=\"jumpToCheckBoxWithBackgroundColor\">应用background-color示例</button>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">text 组件 background-color </text>\n      </view>\n\n      <view>\n        <text class=\"theme-label\">background-color: blue</text>\n        <view class=\"demo-box\">\n          <text class=\"common\" style=\"background-color: blue\">文字内容</text>\n          <text class=\"common\" style=\"background-color: blue\" flatten>文字内容</text>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"theme-label\">background-color: rgba(0, 0, 255, 0.5)</text>\n        <view class=\"demo-box\">\n          <text class=\"common\" style=\"background-color: rgba(0, 0, 255, 0.5)\">文字内容</text>\n          <text class=\"common\" style=\"background-color: rgba(0, 0, 255, 0.5)\" flatten>文字内容</text>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"theme-label\">background-color: #00ff00</text>\n        <view class=\"demo-box\">\n          <text class=\"common light-background-text\" style=\"background-color: #00ff00\">文字内容</text>\n          <text class=\"common light-background-text\" style=\"background-color: #00ff00\" flatten>文字内容</text>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"theme-label\">background-color: #0000ff80</text>\n        <view class=\"demo-box\">\n          <text class=\"common\" style=\"background-color: #0000ff80\">文字内容</text>\n          <text class=\"common\" style=\"background-color: #0000ff80\" flatten>文字内容</text>\n        </view>\n      </view>\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">image 组件 background-color </text>\n      </view>\n\n      <view>\n        <text class=\"theme-label\">background-color: blue (无src时显示背景色)</text>\n        <view class=\"demo-box\">\n          <image class=\"common-image\" style=\"background-color: blue\"></image>\n          <image class=\"common-image\" style=\"background-color: blue\" flatten></image>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"theme-label\">background-color: rgba(0, 0, 255, 0.5) \\n (无src时显示背景色)</text>\n        <view class=\"demo-box\">\n          <image class=\"common-image\" style=\"background-color: rgba(0, 0, 255, 0.5)\"></image>\n          <image class=\"common-image\" style=\"background-color: rgba(0, 0, 255, 0.5)\" flatten></image>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"theme-label\">background-color: #00ff00 (无src时显示背景色)</text>\n        <view class=\"demo-box\">\n          <image class=\"common-image\" style=\"background-color: #00ff00\"></image>\n          <image class=\"common-image\" style=\"background-color: #00ff00\" flatten></image>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"theme-label\">background-color: #0000ff80 (无src时显示背景色)</text>\n        <view class=\"demo-box\">\n          <image class=\"common-image\" style=\"background-color: #0000ff80\"></image>\n          <image class=\"common-image\" style=\"background-color: #0000ff80\" flatten></image>\n        </view>\n      </view>\n      <view>\n        <text class=\"theme-label\">background-color: yellow \\n (有src时，背景色在图片加载失败或透明区域显示)</text>\n        <view class=\"demo-box\">\n          <image class=\"common-image\" style=\"background-color: yellow\" src=\"/static/test-image/logo.png\"></image>\n          <image class=\"common-image\" style=\"background-color: yellow\" src=\"/static/test-image/logo.png\" flatten></image>\n        </view>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\n      <view class=\"demo-box\">\n        <scroll-view style=\"width: 100px; height: 100px; background-color: #0000ff80;\">\n          <text class=\"scroll-view-label\">#0000ff80</text>\n        </scroll-view>\n        <scroll-view style=\"width: 100px; height: 100px; background-color: green;\">\n          <text class=\"scroll-view-label\">green</text>\n        </scroll-view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <!-- view 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.backgroundColor}}</text>\n          <text class=\"uni-info\">获取值: {{data.backgroundColorActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-view test-view\" :style=\"{ backgroundColor: data.backgroundColor }\">\n              <text class=\"light-background-text\" style=\"font-size: 12px;\">view</text>\n            </view>\n          </view>\n        </view>\n\n        <!-- text 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.backgroundColor}}</text>\n          <text class=\"uni-info\">获取值: {{data.backgroundColorActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-text test-text\" :style=\"{ backgroundColor: data.backgroundColor }\">text</text>\n          </view>\n        </view>\n\n        <!-- image 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.backgroundColor}}</text>\n          <text class=\"uni-info\">获取值: {{data.backgroundColorActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ backgroundColor: data.backgroundColor }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <!-- view 组件拍平测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.backgroundColor}}</text>\n          <text class=\"uni-info\">获取值: {{data.backgroundColorActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-view test-view-flatten\" :style=\"{ backgroundColor: data.backgroundColor }\" flatten>\n              <text class=\"light-background-text\" style=\"font-size: 12px;\">view</text>\n            </view>\n          </view>\n        </view>\n\n        <!-- text 组件拍平测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.backgroundColor}}</text>\n          <text class=\"uni-info\">获取值: {{data.backgroundColorActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-text test-text-flatten\" :style=\"{ backgroundColor: data.backgroundColor }\" flatten>text</text>\n          </view>\n        </view>\n\n        <!-- image 组件拍平测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.backgroundColor}}</text>\n          <text class=\"uni-info\">获取值: {{data.backgroundColorActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ backgroundColor: data.backgroundColor }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 测试控制区域 -->\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :compact=\"true\" :items=\"backgroundColorEnum\" title=\"background-color 枚举值\" @change=\"radioChangeBackgroundColor\"></enum-data>\n        <input-data :defaultValue=\"data.backgroundColor\" title=\"background-color 自定义值\" type=\"text\" @confirm=\"inputChangeBackgroundColor\"></input-data>\n      </view>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup>\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n  // 使用reactive避免ref数据在自动化测试中无法访问\n  const data = reactive({\n    backgroundColor: 'cyan',\n    backgroundColorActual: '',\n    backgroundColorActualText: '',\n    backgroundColorActualImage: '',\n    backgroundColorActualFlat: '',\n    backgroundColorActualTextFlat: '',\n    backgroundColorActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const backgroundColorEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'green' },\n    { value: 2, name: '#88abf0' },\n    { value: 3, name: '#00f8' },\n    { value: 4, name: '#0000ff80' },\n    { value: 5, name: 'rgb(0, 255, 0)' },\n    { value: 6, name: 'rgba(0, 255, 0, 0.5)' },\n    { value: 7, name: '#ddd' }\n  ]\n\n  const getPropertyValues = () => {\n    data.backgroundColorActual = viewRef.value?.style.getPropertyValue('background-color') ?? ''\n    data.backgroundColorActualFlat = viewRefFlat.value?.style.getPropertyValue('background-color') ?? ''\n    data.backgroundColorActualText = textRef.value?.style.getPropertyValue('background-color') ?? ''\n    data.backgroundColorActualTextFlat = textRefFlat.value?.style.getPropertyValue('background-color') ?? ''\n    data.backgroundColorActualImage = imageRef.value?.style.getPropertyValue('background-color') ?? ''\n    data.backgroundColorActualImageFlat = imageRefFlat.value?.style.getPropertyValue('background-color') ?? ''\n  }\n\n  const changeBackgroundColor = (color: string) => {\n    data.backgroundColor = color\n    viewRef.value?.style.setProperty('background-color', color)\n    viewRefFlat.value?.style.setProperty('background-color', color)\n    textRef.value?.style.setProperty('background-color', color)\n    textRefFlat.value?.style.setProperty('background-color', color)\n    imageRef.value?.style.setProperty('background-color', color)\n    imageRefFlat.value?.style.setProperty('background-color', color)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeBackgroundColor = (index: number) => {\n    const selectedItem = backgroundColorEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeBackgroundColor(selectedItem.name)\n    }\n  }\n\n  const inputChangeBackgroundColor = (value: string) => {\n    changeBackgroundColor(value)\n  }\n\n  const jumpToCheckBoxWithBackgroundColor = () => {\n    uni.navigateTo({\n      url:\"/pages/CSS/background/background-color-check-box\"\n    })\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeBackgroundColor,\n    data\n  })\n</script>\n\n<style>\n  .theme-label {\n    color: var(--text-color, #333333);\n  }\n\n  .light-background-text {\n    color: #1a1a1a;\n  }\n\n  .scroll-view-label {\n    color: #ffffff;\n  }\n\n  .common {\n    width: 150px;\n    height: 50px;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  /* 多组件横向布局样式 */\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 60px;\n    background-color: gray;\n  }\n\n\n  .common-view {\n    height: 50px;\n    background-color: yellow;\n  }\n\n  .common-text {\n    height: 50px;\n    background-color: yellow;\n    font-size: 12px;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: yellow;\n  }\n\n  .scroll-view-label {\n    font-size: 12px;\n    text-align: center;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- color\n"},"background-image":{"name":"## background-image\n","description":"\nbackground-image 属性用于为一个元素设置一个或者多个背景图像。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nbackground-image: <bg-image>#;\n```\n","values":"\n### background-image 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| linear-gradient | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 使用由两种或多种颜色沿一条直线进行线性过渡的背景图像。 |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.27\",\"4.27\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表示无背景图 |\n","defaultValue":"","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/background-image)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.background.background-image)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/background/background-image.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/background/background-image.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/background/background-image\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/background/background-image\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex:1\">\n  <!-- #endif -->\n    <view>\n      <!-- 测试iOS平台宽高为0时，设置渐变色会不会导致闪退 -->\n      <view style=\"width: 0px; height: 0px; background-image: linear-gradient(to bottom,#f5f5f5,#eff2f5);\"></view>\n      <text>不支持背景图片，仅支持linear-gradient方法</text>\n      <view v-for=\"(direction) in directionData\">\n        <text>background-image: linear-gradient({{direction}}, red, yellow)</text>\n        <view class=\"common\"\n          :style=\"{'background-image': backgroundSelect ?'linear-gradient('+direction+', red, yellow)':''}\"></view>\n      </view>\n      <view>\n        <text>style 动态切换 background</text>\n        <view @click='changeBgStyle' class=\"common\" :style='testStyle'>{{ testStyle}}</view>\n      </view>\n      <view>\n        <text>class 动态切换 background</text>\n        <view @click='changeBgClass' class=\"common\" :class='testClass'>{{testClass}}</view>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\n      <text class=\"uni-subtitle-text\">background-image: linear-gradient(to right, cyan, yellow);</text>\n      <text class=\"uni-subtitle-text\">background-image: linear-gradient(to bottom, blue, green);</text>\n      <view class=\"demo-box\">\n        <scroll-view class=\"common\" style=\"background-image: linear-gradient(to right, cyan, yellow);width: 150px;\">\n          <text class=\"common-text\">to right</text>\n        </scroll-view>\n        <scroll-view class=\"common\" style=\"background-image: linear-gradient(to bottom, blue, green);width: 150px;\">\n          <text class=\"common-text\">to bottom</text>\n        </scroll-view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">style.setProperty 动态设置 background-image </text>\n        <text>background-image: {{backgroundImage}}</text>\n        <view ref=\"viewRef\" class=\"common\" :style=\"{ backgroundImage: backgroundImage }\">\n          <text style=\"color: white;\">当前 background-image: {{backgroundImage}}</text>\n        </view>\n      </view>\n\n      <!-- 测试控制区域 -->\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :compact=\"true\" :items=\"backgroundImageEnum\" title=\"background-image 枚举值\" @change=\"radioChangeBackgroundImage\"></enum-data>\n        <input-data :defaultValue=\"backgroundImage\" title=\"background-image 自定义值\" type=\"text\" @confirm=\"inputChangeBackgroundImage\"></input-data>\n      </view>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const backgroundSelect = ref(true)\n  const directionData = ref(['to right', 'to left', 'to bottom', 'to top', 'to bottom left', 'to bottom right', 'to top left', 'to top right'])\n  const testStyle = ref(\"background:linear-gradient(to right, red, yellow)\")\n  const testClass = ref(\"bg-color\")\n\n  //供自动化测试使用\n  const updateBackgroundSelect = () => {\n    backgroundSelect.value = !backgroundSelect.value\n  }\n\n  const setBackgroundColor = () => {\n    testStyle.value = \"background:blue\"\n  }\n\n  const setBackgroundImage = () => {\n    testStyle.value = \"background:linear-gradient(to right, red, yellow)\"\n  }\n\n  const changeBgStyle = () => {\n    const isColor = testStyle.value == \"background:blue\"\n    if (isColor) {\n      setBackgroundImage()\n    } else {\n      setBackgroundColor()\n    }\n  }\n\n  const changeBgClass = () => {\n    testClass.value = testClass.value == \"bg-color\" ? \"bg-image\" : \"bg-color\"\n  }\n\n  defineExpose({\n    updateBackgroundSelect,\n    setBackgroundColor,\n    setBackgroundImage,\n    changeBgClass\n  })\n\n  const backgroundImage = ref('linear-gradient(to right, red, yellow)')\n  const viewRef = ref(null as UniElement | null)\n\n  const backgroundImageEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'linear-gradient(to right, red, yellow)' },\n    { value: 2, name: 'linear-gradient(to bottom, blue, green)' },\n    { value: 3, name: 'linear-gradient(to top, red, blue)' },\n    { value: 4, name: 'linear-gradient(45deg, red, yellow)' },\n    { value: 5, name: 'linear-gradient(to right, red, yellow, green)' },\n    { value: 6, name: 'linear-gradient(to right, red 0%, yellow 50%, green 100%)' },\n    { value: 7, name: 'linear-gradient(to bottom left, red, yellow)' }\n  ]\n\n  const changeBackgroundImage = (value: string) => {\n    backgroundImage.value = value\n    viewRef.value?.style.setProperty('background-image', value)\n  }\n\n  const radioChangeBackgroundImage = (index: number) => {\n    const selectedItem = backgroundImageEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeBackgroundImage(selectedItem.name)\n    }\n  }\n\n  const inputChangeBackgroundImage = (value: string) => {\n    changeBackgroundImage(value)\n  }\n\n</script>\n\n<style>\n  .common {\n    width: 250px;\n    height: 100px;\n  }\n  .bg-color {\n    background: blue;\n  }\n  .bg-image {\n    background: linear-gradient(to right, red, yellow);\n  }\n\n  .demo-box {\n    flex-direction: row;\n    justify-content: space-around;\n    margin-top: 10px;\n  }\n\n  .common-text {\n    font-size: 12px;\n    color: white;\n  }\n\n  .native-view-bg {\n    width: 150px;\n    height: 100px;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- gradient\n"},"border":{"name":"## border\n","description":"\nCSS 的 border 是设置元素边框属性的简写形式，用于设置一个或多个以下属性的值：border-width、border-style、border-color。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder: <line-width> || <line-style> || <color>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | 0 |","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/border/border.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/border/border.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/border/border\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/border/border\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <view>\n        <text>border与background-image同时设置</text>\n        <view class=\"common\"\n          style=\"border-style: solid;border-color: rgba(0, 0, 255, 0.1);background-image: linear-gradient(to right, #00ff00, #00bc79)\">\n        </view>\n      </view>\n\n      <view>\n        <text>设置border 多次赋值的场景</text>\n        <view class=\"demo-box\">\n          <view class=\"common multi-times-border\"></view>\n          <view class=\"multi-times-border\" style=\"width: 150px;height: 50px;\"></view>\n        </view>\n      </view>\n\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>border内联样式覆盖，预期右边框为blue</text>\n        <view class=\"demo-box\">\n          <view class=\"multi-times-border\" style=\"border-right: 6px solid blue; width: 150px;height: 50px;\"></view>\n          <view class=\"multi-times-border\" style=\"border-right: 6px solid blue; width: 150px;height: 50px;\" flatten></view>\n        </view>\n      </view>\n      <view>\n        <text>border: 5px dotted blue</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border: 5px dotted blue;\"></view>\n          <view class=\"common\" style=\"border: 5px dotted blue;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border: 6rpx dashed #00f8</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border: 6rpx dashed #00f8;\"></view>\n          <view class=\"common\" style=\"border: 6rpx dashed #00f8;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>设置border的view，通过v-show控制显示</text>\n        <view v-show=\"shown\" class=\"demo-box\">\n          <view class=\"common\" style=\"border: 5px dotted blue;\"></view>\n          <view class=\"common\" style=\"border: 5px dotted blue;\" flatten></view>\n        </view>\n      </view>\n      <view>\n        <text>border: dashed</text>\n        <view class=\"demo-box\">\n          <view class=\"common multi-times-border\" style='border: dashed'></view>\n          <view class=\"common multi-times-border\" style='border: dashed' flatten></view>\n        </view>\n      </view>\n      <view>\n        <text>text组件: border: 5px dotted blue</text>\n        <view class=\"demo-box\">\n          <text class=\"text-border\" style=\"border: 5px dotted blue;\">文本</text>\n          <text class=\"text-border\" style=\"border: 5px dotted blue;\" flatten>文本</text>\n        </view>\n      </view>\n      <view>\n        <text>image组件: border: 5px dotted blue</text>\n        <view class=\"demo-box\">\n          <image class=\"image-border\" style=\"border: 5px dotted blue;\" src=\"/static/test-image/logo.png\"></image>\n          <image class=\"image-border\" style=\"border: 5px dotted blue;\" src=\"/static/test-image/logo.png\" flatten></image>\n        </view>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\n\n      <view class=\"demo-box\">\n        <scroll-view class=\"common\" style=\"border: 1px solid red;\">\n          <text class=\"common-text\">border: 1px solid red</text>\n        </scroll-view>\n        <scroll-view class=\"common\" style=\"border: 5px solid blue;\">\n          <text class=\"common-text\">border: 5px solid blue</text>\n        </scroll-view>\n      </view>\n\n      <view>\n        <text>父视图包含大尺寸子视图的border效果</text>\n        <view class=\"demo-box\">\n          <view class=\"border-child-overlap\">\n            <view style=\"width: 150px;height: 150px;background-color: red;\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.border}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-dynamic\" :style=\"{ border: data.border }\">\n              <text>view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.border}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-dynamic\" :style=\"{ border: data.border }\">text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.border}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-image\" :style=\"{ border: data.border }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.border}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-dynamic\" :style=\"{ border: data.border }\" flatten>\n              <text>view</text>\n            </view>\n          </view>\n        </view>\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.border}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-dynamic\" :style=\"{ border: data.border }\" flatten>text</text>\n          </view>\n        </view>\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.border}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-image\" :style=\"{ border: data.border }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"borderEnum\" title=\"border 枚举值\" @change=\"radioChangeBorder\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.border\" title=\"border 自定义值\" type=\"text\" @confirm=\"inputChangeBorder\"></input-data>\n      </view>\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const shown = ref(false)\n  setTimeout(() => {\n    shown.value = true\n  }, 1000);\n\n  const borderEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'none' },\n    { value: 2, name: '1px solid purple' },\n    { value: 3, name: '2px dashed blue' },\n    { value: 4, name: '3px dotted green' },\n    { value: 5, name: '6rpx dashed #00f8' },\n    { value: 6, name: '8rpx solid #0000ff80' }\n  ]\n\n  const data = reactive({\n    border: '5px solid cyan',\n    borderActual: '',\n    borderActualText: '',\n    borderActualImage: '',\n    borderActualFlat: '',\n    borderActualTextFlat: '',\n    borderActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    const actualValue = viewRef.value?.style.getPropertyValue('border')\n    data.borderActual = actualValue ?? ''\n    data.borderActualFlat = viewRefFlat.value?.style.getPropertyValue('border') ?? ''\n    data.borderActualText = textRef.value?.style.getPropertyValue('border') ?? ''\n    data.borderActualTextFlat = textRefFlat.value?.style.getPropertyValue('border') ?? ''\n    data.borderActualImage = imageRef.value?.style.getPropertyValue('border') ?? ''\n    data.borderActualImageFlat = imageRefFlat.value?.style.getPropertyValue('border') ?? ''\n  }\n\n  const changeBorder = (value: string) => {\n    data.border = value\n    viewRef.value?.style.setProperty('border', value)\n    viewRefFlat.value?.style.setProperty('border', value)\n    textRef.value?.style.setProperty('border', value)\n    textRefFlat.value?.style.setProperty('border', value)\n    imageRef.value?.style.setProperty('border', value)\n    imageRefFlat.value?.style.setProperty('border', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeBorder = (index: number) => {\n    const selectedItem = borderEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeBorder(selectedItem.name)\n    }\n  }\n\n  const inputChangeBorder = (value: string) => {\n    changeBorder(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeBorder,\n    data\n  })\n</script>\n\n<style>\n  .common {\n    width: 150px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .border-child-overlap {\n    width: 150px;\n    height: 150px;\n    border-width: 10px;\n    border-style: solid;\n    border-color: rgba(255, 255, 0, 0.5);\n    border-radius: 6px;\n  }\n\n  .demo-box{\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-between;\n  }\n\n  .multi-times-border {\n    border: 3px solid purple;\n    border-right-color: blue;\n  }\n\n  .common.multi-times-border {\n    border-right-color: green;\n  }\n\n  .multi-times-border {\n    border-right: 6px solid yellow;\n  }\n\n  .text-border {\n    width: 150px;\n    height: 50px;\n    background-color: gray;\n    font-size: 16px;\n    color: black;\n  }\n\n  .image-border {\n    width: 150px;\n    height: 100px;\n    background-color: gray;\n  }\n\n  .common-dynamic {\n    height: 50px;\n    background-color: gray;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n  .test-text{\n    height:50px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 60px;\n    background-color: lightgray;\n  }\n\n  .common-text {\n    font-size: 12px;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- line-width\n- line-style\n- color\n"},"border-bottom":{"name":"## border-bottom\n","description":"\nborder-bottom 简写属性把下边框的所有属性：border-bottom-color，border-bottom-style 与 border-bottom-width 设置到了一个声明中。这些属性描述了元素的下边框样式。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-bottom: <line-width> || <line-style> || <color>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-bottom)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/border/border-bottom.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/border/border-bottom.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/border/border-bottom\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/border/border-bottom\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <view>\n        <text>border-bottom: 5px dashed blue</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-bottom: 5px dashed blue;\"></view>\n          <view class=\"common\" style=\"border-bottom: 5px dashed blue;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-bottom: 6rpx dashed #0000ff80</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-bottom: 6rpx dashed #0000ff80;\"></view>\n          <view class=\"common\" style=\"border-bottom: 6rpx dashed #0000ff80;\" flatten></view>\n        </view>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\n\n      <view class=\"demo-box\">\n        <scroll-view class=\"common\" style=\"border-bottom: 5px dashed blue;\">\n          <text class=\"common-text\">border-bottom: 5px dashed blue</text>\n        </scroll-view>\n        <scroll-view class=\"common\" style=\"border-bottom: 10px solid green;\">\n          <text class=\"common-text\">border-bottom: 10px solid green</text>\n        </scroll-view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderBottomActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ borderBottom: data.borderBottom }\">\n              <text>view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderBottomActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-dynamic test-text\" :style=\"{ borderBottom: data.borderBottom }\">text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderBottomActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ borderBottom: data.borderBottom }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderBottomActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ borderBottom: data.borderBottom }\" flatten>\n              <text>view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderBottomActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-dynamic test-text-flatten\" :style=\"{ borderBottom: data.borderBottom }\" flatten>text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderBottomActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ borderBottom: data.borderBottom }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"borderBottomEnum\" title=\"border-bottom 枚举值\" @change=\"radioChangeBorderBottom\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.borderBottom\" title=\"border-bottom 自定义值\" type=\"text\" @confirm=\"inputChangeBorderBottom\"></input-data>\n      </view>\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup>\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const borderBottomEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'none' },\n    { value: 2, name: '1px solid black' },\n    { value: 3, name: '2px dashed blue' },\n    { value: 4, name: '3px dotted green' },\n    { value: 5, name: '8rpx solid #0000ff80' },\n  ]\n\n  const data = reactive({\n    borderBottom: '6rpx dashed #0000ff80',\n    borderBottomActual: '',\n    borderBottomActualText: '',\n    borderBottomActualImage: '',\n    borderBottomActualFlat: '',\n    borderBottomActualTextFlat: '',\n    borderBottomActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    data.borderBottomActual = viewRef.value?.style.getPropertyValue('border-bottom') ?? ''\n    data.borderBottomActualFlat = viewRefFlat.value?.style.getPropertyValue('border-bottom') ?? ''\n    data.borderBottomActualText = textRef.value?.style.getPropertyValue('border-bottom') ?? ''\n    data.borderBottomActualTextFlat = textRefFlat.value?.style.getPropertyValue('border-bottom') ?? ''\n    data.borderBottomActualImage = imageRef.value?.style.getPropertyValue('border-bottom') ?? ''\n    data.borderBottomActualImageFlat = imageRefFlat.value?.style.getPropertyValue('border-bottom') ?? ''\n  }\n\n  const changeBorderBottom = (value: string) => {\n    data.borderBottom = value\n    viewRef.value?.style.setProperty('border-bottom', value)\n    viewRefFlat.value?.style.setProperty('border-bottom', value)\n    textRef.value?.style.setProperty('border-bottom', value)\n    textRefFlat.value?.style.setProperty('border-bottom', value)\n    imageRef.value?.style.setProperty('border-bottom', value)\n    imageRefFlat.value?.style.setProperty('border-bottom', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeBorderBottom = (index: number) => {\n    const selectedItem = borderBottomEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeBorderBottom(selectedItem.name)\n    }\n  }\n\n  const inputChangeBorderBottom = (value: string) => {\n    changeBorderBottom(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeBorderBottom,\n    data\n  })\n</script>\n\n<style>\n  .common {\n    width: 150px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-between;\n  }\n\n  .common-dynamic {\n    height: 50px;\n    background-color: gray;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 60px;\n    background-color: lightgray;\n  }\n\n  .common-text {\n    font-size: 12px;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- line-width\n- line-style\n- color\n"},"border-bottom-color":{"name":"## border-bottom-color\n","description":"\nborder-bottom-color 属性设置一个元素底部边框的颜色。应当指出，在多数情况下，CSS 简写属性 border-color 或 border-bottom 更方便实用。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-bottom-color: <'border-top-color'>;\n```\n","values":"\n### border-bottom-color 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| inherit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 一个代表父元素底边颜色的关键字（可能和 border-bottom-color 默认值不同） |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue-app | #000000 |\n| uvue-web | currentcolor |\n\n **注意**：W3C 默认值为：currentcolor","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom-color)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-bottom-color)\n","example":"","restrictions":"\n### 值限制\n- color\n"},"border-bottom-left-radius":{"name":"## border-bottom-left-radius\n","description":"\nborder-bottom-left-radius 这个 css 属性设置元素左下角的圆角。圆角可以是圆或椭圆（注：应为圆或椭圆的一部分），或者当其中一个值为 0 时，圆角将不被设置，这时这个角将展示为直角。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-bottom-left-radius: <length-percentage>{1,2};\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-bottom-left-radius)\n","example":"","restrictions":"\n### 值限制\n- length\n- percentage\n"},"border-bottom-right-radius":{"name":"## border-bottom-right-radius\n","description":"\n设置元素边框右下角的圆角半径。允许指定一个或两个半径值来定义椭圆形的角。如果只指定一个值将创建一个均匀的圆角。如果指定两个不同的值，第一个值将用于半长轴，第二个值将用于半短轴，从而可以创建椭圆形的圆角，使其在水平和垂直方向上具有不同的曲率。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-bottom-right-radius: <length-percentage>{1,2};\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-bottom-right-radius)\n","example":"","restrictions":"\n### 值限制\n- length\n- percentage\n"},"border-bottom-style":{"name":"## border-bottom-style\n","description":"\n设置元素底部边框的样式。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-bottom-style: <line-style>;\n```\n","values":"\n### border-bottom-style 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。 |\n| solid | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示为一条实线。 |\n| dashed | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。 |\n| dotted | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。 |\n","defaultValue":"### 默认值 @default-value \n `none`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom-style)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-bottom-style)\n","example":"","restrictions":"\n### 值限制\n- enum\n"},"border-bottom-width":{"name":"## border-bottom-width\n","description":"\nborder-bottom-width 属性用于设置元素的底部边框的宽度。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-bottom-width: <line-width>;\n```\n","values":"\n### border-bottom-width 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| thin | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 细边线 |\n| medium | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 中等边线，App平台对应值为3px |\n| thick | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 宽边线，App平台对应值为5px |\n","defaultValue":"### 默认值 @default-value \n `medium`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom-width)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-bottom-width)\n","example":"","restrictions":"\n### 值限制\n- length\n- enum\n"},"border-color":{"name":"## border-color\n","description":"\nCSS 属性 border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color、border-right-color、border-bottom-color、border-left-color。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-color: <color>{1,4};\n```\n","values":"\n### border-color 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| color | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 使用 \\<color> 来表示四个边框的颜色，仅用于单值语法。 |\n| horizontal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 使用 \\<color> 来表示水平（左边框和右边框）边框的颜色，仅用于双值语法。 |\n| vertical | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 使用 \\<color> 来表示垂直（上边框和下边框）边框的颜色，仅用于双值或三值语法。 |\n| top | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 使用 \\<color> 来表示上边框的颜色，仅用于三值或四值语法。 |\n| bottom | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 使用 \\<color> 来表示下边框的颜色，仅用于三值或四值语法。 |\n| right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 使用 \\<color> 来表示右边框的颜色，仅用于四值语法。 |\n| left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 使用 \\<color> 来表示左边框的颜色，仅用于四值语法。 |\n| inherit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 这是一个关键词，用于指示四边的颜色值均继承自父元素的计算值。 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue-app | #000000 |\n| uvue-web | currentcolor |\n\n **注意**：W3C 默认值为：currentcolor","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-color)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-color)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/border/border-color.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/border/border-color.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/border/border-color\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/border/border-color\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>border-color: cyan</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-width: 5px; border-color: cyan; border-style: solid;\"></view>\n          <view class=\"common\" style=\"border-width: 5px; border-color: cyan; border-style: solid;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-color: #00FF00</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-width: 5px; border-color: #00FF00; border-style: solid;\"></view>\n          <view class=\"common\" style=\"border-width: 5px; border-color: #00FF00; border-style: solid;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-color: rgb(0,0,255)</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-width: 5px; border-color: rgb(0,0,255); border-style: solid;\"></view>\n          <view class=\"common\" style=\"border-width: 5px; border-color: rgb(0,0,255); border-style: solid;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-color: rgba(0,255,255,0.5)</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-width: 5px; border-color: rgba(0,255,255,0.5); border-style: solid;\"></view>\n          <view class=\"common\" style=\"border-width: 5px; border-color: rgba(0,255,255,0.5); border-style: solid;\" flatten></view>\n        </view>\n      </view>\n      <view>\n        <text>border-color: #00f8</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-width: 5px; border-color: #00f8; border-style: solid;\"></view>\n          <view class=\"common\" style=\"border-width: 5px; border-color: #00f8; border-style: solid;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-color: #0000ff80</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-width: 5px; border-color: #0000ff80; border-style: solid;\"></view>\n          <view class=\"common\" style=\"border-width: 5px; border-color: #0000ff80; border-style: solid;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-left-color: cyan</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-left-width: 5px; border-left-color: cyan; border-left-style:solid;\"></view>\n          <view class=\"common\" style=\"border-left-width: 5px; border-left-color: cyan; border-left-style:solid;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-top-color: green</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-top-width: 5px; border-top-color: green; border-top-style: solid;\"></view>\n          <view class=\"common\" style=\"border-top-width: 5px; border-top-color: green; border-top-style: solid;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-right-color: yellow</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-right-width: 5px; border-right-color: yellow; border-right-style: solid;\"></view>\n          <view class=\"common\" style=\"border-right-width: 5px; border-right-color: yellow; border-right-style: solid;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-bottom-color: blue</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-bottom-width: 5px; border-bottom-color: blue; border-bottom-style: solid; \"></view>\n          <view class=\"common\" style=\"border-bottom-width: 5px; border-bottom-color: blue; border-bottom-style: solid; \" flatten></view>\n        </view>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\n\n      <view class=\"demo-box\">\n        <scroll-view class=\"common scroll-view-border\" style=\"border-color: cyan;\">\n          <text class=\"common-text\">border-color: cyan</text>\n        </scroll-view>\n        <scroll-view class=\"common scroll-view-border\" style=\"border-color: #00FF00;\">\n          <text class=\"common-text\">border-color: #00FF00</text>\n        </scroll-view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderColor}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderColorActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ borderWidth: '5px', borderColor: data.borderColor, borderStyle: 'solid' }\">\n              <view style=\"flex-grow: 1;background-color: green;\"><text>view</text></view>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderColor}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderColorActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-dynamic test-text\" :style=\"{ borderWidth: '5px', borderColor: data.borderColor, borderStyle: 'solid' }\">text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderColor}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderColorActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ borderWidth: '5px', borderColor: data.borderColor, borderStyle: 'solid' }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderColor}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderColorActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ borderWidth: '5px', borderColor: data.borderColor, borderStyle: 'solid' }\" flatten>\n              <view style=\"flex-grow: 1;background-color: green;\"><text>view</text></view>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderColor}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderColorActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-dynamic test-text-flatten\" :style=\"{ borderWidth: '5px', borderColor: data.borderColor, borderStyle: 'solid' }\" flatten>text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderColor}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderColorActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ borderWidth: '5px', borderColor: data.borderColor, borderStyle: 'solid' }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"borderColorEnum\" title=\"border-color 枚举值\" @change=\"radioChangeBorderColor\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.borderColor\" title=\"border-color 自定义值\" type=\"text\" @confirm=\"inputChangeBorderColor\"></input-data>\n      </view>\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup>\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const borderColorEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'blue' },\n    { value: 2, name: '#0000ff' },\n    { value: 3, name: '#00f8' },\n    { value: 4, name: '#0000ff80' },\n    { value: 5, name: 'rgb(0, 0, 255)' },\n    { value: 6, name: 'rgba(0, 0, 255, 0.5)' }\n  ]\n\n  const data = reactive({\n    borderColor: 'blue',\n    borderColorActual: '',\n    borderColorActualText: '',\n    borderColorActualImage: '',\n    borderColorActualFlat: '',\n    borderColorActualTextFlat: '',\n    borderColorActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    data.borderColorActual = viewRef.value?.style.getPropertyValue('border-color') ?? ''\n    data.borderColorActualFlat = viewRefFlat.value?.style.getPropertyValue('border-color') ?? ''\n    data.borderColorActualText = textRef.value?.style.getPropertyValue('border-color') ?? ''\n    data.borderColorActualTextFlat = textRefFlat.value?.style.getPropertyValue('border-color') ?? ''\n    data.borderColorActualImage = imageRef.value?.style.getPropertyValue('border-color') ?? ''\n    data.borderColorActualImageFlat = imageRefFlat.value?.style.getPropertyValue('border-color') ?? ''\n  }\n\n  const changeBorderColor = (value: string) => {\n    data.borderColor = value\n    viewRef.value?.style.setProperty('border-color', value)\n    viewRefFlat.value?.style.setProperty('border-color', value)\n    textRef.value?.style.setProperty('border-color', value)\n    textRefFlat.value?.style.setProperty('border-color', value)\n    imageRef.value?.style.setProperty('border-color', value)\n    imageRefFlat.value?.style.setProperty('border-color', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeBorderColor = (index: number) => {\n    const selectedItem = borderColorEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeBorderColor(selectedItem.name)\n    }\n  }\n\n  const inputChangeBorderColor = (value: string) => {\n    changeBorderColor(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeBorderColor,\n    data\n  })\n</script>\n\n<style>\n  .common {\n    width: 150px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .common-dynamic {\n    height: 50px;\n    background-color: gray;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 60px;\n    background-color: lightgray;\n  }\n\n  .scroll-view-border {\n    border-width: 5px;\n    border-style: solid;\n  }\n\n  .common-text {\n    font-size: 12px;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- color\n"},"border-left":{"name":"## border-left\n","description":"\nCSS 属性 border-left 是属性border-left-color, border-left-style, 和border-left-width的三者的缩写。这些属性都是在描述一个元素的左边的边框border。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-left: <line-width> || <line-style> || <color>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-left)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-left)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/border/border-left.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/border/border-left.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/border/border-left\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/border/border-left\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <view>\n        <text>border-left: 5px solid blue</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-left: 5px solid blue;\"></view>\n          <view class=\"common\" style=\"border-left: 5px solid blue;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-left: 6rpx dashed #00f8</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-left: 6rpx dashed #00f8;\"></view>\n          <view class=\"common\" style=\"border-left: 6rpx dashed #00f8;\" flatten></view>\n        </view>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\n\n      <view class=\"demo-box\">\n        <scroll-view class=\"common\" style=\"border-left: 5px solid blue;\">\n          <text class=\"common-text\">border-left: 5px solid blue</text>\n        </scroll-view>\n        <scroll-view class=\"common\" style=\"border-left: 10px dotted cyan;\">\n          <text class=\"common-text\">border-left: 10px dotted cyan</text>\n        </scroll-view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderLeftActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ borderLeft: data.borderLeft }\">\n              <text>view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderLeftActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-dynamic test-text\" :style=\"{ borderLeft: data.borderLeft }\">text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderLeftActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ borderLeft: data.borderLeft }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderLeftActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ borderLeft: data.borderLeft }\" flatten>\n              <text>view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderLeftActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-dynamic test-text-flatten\" :style=\"{ borderLeft: data.borderLeft }\" flatten>text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderLeftActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ borderLeft: data.borderLeft }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"borderLeftEnum\" title=\"border-left 枚举值\" @change=\"radioChangeBorderLeft\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.borderLeft\" title=\"border-left 自定义值\" type=\"text\" @confirm=\"inputChangeBorderLeft\"></input-data>\n      </view>\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup>\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const borderLeftEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'none' },\n    { value: 2, name: '1px solid cyan' },\n    { value: 3, name: '2px dashed blue' },\n    { value: 4, name: '3px dotted green' },\n    { value: 5, name: '8rpx dashed #00f8' }\n  ]\n\n  const data = reactive({\n    borderLeft: '5px solid pink',\n    borderLeftActual: '',\n    borderLeftActualText: '',\n    borderLeftActualImage: '',\n    borderLeftActualFlat: '',\n    borderLeftActualTextFlat: '',\n    borderLeftActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    data.borderLeftActual = viewRef.value?.style.getPropertyValue('border-left') ?? ''\n    data.borderLeftActualFlat = viewRefFlat.value?.style.getPropertyValue('border-left') ?? ''\n    data.borderLeftActualText = textRef.value?.style.getPropertyValue('border-left') ?? ''\n    data.borderLeftActualTextFlat = textRefFlat.value?.style.getPropertyValue('border-left') ?? ''\n    data.borderLeftActualImage = imageRef.value?.style.getPropertyValue('border-left') ?? ''\n    data.borderLeftActualImageFlat = imageRefFlat.value?.style.getPropertyValue('border-left') ?? ''\n  }\n\n  const changeBorderLeft = (value: string) => {\n    data.borderLeft = value\n    viewRef.value?.style.setProperty('border-left', value)\n    viewRefFlat.value?.style.setProperty('border-left', value)\n    textRef.value?.style.setProperty('border-left', value)\n    textRefFlat.value?.style.setProperty('border-left', value)\n    imageRef.value?.style.setProperty('border-left', value)\n    imageRefFlat.value?.style.setProperty('border-left', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeBorderLeft = (index: number) => {\n    const selectedItem = borderLeftEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeBorderLeft(selectedItem.name)\n    }\n  }\n\n  const inputChangeBorderLeft = (value: string) => {\n    changeBorderLeft(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeBorderLeft,\n    data\n  })\n</script>\n\n<style>\n  .common {\n    width: 150px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-between;\n  }\n  .common-dynamic {\n    height: 50px;\n    background-color: gray;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 60px;\n    background-color: lightgray;\n  }\n\n  .common-text {\n    font-size: 12px;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- line-width\n- line-style\n- color\n"},"border-left-color":{"name":"## border-left-color\n","description":"\nborder-left-color 属性设置元素的左边框颜色。值得注意的是，在大数情况下使用 border-color 或 border-left 更加方便和普遍。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-left-color: <color>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue-app | #000000 |\n| uvue-web | currentcolor |\n\n **注意**：W3C 默认值为：currentcolor","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-left-color)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-left-color)\n","example":"","restrictions":"\n### 值限制\n- color\n"},"border-left-style":{"name":"## border-left-style\n","description":"\n设置元素左边框的样式。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-left-style: <line-style>;\n```\n","values":"\n### border-left-style 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。 |\n| solid | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示为一条实线。 |\n| dashed | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。 |\n| dotted | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。 |\n","defaultValue":"### 默认值 @default-value \n `none`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-left-style)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-left-style)\n","example":"","restrictions":"\n### 值限制\n- enum\n"},"border-left-width":{"name":"## border-left-width\n","description":"\nborder-left-width 属性用于设置元素的左边框的宽度。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-left-width: <line-width>;\n```\n","values":"\n### border-left-width 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| thin | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 细边线，App平台对应值为1px |\n| medium | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 中等边线，App平台对应值为3px |\n| thick | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 宽边线，App平台对应值为5px |\n","defaultValue":"### 默认值 @default-value \n `medium`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-left-width)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-left-width)\n","example":"","restrictions":"\n### 值限制\n- length\n- enum\n"},"border-radius":{"name":"## border-radius\n","description":"\nCSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-radius)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-radius)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/border/border-radius.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/border/border-radius.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/border/border-radius\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/border/border-radius\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>border-radius: 10px</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-radius: 10px;\"></view>\n          <view class=\"common\" style=\"border-radius: 10px;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-radius: 10rpx</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-radius: 10rpx;\"></view>\n          <view class=\"common\" style=\"border-radius: 10rpx;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-radius: 10% 和阴影</text>\n        <view class=\"demo-box\" style=\"height: 60px;\">\n          <view class=\"common\" style=\"border-radius: 10%;box-shadow: 5px 5px rgba(0, 0, 0, .3);\"></view>\n          <view class=\"common\" style=\"border-radius: 10%;box-shadow: 5px 5px rgba(0, 0, 0, .3);\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-top-left-radius: 10px</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-top-left-radius: 10px\"></view>\n          <view class=\"common\" style=\"border-top-left-radius: 10px\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-top-right-radius: 10px</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-top-right-radius: 10px\"></view>\n          <view class=\"common\" style=\"border-top-right-radius: 10px\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-bottom-left-radius: 10px</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-bottom-left-radius: 10px\"></view>\n          <view class=\"common\" style=\"border-bottom-left-radius: 10px\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-bottom-right-radius: 10px</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-bottom-right-radius: 10px\"></view>\n          <view class=\"common\" style=\"border-bottom-right-radius: 10px\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-top-left-radius: 20%</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-top-left-radius: 20%\"></view>\n          <view class=\"common\" style=\"border-top-left-radius: 20%\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-top-right-radius: 20%</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-top-right-radius: 20%\"></view>\n          <view class=\"common\" style=\"border-top-right-radius: 20%\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-bottom-left-radius: 20%</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-bottom-left-radius: 20%\"></view>\n          <view class=\"common\" style=\"border-bottom-left-radius: 20%\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-bottom-right-radius: 20%</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-bottom-right-radius: 20%\"></view>\n          <view class=\"common\" style=\"border-bottom-right-radius: 20%\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-radius: 150px（长宽不同形成扁圆）</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-radius: 150px\"></view>\n          <view class=\"common\" style=\"border-radius: 150px\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-radius: 150px（与长宽相同形成正圆）</text>\n        <view class=\"demo-box\">\n          <view class=\"common-square\" style=\"border-radius: 150px\"></view>\n          <view class=\"common-square\" style=\"border-radius: 150px\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-radius: 999px（border-radius超出边界形成正圆）</text>\n        <view class=\"demo-box\">\n          <view class=\"square\" style=\"border-radius: 999px; border: 1px solid green; border-top-color: red;\"></view>\n          <view class=\"square\" style=\"border-radius: 999px; border: 1px solid green; border-top-color: red;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-radius: 10px（包含子视图）</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"margin-left: 5px;border-radius: 10px\">\n             <view style=\"background-color: wheat;width: 100%;height: 20px;\"></view>\n          </view>\n          <view class=\"common\" style=\"margin-left: 5px;border-radius: 10px\" flatten>\n             <view style=\"background-color: wheat;width: 100%;height: 20px;\" flatten></view>\n          </view>\n        </view>\n      </view>\n      <view>\n        <text>border-bottom-left-radius: 10px \\nborder-bottom-right-radius: 10px \\n(包含子视图）</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"margin-left: 5px;border-top-left-radius: 10px;border-top-right-radius: 10px\">\n             <view style=\"background-color: wheat;width: 100%;height: 20px;\"></view>\n          </view>\n          <view class=\"common\" style=\"margin-left: 5px;border-top-left-radius: 10px;border-top-right-radius: 10px\" flatten>\n             <view style=\"background-color: wheat;width: 100%;height: 20px;\" flatten></view>\n          </view>\n        </view>\n      </view>\n      <view>\n        <text>text组件: border-radius: 10px</text>\n        <view class=\"demo-box\">\n          <text class=\"text-radius\" style=\"border-radius: 10px;\">文本</text>\n          <text class=\"text-radius\" style=\"border-radius: 10px;\" flatten>文本</text>\n        </view>\n      </view>\n      <view>\n        <text>text组件: border-radius: 25px（与高度相同形成圆角）</text>\n        <view class=\"demo-box\">\n          <text class=\"text-radius-circle\" style=\"border-radius: 25px;\">文本</text>\n          <text class=\"text-radius-circle\" style=\"border-radius: 25px;\" flatten>文本</text>\n        </view>\n      </view>\n      <view>\n        <text>image组件: border-radius: 10px</text>\n        <view class=\"demo-box\">\n          <image class=\"image-radius\" style=\"border-radius: 10px;\" src=\"/static/test-image/logo.png\"></image>\n          <image class=\"image-radius\" style=\"border-radius: 10px;\" src=\"/static/test-image/logo.png\" flatten></image>\n        </view>\n      </view>\n      <view>\n        <text>image组件: border-radius: 100px（与长宽相同形成正圆）</text>\n        <view class=\"demo-box\">\n          <image class=\"image-radius-circle\" style=\"border-radius: 100px;\" src=\"/static/test-image/logo.png\"></image>\n          <image class=\"image-radius-circle\" style=\"border-radius: 100px;\" src=\"/static/test-image/logo.png\" flatten></image>\n        </view>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\n      <view class=\"demo-box\">\n        <scroll-view class=\"common\" style=\"border-radius: 10px;\">\n          <text class=\"common-text\">border-radius: 10px</text>\n        </scroll-view>\n        <scroll-view class=\"common\" style=\"border-radius: 100px;\">\n          <text class=\"common-text\">border-radius: 100px</text>\n        </scroll-view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderRadius}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderRadiusActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ borderRadius: data.borderRadius }\">\n              <view style=\"flex-grow: 1;background-color: bisque;\"><text>view</text></view>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderRadius}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderRadiusActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-dynamic test-text\" :style=\"{ borderRadius: data.borderRadius }\">text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderRadius}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderRadiusActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ borderRadius: data.borderRadius }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderRadius}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderRadiusActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ borderRadius: data.borderRadius }\" flatten>\n              <view style=\"flex-grow: 1;background-color: bisque;\" flatten><text flatten>view</text></view>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderRadius}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderRadiusActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-dynamic test-text-flatten\" :style=\"{ borderRadius: data.borderRadius }\" flatten>text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderRadius}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderRadiusActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ borderRadius: data.borderRadius }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"borderRadiusEnum\" title=\"border-radius 枚举值\" @change=\"radioChangeBorderRadius\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.borderRadius\" title=\"border-radius 自定义值\" type=\"text\" @confirm=\"inputChangeBorderRadius\"></input-data>\n      </view>\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup>\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const borderRadiusEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '5px' },\n    { value: 3, name: '20px' },\n    { value: 4, name: '10rpx' },\n    { value: 5, name: '0%' },\n    { value: 6, name: '50%' },\n    { value: 7, name: '100%' }\n  ]\n\n  const data = reactive({\n    borderRadius: '10px',\n    borderRadiusActual: '',\n    borderRadiusActualText: '',\n    borderRadiusActualImage: '',\n    borderRadiusActualFlat: '',\n    borderRadiusActualTextFlat: '',\n    borderRadiusActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    data.borderRadiusActual = viewRef.value?.style.getPropertyValue('border-radius') ?? ''\n    data.borderRadiusActualFlat = viewRefFlat.value?.style.getPropertyValue('border-radius') ?? ''\n    data.borderRadiusActualText = textRef.value?.style.getPropertyValue('border-radius') ?? ''\n    data.borderRadiusActualTextFlat = textRefFlat.value?.style.getPropertyValue('border-radius') ?? ''\n    data.borderRadiusActualImage = imageRef.value?.style.getPropertyValue('border-radius') ?? ''\n    data.borderRadiusActualImageFlat = imageRefFlat.value?.style.getPropertyValue('border-radius') ?? ''\n  }\n\n  const changeBorderRadius = (value: string) => {\n    data.borderRadius = value\n    viewRef.value?.style.setProperty('border-radius', value)\n    viewRefFlat.value?.style.setProperty('border-radius', value)\n    textRef.value?.style.setProperty('border-radius', value)\n    textRefFlat.value?.style.setProperty('border-radius', value)\n    imageRef.value?.style.setProperty('border-radius', value)\n    imageRefFlat.value?.style.setProperty('border-radius', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeBorderRadius = (index: number) => {\n    const selectedItem = borderRadiusEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeBorderRadius(selectedItem.name)\n    }\n  }\n\n  const inputChangeBorderRadius = (value: string) => {\n    changeBorderRadius(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeBorderRadius,\n    data\n  })\n</script>\n\n<style>\n  .common {\n    width: 150px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .common-square {\n    width: 150px;\n    height: 150px;\n    background-color: gray;\n  }\n\n  .square {\n    width: 150px;\n    height: 150px;\n  }\n\n  .text-radius {\n    width: 150px;\n    height: 50px;\n    background-color: gray;\n    font-size: 16px;\n    color: black;\n  }\n\n  .text-radius-circle {\n    width: 150px;\n    height: 25px;\n    background-color: gray;\n    font-size: 16px;\n    color: black;\n  }\n\n  .image-radius {\n    width: 150px;\n    height: 100px;\n    background-color: gray;\n  }\n\n  .image-radius-circle {\n    width: 100px;\n    height: 100px;\n    background-color: gray;\n  }\n\n  .common-dynamic {\n    height: 50px;\n    background-color: gray;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 60px;\n    background-color: lightgray;\n  }\n\n  .common-text {\n    font-size: 12px;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"border-right":{"name":"## border-right\n","description":"\nCSS 属性 border-right 是属性border-right-color, border-right-style, 和border-right-width的三者的缩写。这些属性都是在描述一个元素的右边的边框border。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-right: <line-width> || <line-style> || <color>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-right)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-right)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/border/border-right.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/border/border-right.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/border/border-right\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/border/border-right\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <view>\n        <text>border-right: 5px solid blue</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-right: 5px solid blue;\"></view>\n          <view class=\"common\" style=\"border-right: 5px solid blue;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-right: 6rpx dashed #00f8</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-right: 6rpx dashed #00f8;\"></view>\n          <view class=\"common\" style=\"border-right: 6rpx dashed #00f8;\" flatten></view>\n        </view>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\n\n      <view class=\"demo-box\">\n        <scroll-view class=\"common\" style=\"border-right: 5px solid blue;\">\n          <text class=\"common-text\">border-right: 5px solid blue</text>\n        </scroll-view>\n        <scroll-view class=\"common\" style=\"border-right: 10px dashed cyan;\">\n          <text class=\"common-text\">border-right: 10px dashed cyan</text>\n        </scroll-view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderRightActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ borderRight: data.borderRight }\">\n              <text>view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderRightActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-dynamic test-text\" :style=\"{ borderRight: data.borderRight }\">text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderRightActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ borderRight: data.borderRight }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderRightActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ borderRight: data.borderRight }\" flatten>\n              <text>view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderRightActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-dynamic test-text-flatten\" :style=\"{ borderRight: data.borderRight }\" flatten>text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderRightActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ borderRight: data.borderRight }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"borderRightEnum\" title=\"border-right 枚举值\" @change=\"radioChangeBorderRight\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.borderRight\" title=\"border-right 自定义值\" type=\"text\" @confirm=\"inputChangeBorderRight\"></input-data>\n      </view>\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup>\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const borderRightEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'none' },\n    { value: 2, name: '1px solid cyan' },\n    { value: 3, name: '2px dashed blue' },\n    { value: 4, name: '3px dotted green' },\n    { value: 5, name: '8rpx dashed #00f8' }\n  ]\n\n  const data = reactive({\n    borderRight: '5px solid pink',\n    borderRightActual: '',\n    borderRightActualText: '',\n    borderRightActualImage: '',\n    borderRightActualFlat: '',\n    borderRightActualTextFlat: '',\n    borderRightActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    data.borderRightActual = viewRef.value?.style.getPropertyValue('border-right') ?? ''\n    data.borderRightActualFlat = viewRefFlat.value?.style.getPropertyValue('border-right') ?? ''\n    data.borderRightActualText = textRef.value?.style.getPropertyValue('border-right') ?? ''\n    data.borderRightActualTextFlat = textRefFlat.value?.style.getPropertyValue('border-right') ?? ''\n    data.borderRightActualImage = imageRef.value?.style.getPropertyValue('border-right') ?? ''\n    data.borderRightActualImageFlat = imageRefFlat.value?.style.getPropertyValue('border-right') ?? ''\n  }\n\n  const changeBorderRight = (value: string) => {\n    data.borderRight = value\n    viewRef.value?.style.setProperty('border-right', value)\n    viewRefFlat.value?.style.setProperty('border-right', value)\n    textRef.value?.style.setProperty('border-right', value)\n    textRefFlat.value?.style.setProperty('border-right', value)\n    imageRef.value?.style.setProperty('border-right', value)\n    imageRefFlat.value?.style.setProperty('border-right', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeBorderRight = (index: number) => {\n    const selectedItem = borderRightEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeBorderRight(selectedItem.name)\n    }\n  }\n\n  const inputChangeBorderRight = (value: string) => {\n    changeBorderRight(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeBorderRight,\n    data\n  })\n</script>\n\n<style>\n  .common {\n    width: 150px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-between;\n  }\n\n  .common-dynamic {\n    height: 50px;\n    background-color: gray;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 60px;\n    background-color: lightgray;\n  }\n\n  .common-text {\n    font-size: 12px;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- line-width\n- line-style\n- color\n"},"border-right-color":{"name":"## border-right-color\n","description":"\nborder-right-color CSS 属性用来设置元素右边的 border. 这个属性的值也可以通过简写的 CSS 属性 border-color 或border-right来设置。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-right-color: <color>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue-app | #000000 |\n| uvue-web | currentcolor |\n\n **注意**：W3C 默认值为：currentcolor","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-right-color)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-right-color)\n","example":"","restrictions":"\n### 值限制\n- color\n"},"border-right-style":{"name":"## border-right-style\n","description":"\nborder-right-style 是 border 中的一个 CSS 子属性，描述的是右边框的样式 border.\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-right-style: <line-style>;\n```\n","values":"\n### border-right-style 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。 |\n| solid | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示为一条实线。 |\n| dashed | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。 |\n| dotted | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。 |\n","defaultValue":"### 默认值 @default-value \n `none`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-right-style)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-right-style)\n","example":"","restrictions":"\n### 值限制\n- enum\n"},"border-right-width":{"name":"## border-right-width\n","description":"\nborder-right-width 属性用于设置元素的右边框的宽度。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-right-width: <line-width>;\n```\n","values":"\n### border-right-width 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| thin | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 细边线，App平台对应值为1px |\n| medium | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 中等边线，App平台对应值为3px |\n| thick | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 宽边线，App平台对应值为5px |\n","defaultValue":"### 默认值 @default-value \n `medium`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-right-width)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-right-width)\n","example":"","restrictions":"\n### 值限制\n- length\n- enum\n"},"border-style":{"name":"## border-style\n","description":"\nborder-style 是一个 CSS 简写属性，用来设定元素所有边框的样式。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-style: <line-style>{1,4};\n```\n","values":"\n### border-style 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。 |\n| solid | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示为一条实线。 |\n| dashed | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。 |\n| dotted | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。 |\n","defaultValue":"### 默认值 @default-value \n `none`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-style)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-style)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/border/border-style.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/border/border-style.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/border/border-style\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/border/border-style\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>border-style: dashed</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-width: 5px; border-style: dashed\"></view>\n          <view class=\"common\" style=\"border-width: 5px; border-style: dashed\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-left-style: dashed</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-left-width: 5px; border-left-style: dashed\"></view>\n          <view class=\"common\" style=\"border-left-width: 5px; border-left-style: dashed\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-top-style: dashed</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-top-width: 5px; border-top-style: dashed\"></view>\n          <view class=\"common\" style=\"border-top-width: 5px; border-top-style: dashed\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-style: dashed; border-radius: 10px</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-width: 5px; border-style: dashed; border-radius: 10px\"></view>\n          <view class=\"common\" style=\"border-width: 5px; border-style: dashed; border-radius: 10px\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-right-style: dotted</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-right-width: 5px; border-right-style: dotted\"></view>\n          <view class=\"common\" style=\"border-right-width: 5px; border-right-style: dotted\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-bottom-style: dotted</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-bottom-width: 5px; border-bottom-style: dotted\"></view>\n          <view class=\"common\" style=\"border-bottom-width: 5px; border-bottom-style: dotted\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-style: solid (缺省 border-width)</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-style: solid;\"></view>\n          <view class=\"common\" style=\"border-style: solid;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-style: none</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-style: none; border-width: 5px;\"></view>\n          <view class=\"common\" style=\"border-style: none; border-width: 5px;\" flatten></view>\n        </view>\n      </view>\n\n      <view @click=\"changeBorderStyle\">\n        <text>border-style: 点击切换</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" :style=\"borderStyle\"></view>\n          <view class=\"common\" :style=\"borderStyle\" flatten></view>\n        </view>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\n\n      <view class=\"demo-box\">\n        <scroll-view class=\"common scroll-view-border\" style=\"border-style: dashed;\">\n          <text class=\"common-text\">border-style: dashed</text>\n        </scroll-view>\n        <scroll-view class=\"common scroll-view-border\" style=\"border-style: dotted;\">\n          <text class=\"common-text\">border-style: dotted</text>\n        </scroll-view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderStyleValue}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderStyleActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ borderWidth: '5px', borderStyle: data.borderStyleValue }\">\n              <text>view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderStyleValue}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderStyleActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-dynamic test-text\" :style=\"{ borderWidth: '5px', borderStyle: data.borderStyleValue }\">text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderStyleValue}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderStyleActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ borderWidth: '5px', borderStyle: data.borderStyleValue }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderStyleValue}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderStyleActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ borderWidth: '5px', borderStyle: data.borderStyleValue }\" flatten>\n              <text>view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderStyleValue}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderStyleActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-dynamic test-text-flatten\" :style=\"{ borderWidth: '5px', borderStyle: data.borderStyleValue }\" flatten>text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderStyleValue}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderStyleActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ borderWidth: '5px', borderStyle: data.borderStyleValue }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"borderStyleEnum\" title=\"border-style 枚举值\" @change=\"radioChangeBorderStyle\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.borderStyleValue\" title=\"border-style 自定义值\" type=\"text\" @confirm=\"inputChangeBorderStyle\"></input-data>\n      </view>\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  let isSolid = false\n  const data = reactive({\n    borderStyleValue: 'solid',\n    borderStyleActual: '',\n    borderStyleActualText: '',\n    borderStyleActualImage: '',\n    borderStyleActualFlat: '',\n    borderStyleActualTextFlat: '',\n    borderStyleActualImageFlat: ''\n  })\n\n  const borderStyle = ref(\"border-style: none; border-width: 5px;\")\n\n  const changeBorderStyle = () => {\n    isSolid = !isSolid\n    const solid = \"border-style: solid; border-width: 5px;\"\n    const none = \"\"\n    borderStyle.value = isSolid ? solid : none\n  }\n\n  const borderStyleEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'none' },\n    { value: 2, name: 'solid' },\n    { value: 3, name: 'dashed' },\n    { value: 4, name: 'dotted' }\n  ]\n\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    data.borderStyleActual = viewRef.value?.style.getPropertyValue('border-style') ?? ''\n    data.borderStyleActualFlat = viewRefFlat.value?.style.getPropertyValue('border-style') ?? ''\n    data.borderStyleActualText = textRef.value?.style.getPropertyValue('border-style') ?? ''\n    data.borderStyleActualTextFlat = textRefFlat.value?.style.getPropertyValue('border-style') ?? ''\n    data.borderStyleActualImage = imageRef.value?.style.getPropertyValue('border-style') ?? ''\n    data.borderStyleActualImageFlat = imageRefFlat.value?.style.getPropertyValue('border-style') ?? ''\n  }\n\n  const changeBorderStyleValue = (value: string) => {\n    data.borderStyleValue = value\n    viewRef.value?.style.setProperty('border-style', value)\n    viewRefFlat.value?.style.setProperty('border-style', value)\n    textRef.value?.style.setProperty('border-style', value)\n    textRefFlat.value?.style.setProperty('border-style', value)\n    imageRef.value?.style.setProperty('border-style', value)\n    imageRefFlat.value?.style.setProperty('border-style', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeBorderStyle = (index: number) => {\n    const selectedItem = borderStyleEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeBorderStyleValue(selectedItem.name)\n    }\n  }\n\n  const inputChangeBorderStyle = (value: string) => {\n    changeBorderStyleValue(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeBorderStyle,\n    data\n  })\n</script>\n\n<style>\n  .common {\n    width: 150px;\n    height: 50px;\n    background-color: gray;\n  }\n  .demo-box{\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .common-dynamic {\n    height: 50px;\n    background-color: gray;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 60px;\n    background-color: lightgray;\n  }\n\n  .scroll-view-border {\n    border-width: 5px;\n    border-color: blue;\n  }\n\n  .common-text {\n    font-size: 12px;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"border-top":{"name":"## border-top\n","description":"\nCSS 属性 border-top是属性 border-top-color, border-top-style, 和border-top-width 的三者的缩写。这些属性都是在描述一个元素的上方的边框border。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-top: <line-width> || <line-style> || <color>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-top)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/border/border-top.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/border/border-top.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/border/border-top\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/border/border-top\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <view>\n        <text>border-top: 5px dashed blue</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-top: 5px dashed blue;\"></view>\n          <view class=\"common\" style=\"border-top: 5px dashed blue;\" flatten></view>\n        </view>\n      </view>\n\n      <view>\n        <text>border-top: 6rpx dashed #0000ff80</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"border-top: 6rpx dashed #0000ff80;\"></view>\n          <view class=\"common\" style=\"border-top: 6rpx dashed #0000ff80;\" flatten></view>\n        </view>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\n\n      <view class=\"demo-box\">\n        <scroll-view class=\"common\" style=\"border-top: 5px dashed blue;\">\n          <text class=\"common-text\">border-top: 5px dashed blue</text>\n        </scroll-view>\n        <scroll-view class=\"common\" style=\"border-top: 10px solid cyan;\">\n          <text class=\"common-text\">border-top: 10px solid cyan</text>\n        </scroll-view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderTopActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ borderTop: data.borderTop }\">\n              <text>view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderTopActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-dynamic test-text\" :style=\"{ borderTop: data.borderTop }\">text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.borderTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderTopActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ borderTop: data.borderTop }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderTopActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ borderTop: data.borderTop }\" flatten>\n              <text>view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderTopActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-dynamic test-text-flatten\" :style=\"{ borderTop: data.borderTop }\" flatten>text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.borderTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.borderTopActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ borderTop: data.borderTop }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"borderTopEnum\" title=\"border-top 枚举值\" @change=\"radioChangeBorderTop\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.borderTop\" title=\"border-top 自定义值\" type=\"text\" @confirm=\"inputChangeBorderTop\"></input-data>\n      </view>\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup>\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const borderTopEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'none' },\n    { value: 2, name: '1px solid cyan' },\n    { value: 3, name: '2px dashed blue' },\n    { value: 4, name: '3px dotted yellow' },\n    { value: 5, name: '8rpx dashed #0000ff80' }\n  ]\n\n  const data = reactive({\n    borderTop: '5px solid purple',\n    borderTopActual: '',\n    borderTopActualText: '',\n    borderTopActualImage: '',\n    borderTopActualFlat: '',\n    borderTopActualTextFlat: '',\n    borderTopActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    data.borderTopActual = viewRef.value?.style.getPropertyValue('border-top') ?? ''\n    data.borderTopActualFlat = viewRefFlat.value?.style.getPropertyValue('border-top') ?? ''\n    data.borderTopActualText = textRef.value?.style.getPropertyValue('border-top') ?? ''\n    data.borderTopActualTextFlat = textRefFlat.value?.style.getPropertyValue('border-top') ?? ''\n    data.borderTopActualImage = imageRef.value?.style.getPropertyValue('border-top') ?? ''\n    data.borderTopActualImageFlat = imageRefFlat.value?.style.getPropertyValue('border-top') ?? ''\n  }\n\n  const changeBorderTop = (value: string) => {\n    data.borderTop = value\n    viewRef.value?.style.setProperty('border-top', value)\n    viewRefFlat.value?.style.setProperty('border-top', value)\n    textRef.value?.style.setProperty('border-top', value)\n    textRefFlat.value?.style.setProperty('border-top', value)\n    imageRef.value?.style.setProperty('border-top', value)\n    imageRefFlat.value?.style.setProperty('border-top', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeBorderTop = (index: number) => {\n    const selectedItem = borderTopEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeBorderTop(selectedItem.name)\n    }\n  }\n\n  const inputChangeBorderTop = (value: string) => {\n    changeBorderTop(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeBorderTop,\n    data\n  })\n</script>\n\n<style>\n  .common {\n    width: 150px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-between;\n  }\n\n  .common-dynamic {\n    height: 50px;\n    background-color: gray;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 60px;\n    background-color: lightgray;\n  }\n\n  .common-text {\n    font-size: 12px;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- line-width\n- line-style\n- color\n"},"border-top-color":{"name":"## border-top-color\n","description":"\nborder-top-color 属性用以设置某元素顶部 border的颜色。通常，用border-color 或 border-top 设置该颜色更为便捷可取。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-top-color: <color>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue-app | #000000 |\n| uvue-web | currentcolor |\n\n **注意**：W3C 默认值为：currentcolor","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top-color)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-top-color)\n","example":"","restrictions":"\n### 值限制\n- color\n"},"border-top-left-radius":{"name":"## border-top-left-radius\n","description":"\nborder-top-left-radius 用来设置元素左上角的圆角效果。这段圆弧（角）可以是圆或椭圆的一部分。如果其中有一个值为 0，那么将无圆角效果（见 border-top-left-radius 取值方式)。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-top-left-radius: <length-percentage>{1,2};\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-top-left-radius)\n","example":"","restrictions":"\n### 值限制\n- length\n- percentage\n"},"border-top-right-radius":{"name":"## border-top-right-radius\n","description":"\nborder-top-right-radius 属性设置元素的右上角弧形，这个圆弧可能是一个椭圆，或者其中一个值是 0 的话，就是没有圆弧，换句话就是说拐角是方形的。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-top-right-radius: <length-percentage>{1,2};\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top-right-radius)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-top-right-radius)\n","example":"","restrictions":"\n### 值限制\n- length\n- percentage\n"},"border-top-style":{"name":"## border-top-style\n","description":"\nborder-top-style CSS 设置元素上边框的 border.\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-top-style: <line-style>;\n```\n","values":"\n### border-top-style 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。 |\n| solid | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示为一条实线。 |\n| dashed | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。 |\n| dotted | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。 |\n","defaultValue":"### 默认值 @default-value \n `none`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top-style)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-top-style)\n","example":"","restrictions":"\n### 值限制\n- enum\n"},"border-top-width":{"name":"## border-top-width\n","description":"\nborder-top-width 属性用于设置元素的上边框的宽度。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-top-width: <line-width>;\n```\n","values":"\n### border-top-width 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| thin | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 细边线，App平台对应值为1px |\n| medium | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 中等边线，App平台对应值为3px |\n| thick | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 宽边线，App平台对应值为5px |\n","defaultValue":"### 默认值 @default-value \n `medium`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top-width)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-top-width)\n","example":"","restrictions":"\n### 值限制\n- length\n- enum\n"},"border-width":{"name":"## border-width\n","description":"\nborder-width 属性用于设置元素边框的宽度。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nborder-width: <line-width>{1,4};\n```\n","values":"\n### border-width 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| thin | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 细边线，App平台对应值为1px |\n| medium | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 中等边线，App平台对应值为3px |\n| thick | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 宽边线，App平台对应值为5px |\n","defaultValue":"### 默认值 @default-value \n `medium`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-width)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.border.border-width)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/border/border-width.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/border/border-width.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/border/border-width\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/border/border-width\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view class=\"border-width-page uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\n  <view class=\"border-width-page uni-theme-root\">\n    <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n    <view>\n      <text class=\"theme-label\">border-width: 5px (无 border-style)</text>\n      <view class=\"demo-box\">\n        <view class=\"common\" style=\"border-width: 5px;\"></view>\n        <view class=\"common\" style=\"border-width: 5px;\" flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text class=\"theme-label\">border-width: 5px</text>\n      <view class=\"demo-box\">\n        <view class=\"common\" style=\"border-width: 5px; border-style: solid;\"></view>\n        <view class=\"common\" style=\"border-width: 5px; border-style: solid;\" flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text class=\"theme-label\">border-left-width: 5px</text>\n      <view class=\"demo-box\">\n        <view class=\"common\" style=\"border-left-width: 5px; border-left-style: solid; \"></view>\n        <view class=\"common\" style=\"border-left-width: 5px; border-left-style: solid; \" flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text class=\"theme-label\">border-top-width: 10px</text>\n      <view class=\"demo-box\">\n        <view class=\"common\" style=\"border-top-width: 10px; border-top-style: solid; \"></view>\n        <view class=\"common\" style=\"border-top-width: 10px; border-top-style: solid; \" flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text class=\"theme-label\">border-right-width: 15px</text>\n      <view class=\"demo-box\">\n        <view class=\"common\" style=\"border-right-width: 15px; border-right-style: solid; \"></view>\n        <view class=\"common\" style=\"border-right-width: 15px; border-right-style: solid; \" flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text class=\"theme-label\">border-bottom-width: 20px</text>\n      <view class=\"demo-box\">\n        <view class=\"common\" style=\"border-bottom-width: 20px; border-bottom-style: solid; \"></view>\n        <view class=\"common\" style=\"border-bottom-width: 20px; border-bottom-style: solid; \" flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text class=\"theme-label\">左下细边框蓝色</text>\n      <view class=\"demo-box\">\n        <view class=\"common\"\n          style=\"border-left-width: 0.5px; border-bottom-width: 0.5px; border-left-style: solid; border-bottom-style: solid; border-color:blue;\">\n        </view>\n        <view class=\"common\"\n          style=\"border-left-width: 0.5px; border-bottom-width: 0.5px; border-left-style: solid; border-bottom-style: solid; border-color:blue;\"\n          flatten></view>\n      </view>\n    </view>\n\n    <!-- 圆角测试 -->\n    <view>\n      <text class=\"theme-label\">border-width: 5px (无 border-style)</text>\n      <view class=\"demo-box\">\n        <view class=\"common-circle\" style=\"border-width: 5px;\"></view>\n        <view class=\"common-circle\" style=\"border-width: 5px;\" flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text class=\"theme-label\">border-width: 5px</text>\n      <view class=\"demo-box\">\n        <view class=\"common-circle\" style=\"border-width: 5px; border-style: solid;\"></view>\n        <view class=\"common-circle\" style=\"border-width: 5px; border-style: solid;\" flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text class=\"theme-label\">border-left-width: 5px</text>\n      <view class=\"demo-box\">\n        <view class=\"common-circle\" style=\"border-left-width: 5px; border-left-style: solid; \"></view>\n        <view class=\"common-circle\" style=\"border-left-width: 5px; border-left-style: solid; \" flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text class=\"theme-label\">border-top-width: 10px</text>\n      <view class=\"demo-box\">\n        <view class=\"common-circle\" style=\"border-top-width: 10px; border-top-style: solid; \"></view>\n        <view class=\"common-circle\" style=\"border-top-width: 10px; border-top-style: solid; \" flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text class=\"theme-label\">border-right-width: 15px</text>\n      <view class=\"demo-box\">\n        <view class=\"common-circle\" style=\"border-right-width: 15px; border-right-style: solid; \"></view>\n        <view class=\"common-circle\" style=\"border-right-width: 15px; border-right-style: solid; \" flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text class=\"theme-label\">border-bottom-width: 20px</text>\n      <view class=\"demo-box\">\n        <view class=\"common-circle\" style=\"border-bottom-width: 20px; border-bottom-style: solid; \"></view>\n        <view class=\"common-circle\" style=\"border-bottom-width: 20px; border-bottom-style: solid; \" flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text class=\"theme-label\">左下细边框蓝色</text>\n      <view class=\"demo-box\">\n        <view class=\"common-circle\"\n          style=\"border-left-width: 0.5px; border-bottom-width: 0.5px; border-left-style: solid; border-bottom-style: solid; border-color:blue;\">\n        </view>\n        <view class=\"common-circle\"\n          style=\"border-left-width: 0.5px; border-bottom-width: 0.5px; border-left-style: solid; border-bottom-style: solid; border-color:blue;\"\n          flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text class=\"theme-label\">裁剪展现半圆</text>\n      <view class=\"demo-box\">\n        <view style=\"width: 100px;height: 50px; /* 高度是宽度的一半 */\n            overflow: hidden; /* 隐藏下半部分 */\n            position: relative;\">\n          <view style=\"width: 100px;height: 100px; /* 完整的圆高度 */\n            border: 10px solid blue; /* 环的厚度和颜色 */\n            border-radius: 50px; /* 变成正圆 */\n            box-sizing: border-box; /* 确保边框计算在宽度内 */\"></view>\n        </view>\n        <view\n            <!-- #ifndef APP-ANDROID -->\n            flatten\n            <!-- #endif -->\n            style=\"width: 100px;height: 50px; /* 高度是宽度的一半 */\n            overflow: hidden; /* 隐藏下半部分 */\n            position: relative;\"\n          >\n          <view flatten style=\"width: 100px;height: 100px; /* 完整的圆高度 */\n            border: 10px solid blue; /* 环的厚度和颜色 */\n            border-radius: 50px; /* 变成正圆 */\n            box-sizing: border-box; /* 确保边框计算在宽度内 */\"></view>\n        </view>\n      </view>\n    </view>\n\n    <view>\n      <text class=\"theme-label\">底边透明，3边上色的 3/4 圆弧</text>\n      <view class=\"demo-box\">\n        <view style=\"width: 40px; height: 40px;\n          /* 1. 基础边框：厚度、样式、透明色 */\n          border: 5px solid transparent;\n          /* 2. 给其中三条边上色，形成 3/4 圆弧 */\n          border-top-color: blue;\n          border-right-color: blue;\n          border-left-color: blue;\n          /* 3. 变成正圆 */\n          border-radius: 20px;\n          transform: rotate(45deg) translateZ(0); /* 开启硬件加速 */\"></view>\n        <view flatten style=\"width: 40px; height: 40px;\n          /* 1. 基础边框：厚度、样式、透明色 */\n          border: 5px solid transparent;\n          /* 2. 给其中三条边上色，形成 3/4 圆弧 */\n          border-top-color: blue;\n          border-right-color: blue;\n          border-left-color: blue;\n          /* 3. 变成正圆 */\n          border-radius: 20px;\n          transform: rotate(45deg) translateZ(0); /* 开启硬件加速 */\"></view>\n      </view>\n    </view>\n\n    <view>\n      <text class=\"theme-label\">底边上色，1/4边透明的 3/4 圆弧 加scale缩小</text>\n      <view class=\"demo-box\">\n        <view style=\"width: 32px;height: 32px;\n          border-radius: 16px;\n          border: 2px solid blue;\n          border-bottom-color: transparent;\n          transform: scale(0.5) rotate(45deg);\n          \"></view>\n        <view flatten style=\"width: 32px;height: 32px;\n          border-radius: 16px;\n          border: 2px solid blue;\n          border-bottom-color: transparent;\n          transform: scale(0.5) rotate(45deg);\n          \"></view>\n      </view>\n    </view>\n\n    <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\n\n    <view class=\"demo-box\">\n      <scroll-view class=\"common scroll-view-border\" style=\"border-width: 5px;\">\n        <text class=\"common-text\">border-width: 5px</text>\n      </scroll-view>\n      <scroll-view class=\"common scroll-view-border\" style=\"border-width: 10px;\">\n        <text class=\"common-text\">border-width: 10px</text>\n      </scroll-view>\n    </view>\n\n    <!-- 动态设置 -->\n    <view class=\"uni-common-mt\">\n      <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n    </view>\n\n    <!-- 普通版本 -->\n    <view class=\"test-container\">\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">view 组件</text>\n        <text class=\"uni-info\">设置值: {{data.borderWidth}}</text>\n        <text class=\"uni-info\">获取值: {{data.borderWidthActual}}</text>\n        <view class=\"test-box\">\n          <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ borderWidth: data.borderWidth, borderStyle: 'solid' }\">\n            <view style=\"flex-grow: 1;background-color: cyan;\"><text class=\"cyan-text\">view</text></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">text 组件</text>\n        <text class=\"uni-info\">设置值: {{data.borderWidth}}</text>\n        <text class=\"uni-info\">获取值: {{data.borderWidthActualText}}</text>\n        <view class=\"test-box\">\n          <text ref=\"textRef\" class=\"common-dynamic test-text\"\n            :style=\"{ borderWidth: data.borderWidth, borderStyle: 'solid' }\">text</text>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">image 组件</text>\n        <text class=\"uni-info\">设置值: {{data.borderWidth}}</text>\n        <text class=\"uni-info\">获取值: {{data.borderWidthActualImage}}</text>\n        <view class=\"test-box\">\n          <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ borderWidth: data.borderWidth, borderStyle: 'solid' }\"\n            src=\"/static/test-image/logo.png\"></image>\n        </view>\n      </view>\n    </view>\n\n    <!-- 拍平版本 -->\n    <view class=\"test-container\">\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">view 组件拍平</text>\n        <text class=\"uni-info\">设置值: {{data.borderWidth}}</text>\n        <text class=\"uni-info\">获取值: {{data.borderWidthActualFlat}}</text>\n        <view class=\"test-box\">\n          <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ borderWidth: data.borderWidth, borderStyle: 'solid' }\"\n            flatten>\n            <view style=\"flex-grow: 1;background-color: cyan;\"><text class=\"cyan-text\">view</text></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">text 组件拍平</text>\n        <text class=\"uni-info\">设置值: {{data.borderWidth}}</text>\n        <text class=\"uni-info\">获取值: {{data.borderWidthActualTextFlat}}</text>\n        <view class=\"test-box\">\n          <text ref=\"textRefFlat\" class=\"common-dynamic test-text-flatten\" :style=\"{ borderWidth: data.borderWidth, borderStyle: 'solid' }\"\n            flatten>text</text>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">image 组件拍平</text>\n        <text class=\"uni-info\">设置值: {{data.borderWidth}}</text>\n        <text class=\"uni-info\">获取值: {{data.borderWidthActualImageFlat}}</text>\n        <view class=\"test-box\">\n          <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ borderWidth: data.borderWidth, borderStyle: 'solid' }\"\n            flatten src=\"/static/test-image/logo.png\"></image>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt uni-common-mb\">\n      <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n      <enum-data :items=\"borderWidthEnum\" title=\"border-width 枚举值\" @change=\"radioChangeBorderWidth\"\n        :compact=\"true\"></enum-data>\n      <input-data :defaultValue=\"data.borderWidth\" title=\"border-width 自定义值\" type=\"text\"\n        @confirm=\"inputChangeBorderWidth\"></input-data>\n    </view>\n  </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const borderWidthEnum : ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '1px' },\n    { value: 3, name: '3px' },\n    { value: 4, name: 'thin' },\n    { value: 5, name: 'medium' },\n    { value: 6, name: 'thick' }\n  ]\n\n  const data = reactive({\n    borderWidth: '5px',\n    borderWidthActual: '',\n    borderWidthActualText: '',\n    borderWidthActualImage: '',\n    borderWidthActualFlat: '',\n    borderWidthActualTextFlat: '',\n    borderWidthActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    data.borderWidthActual = viewRef.value?.style.getPropertyValue('border-width') ?? ''\n    data.borderWidthActualFlat = viewRefFlat.value?.style.getPropertyValue('border-width') ?? ''\n    data.borderWidthActualText = textRef.value?.style.getPropertyValue('border-width') ?? ''\n    data.borderWidthActualTextFlat = textRefFlat.value?.style.getPropertyValue('border-width') ?? ''\n    data.borderWidthActualImage = imageRef.value?.style.getPropertyValue('border-width') ?? ''\n    data.borderWidthActualImageFlat = imageRefFlat.value?.style.getPropertyValue('border-width') ?? ''\n  }\n\n  const changeBorderWidth = (value : string) => {\n    data.borderWidth = value\n    viewRef.value?.style.setProperty('border-width', value)\n    viewRefFlat.value?.style.setProperty('border-width', value)\n    textRef.value?.style.setProperty('border-width', value)\n    textRefFlat.value?.style.setProperty('border-width', value)\n    imageRef.value?.style.setProperty('border-width', value)\n    imageRefFlat.value?.style.setProperty('border-width', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeBorderWidth = (index : number) => {\n    const selectedItem = borderWidthEnum.find((item) : boolean => item.value === index)\n    if (selectedItem != null) {\n      changeBorderWidth(selectedItem.name)\n    }\n  }\n\n  const inputChangeBorderWidth = (value : string) => {\n    changeBorderWidth(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeBorderWidth,\n    data\n  })\n</script>\n\n<style>\n  .theme-label {\n    color: var(--text-color, #333333);\n  }\n\n  .cyan-text {\n    color: #1a1a1a;\n  }\n\n  .common {\n    width: 150px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .common-circle {\n    width: 50px;\n    height: 50px;\n    background-color: gray;\n    border-radius: 25px;\n    margin: 5px;\n  }\n\n  .common-dynamic {\n    height: 50px;\n    background-color: gray;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: gray;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 60px;\n    background-color: lightgray;\n  }\n\n  .scroll-view-border {\n    border-style: solid;\n    border-color: blue;\n  }\n\n  .common-text {\n    font-size: 12px;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- enum\n"},"bottom":{"name":"## bottom\n","description":"\nbottom样式属性定义了定位元素下外边距边界与其包含块下边界之间的偏移，非定位元素设置此属性无效。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nbottom: <length> | <percentage> | auto;\n```\n","values":"\n### bottom 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 对于绝对定位元素，元素将忽略此属性而以top属性为准，如果此时设置height: auto，将基于内容需要的高度设置宽度；如果top也为auto的话，元素的垂直位置就是它假如作为静态 (即 static) 元素时该在的位置。<br/>对于相对定位元素，元素相对正常位置的偏移量将基于top属性；如果top也为auto的话，元素将不会有偏移。 |\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/bottom)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.position.bottom)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/bottom.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/bottom.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/bottom\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/bottom\n\n>示例\n```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\r\n    <view class=\"css-page uni-theme-root\" style=\"flex-grow: 1;\">\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">bottom: 20px (距离底部 20px) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"bottom: 20px;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"bottom: 20px;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">bottom: 20rpx (距离底部 20rpx) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"bottom: 20rpx;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"bottom: 20rpx;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">bottom: 20% (距离底部 20%) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"bottom: 20%;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"bottom: 20%;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">bottom: auto (自动，默认顶部对齐) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"bottom: auto;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"bottom: auto;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\r\n\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-subtitle-text\">bottom: 10% 和 bottom: 30px</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <scroll-view class=\"common\" style=\"bottom: 10%;\"></scroll-view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <scroll-view class=\"common\" style=\"bottom: 30px;\"></scroll-view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt\">\r\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\r\n\r\n      <!-- 普通版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.bottom}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.bottomActual}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRef\" class=\"common test-view\" :style=\"{ bottom: data.bottom }\">\r\n              <text class=\"common-text\">view</text>\r\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.bottom}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.bottomActualText}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRef\" class=\"common common-text test-text\" :style=\"{ bottom: data.bottom }\">text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.bottom}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.bottomActualImage}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRef\" class=\"common test-image\" :style=\"{ bottom: data.bottom }\" src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <!-- 拍平版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.bottom}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.bottomActualFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRefFlat\" class=\"common test-view-flatten\" :style=\"{ bottom: data.bottom }\" flatten>\r\n              <text class=\"common-text\">view</text>\r\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.bottom}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.bottomActualTextFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRefFlat\" class=\"common common-text test-text-flatten\" :style=\"{ bottom: data.bottom }\" flatten>text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.bottom}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.bottomActualImageFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRefFlat\" class=\"common test-image-flatten\" :style=\"{ bottom: data.bottom }\" flatten src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt uni-common-mb\">\r\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\r\n        <enum-data :items=\"bottomEnum\" title=\"bottom 枚举值\" @change=\"radioChangeBottom\" :compact=\"true\"></enum-data>\r\n        <input-data :defaultValue=\"data.bottom\" title=\"bottom 自定义值\" type=\"text\" @confirm=\"inputChangeBottom\"></input-data>\r\n      </view>\r\n\r\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text class=\"theme-label\">native-view组件: bottom: 10% 和 bottom: 30px</text>\n        <view class=\"test-container\">\n          <view class=\"example-box\">\n            <test-native-view class=\"common-native\" style=\"bottom: 10%;\"></test-native-view>\n          </view>\n          <view class=\"example-box\">\r\n            <test-native-view class=\"common-native\" style=\"bottom: 30px;\"></test-native-view>\r\n          </view>\r\n        </view>\n      </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n  const bottomEnum : ItemType[] = [\r\n    { value: 0, name: '' },\r\n    { value: 1, name: '0' },\r\n    { value: 2, name: '0px' },\r\n    { value: 3, name: '10px' },\r\n    { value: 4, name: '20rpx' },\r\n    { value: 5, name: '0%' },\r\n    { value: 6, name: '20%' },\r\n    { value: 7, name: 'auto' }\r\n  ]\r\n\r\n  const data = reactive({\r\n    bottom: '10px',\r\n    bottomActual: '',\r\n    bottomActualText: '',\r\n    bottomActualImage: '',\r\n    bottomActualFlat: '',\r\n    bottomActualTextFlat: '',\r\n    bottomActualImageFlat: ''\r\n  })\r\n  const viewRef = ref(null as UniElement | null)\r\n  const textRef = ref(null as UniTextElement | null)\r\n  const imageRef = ref(null as UniImageElement | null)\r\n  const viewRefFlat = ref(null as UniElement | null)\r\n  const textRefFlat = ref(null as UniTextElement | null)\r\n  const imageRefFlat = ref(null as UniImageElement | null)\r\n\r\n  const getPropertyValues = () => {\r\n    data.bottomActual = viewRef.value?.style.getPropertyValue('bottom') ?? ''\r\n    data.bottomActualFlat = viewRefFlat.value?.style.getPropertyValue('bottom') ?? ''\r\n    data.bottomActualText = textRef.value?.style.getPropertyValue('bottom') ?? ''\r\n    data.bottomActualTextFlat = textRefFlat.value?.style.getPropertyValue('bottom') ?? ''\r\n    data.bottomActualImage = imageRef.value?.style.getPropertyValue('bottom') ?? ''\r\n    data.bottomActualImageFlat = imageRefFlat.value?.style.getPropertyValue('bottom') ?? ''\r\n  }\r\n\r\n\r\n  const changeBottom = (value : string) => {\r\n    data.bottom = value\r\n    viewRef.value?.style.setProperty('bottom', value)\r\n    viewRefFlat.value?.style.setProperty('bottom', value)\r\n    textRef.value?.style.setProperty('bottom', value)\r\n    textRefFlat.value?.style.setProperty('bottom', value)\r\n    imageRef.value?.style.setProperty('bottom', value)\r\n    imageRefFlat.value?.style.setProperty('bottom', value)\r\n    // 使用 nextTick 确保样式已应用后再获取值\r\n    nextTick(() => {\r\n      getPropertyValues()\r\n    })\r\n  }\r\n\r\n  const radioChangeBottom = (index : number) => {\r\n    const selectedItem = bottomEnum.find((item) : boolean => item.value === index)\r\n    if (selectedItem != null) {\r\n      changeBottom(selectedItem.name)\r\n    }\r\n  }\r\n\r\n  const inputChangeBottom = (value : string) => {\r\n    changeBottom(value)\r\n  }\r\n\r\n  onReady(() => {\r\n    getPropertyValues()\r\n  })\r\n\r\n  defineExpose({\r\n    radioChangeBottom,\r\n    data\r\n  })\r\n</script>\r\n\r\n<style>\n  .theme-label {\n    color: var(--text-color, #333333);\n  }\n\n  .example-box {\r\n    position: relative;\r\n    flex: 1;\r\n    height: 100px;\r\n    background-color: #f5f5f5;\r\n    border: 1px solid #ddd;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .common {\r\n    position: absolute;\r\n    width: 60px;\r\n    height: 60px;\r\n    background-color: cyan;\r\n  }\r\n\r\n  .common-text {\n    width: 50px;\n    font-size: 12px;\n    color: #1a1a1a;\n  }\r\n\r\n  .test-container {\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .test-item {\r\n    flex: 1;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .test-box {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100px;\r\n    background-color: #e0e0e0;\r\n  }\r\n\r\n  .common-native {\r\n    position: absolute;\r\n    width: 60px;\r\n    height: 60px;\r\n    background-color: rgba(255,0,0,0.5);\r\n  }\r\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"box-shadow":{"name":"## box-shadow\n","description":"\nCSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nbox-shadow: none | <shadow>#;\n```\n","values":"\n### box-shadow 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| inset | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 如果没有指定inset，默认阴影在边框外，即阴影向外扩散。<br/>      使用 inset 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。 |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | No shadow. |\n","defaultValue":"","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/box-shadow)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.box-shadow)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/box-shadow/box-shadow.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/box-shadow/box-shadow.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/box-shadow/box-shadow\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/box-shadow/box-shadow\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\n    <view class=\"box-shadow-page uni-theme-root\" style=\"flex-grow: 1\">\n      <view style=\"margin-bottom: 10px;\">\n        <text class=\"box-shadow-label\" style=\"font-weight: bold;\">说明：左边是正常版本，右边是拍平版本</text>\n      </view>\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: 5px 5px black</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: 5px 5px black\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: 5px 5px black\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: 5px 5px 5px #00FF00</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"box-shadow: 5px 5px 5px #00FF00\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"box-shadow: 5px 5px 5px #00FF00\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: 5px 5px 5px rgb(0,0,255)</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: 5px 5px 5px rgb(0,0,255)\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: 5px 5px 5px rgb(0,0,255)\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: 5px 5px 5px rgba(0,255,255,0.5)</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"box-shadow: 5px 5px 5px rgba(0,255,255,0.5)\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"box-shadow: 5px 5px 5px rgba(0,255,255,0.5)\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: 5rpx 5rpx 5rpx #0000ff80</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"box-shadow: 5rpx 5rpx 5rpx #0000ff80\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"box-shadow: 5rpx 5rpx 5rpx #0000ff80\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: 5px 5px 5px black</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"box-shadow: 5px 5px 5px black\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"box-shadow: 5px 5px 5px black\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: 5px 10px 5px black</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: 5px 10px 5px black\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: 5px 10px 5px black\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: 5px 5px 5px 5px black（harmony暂不支持阴影扩散半径）</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"box-shadow: 5px 5px 5px 5px black\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"box-shadow: 5px 5px 5px 5px black\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: -5px -5px 5px black</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: -5px -5px 5px black\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: -5px -5px 5px black\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: inset 5px 5px black（harmony暂不支持inset）</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: inset 5px 5px black\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: inset 5px 5px black\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: inset 5px 5px 5px black（harmony暂不支持inset）</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: inset 5px 5px 5px black\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: inset 5px 5px 5px black\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: inset 5px 10px 5px black（harmony暂不支持inset）</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: inset 5px 10px 5px black\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: inset 5px 10px 5px black\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: inset 5px 5px 5px 5px black（harmony暂不支持inset）</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: inset 5px 5px 5px 5px black\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: inset 5px 5px 5px 5px black\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: inset -5px -5px 5px black（harmony暂不支持inset）</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: inset -5px -5px 5px black\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"box-shadow: inset -5px -5px 5px black\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">circle: box-shadow: 5px 5px black（正圆）</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"border-radius: 31px; box-shadow: 5px 5px black\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"border-radius: 31px; box-shadow: 5px 5px black\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">circle: box-shadow: 5px 5px 5px black（椭圆）</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"border-radius: 24px; box-shadow: 5px 5px 5px black\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"border-radius: 24px; box-shadow: 5px 5px 5px black\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">circle: box-shadow: 5px 10px 5px black（正圆）</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"border-radius: 31px; box-shadow: 5px 10px 5px black\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"border-radius: 31px; box-shadow: 5px 10px 5px black\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">circle: box-shadow: 5px 5px 5px 5px black（椭圆）</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"border-radius: 24px; box-shadow: 5px 5px 5px 5px black\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"border-radius: 24px; box-shadow: 5px 5px 5px 5px black\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">circle: box-shadow: -5px -5px 5px black（正圆）</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"border-radius: 31px; box-shadow: -5px -5px 5px black\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view class=\"common\" style=\"border-radius: 31px; box-shadow: -5px -5px 5px black\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)（椭圆）</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"border-radius: 24px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <view class=\"common-rect\" style=\"border-radius: 24px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">点击动态切换 box-shadow: none</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\" @click=\"changed\">\n              <view :class=\"['common', disabled ? 'disabledShadow' : 'shadow']\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\" @click=\"changed\">\n              <view :class=\"['common', disabled ? 'disabledShadow' : 'shadow']\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">点击动态切换 box-shadow: 非法值</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\" @click=\"changed\">\n              <view :class=\"['common', disabled ? 'invalidShadow' : 'shadow']\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\" @click=\"changed\">\n              <view :class=\"['common', disabled ? 'invalidShadow' : 'shadow']\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">初始小尺寸，延迟1秒自动变大，点击可重放，验证 box-shadow 会随 view 尺寸同步更新</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview-resize\" @click=\"triggerShadowResizeDemo\">\n              <view :class=\"['resize-shadow-box', shadowResized ? 'resize-shadow-box-expanded' : 'resize-shadow-box-collapsed']\"></view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview-resize\" @click=\"triggerShadowResizeDemo\">\n              <view :class=\"['resize-shadow-box', shadowResized ? 'resize-shadow-box-expanded' : 'resize-shadow-box-collapsed']\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">box-shadow父视图动态改变高度的渲染效果</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view style=\"justify-content: center;align-items: center;width: 75px;background-color: green;box-shadow: 0 0 10px\">\n                <view>\n                  <textarea id=\"dynamic-height-textarea\" class=\"shadow-textarea\" style=\"margin: 10px;background-color: aqua;height: 16px;width: 55px;\" value=\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\"></textarea>\n                </view>\n              </view>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <view style=\"justify-content: center;align-items: center;width: 75px;background-color: green;box-shadow: 0 0 10px\" flatten>\n                <view>\n                  <textarea id=\"dynamic-height-textarea-flat\" class=\"shadow-textarea\" style=\"margin: 10px;background-color: aqua;height: 16px;width: 55px;\" value=\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\"></textarea>\n                </view>\n              </view>\n            </view>\n          </view>\n        </view>\n      </view>\n      <view>\n        <text class=\"box-shadow-label\">text组件: box-shadow: 5px 5px black</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <text class=\"text-shadow\" style=\"box-shadow: 5px 5px black;\">文本</text>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <text class=\"text-shadow\" style=\"box-shadow: 5px 5px black;\" flatten>文本</text>\n            </view>\n          </view>\n        </view>\n      </view>\n      <view>\n        <text class=\"box-shadow-label\">text组件: box-shadow: 5px 5px 5px #00FF00</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <text class=\"text-shadow-rect\" style=\"box-shadow: 5px 5px 5px #00FF00;\">文本</text>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <text class=\"text-shadow-rect\" style=\"box-shadow: 5px 5px 5px #00FF00;\" flatten>文本</text>\n            </view>\n          </view>\n        </view>\n      </view>\n      <view>\n        <text class=\"box-shadow-label\" style=\"font-weight: bold; margin-top: 20px;\">圆形图片</text>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">image组件: box-shadow: 5px 5px black</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <image class=\"image-shadow\" style=\"box-shadow: 5px 5px black;\" src=\"/static/test-image/logo.png\"></image>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <image class=\"image-shadow\" style=\"box-shadow: 5px 5px black;\" src=\"/static/test-image/logo.png\" flatten></image>\n            </view>\n          </view>\n        </view>\n      </view>\n      <view>\n        <text class=\"box-shadow-label\">image组件: box-shadow: 5px 5px 5px #00FF00</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <image class=\"image-shadow-rect\" style=\"box-shadow: 5px 5px 5px #00FF00;\" src=\"/static/test-image/logo.png\"></image>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <image class=\"image-shadow-rect\" style=\"box-shadow: 5px 5px 5px #00FF00;\" src=\"/static/test-image/logo.png\" flatten></image>\n            </view>\n          </view>\n        </view>\n      </view>\n      <view>\n        <text class=\"box-shadow-label\">image组件（正圆）: box-shadow: 5px 5px black</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <image class=\"image-shadow-circle\" style=\"border-radius: 31px; box-shadow: 5px 5px black;\" src=\"/static/test-image/logo.png\"></image>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <image class=\"image-shadow-circle\" style=\"border-radius: 31px; box-shadow: 5px 5px black;\" src=\"/static/test-image/logo.png\" flatten></image>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\" style=\"font-weight: bold; margin-top: 20px;\">方形图片</text>\n      </view>\n\n      <view>\n        <text class=\"box-shadow-label\">image组件: box-shadow: 5px 5px black</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <image class=\"image-shadow\" style=\"box-shadow: 5px 5px black;\" src=\"/static/logo_square.jpeg\"></image>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <image class=\"image-shadow\" style=\"box-shadow: 5px 5px black;\" src=\"/static/logo_square.jpeg\" flatten></image>\n            </view>\n          </view>\n        </view>\n      </view>\n      <view>\n        <text class=\"box-shadow-label\">image组件: box-shadow: 5px 5px 5px #00FF00</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <image class=\"image-shadow-rect\" style=\"box-shadow: 5px 5px 5px #00FF00;\" src=\"/static/logo_square.jpeg\"></image>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview-rect\">\n              <image class=\"image-shadow-rect\" style=\"box-shadow: 5px 5px 5px #00FF00;\" src=\"/static/logo_square.jpeg\" flatten></image>\n            </view>\n          </view>\n        </view>\n      </view>\n      <view>\n        <text class=\"box-shadow-label\">image组件（正圆）: box-shadow: 5px 5px black</text>\n        <view class=\"row-container\">\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <image class=\"image-shadow-circle\" style=\"border-radius: 31px; box-shadow: 5px 5px black;\" src=\"/static/logo_square.jpeg\"></image>\n            </view>\n          </view>\n          <view class=\"row-item\">\n            <view class=\"backgroundview\">\n              <image class=\"image-shadow-circle\" style=\"border-radius: 31px; box-shadow: 5px 5px black;\" src=\"/static/logo_square.jpeg\" flatten></image>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n        <text class=\"uni-subtitle-text\">box-shadow: 5px 5px black 和 box-shadow: 0 0 10px blue</text>\n      </view>\n\n      <view class=\"row-container\">\n        <view class=\"row-item\">\n          <scroll-view style=\"width: 100px; height: 100px; box-shadow: 5px 5px black; background-color: cyan;\"></scroll-view>\n        </view>\n        <view class=\"row-item\">\n          <scroll-view style=\"width: 100px; height: 100px; box-shadow: 0 0 10px blue; background-color: green;\"></scroll-view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <!-- view 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.boxShadow}}</text>\n          <text class=\"uni-info\">获取值: {{data.boxShadowActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ boxShadow: data.boxShadow }\">\n              <text class=\"common-text\">view</text>\n            </view>\n          </view>\n        </view>\n\n        <!-- text 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.boxShadow}}</text>\n          <text class=\"uni-info\">获取值: {{data.boxShadowActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-dynamic common-text test-text\" :style=\"{ boxShadow: data.boxShadow }\">text</text>\n          </view>\n        </view>\n\n        <!-- image 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.boxShadow}}</text>\n          <text class=\"uni-info\">获取值: {{data.boxShadowActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-dynamic test-image\" :style=\"{ boxShadow: data.boxShadow }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本（注意：不支持 inset 值） -->\n      <view class=\"test-container\" v-if=\"showFlatSection()\">\n        <!-- view 组件拍平测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.boxShadow}}</text>\n          <text class=\"uni-info\">获取值: {{data.boxShadowActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ boxShadow: data.boxShadow }\" flatten>\n              <text class=\"common-text\">view</text>\n            </view>\n          </view>\n        </view>\n\n        <!-- text 组件拍平测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.boxShadow}}</text>\n          <text class=\"uni-info\">获取值: {{data.boxShadowActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-dynamic common-text test-text-flatten\" :style=\"{ boxShadow: data.boxShadow }\" flatten>text</text>\n          </view>\n        </view>\n\n        <!-- image 组件拍平测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.boxShadow}}</text>\n          <text class=\"uni-info\">获取值: {{data.boxShadowActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-dynamic test-image-flatten\" :style=\"{ boxShadow: data.boxShadow }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 测试控制区域 -->\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :compact=\"true\" :items=\"boxShadowEnum\" title=\"box-shadow 枚举值\" @change=\"radioChangeBoxShadow\"></enum-data>\n        <input-data :defaultValue=\"data.boxShadow\" title=\"box-shadow 自定义值\" type=\"text\" @confirm=\"inputChangeBoxShadow\"></input-data>\n      </view>\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    boxShadow: '5px 5px black',\n    boxShadowActual: '',\n    boxShadowActualText: '',\n    boxShadowActualImage: '',\n    boxShadowActualFlat: '',\n    boxShadowActualTextFlat: '',\n    boxShadowActualImageFlat: ''\n  })\n\n  const disabled = ref(false)\n  const shadowResized = ref(false)\n  const shadowResizeTimer = ref(-1)\n\n  const changed = () => {\n    disabled.value = disabled.value == false\n  }\n\n  const triggerShadowResizeDemo = () => {\n    shadowResized.value = false\n    if (shadowResizeTimer.value >= 0) {\n      clearTimeout(shadowResizeTimer.value)\n      shadowResizeTimer.value = -1\n    }\n    shadowResizeTimer.value = setTimeout(() => {\n      shadowResized.value = true\n      shadowResizeTimer.value = -1\n    }, 1000)\n  }\n\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const boxShadowEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'none' },\n    { value: 2, name: '5px 5px black' },\n    { value: 3, name: '5px 5px 5px black' },\n    { value: 4, name: '10px 10px 10px red' },\n    { value: 5, name: '5px 5px 5px 5px black' },\n    { value: 6, name: '-5px -5px 5px black' },\n    { value: 7, name: '0px 1px 3px rgba(0,0,0,0.4)' },\n    { value: 8, name: '5rpx 5rpx 5rpx #0000ff80' },\n    { value: 9, name: '2rpx 4rpx #00f8' },\n  ]\n\n  const getPropertyValues = (value: string) => {\n    data.boxShadowActual = viewRef.value?.style.getPropertyValue('box-shadow') ?? ''\n    if (!value.includes('inset')) {\n      data.boxShadowActualFlat = viewRefFlat.value?.style.getPropertyValue('box-shadow') ?? ''\n    } else {\n      data.boxShadowActualFlat = '不支持 inset'\n    }\n    data.boxShadowActualText = textRef.value?.style.getPropertyValue('box-shadow') ?? ''\n    if (!value.includes('inset')) {\n      data.boxShadowActualTextFlat = textRefFlat.value?.style.getPropertyValue('box-shadow') ?? ''\n    } else {\n      data.boxShadowActualTextFlat = '不支持 inset'\n    }\n    data.boxShadowActualImage = imageRef.value?.style.getPropertyValue('box-shadow') ?? ''\n    if (!value.includes('inset')) {\n      data.boxShadowActualImageFlat = imageRefFlat.value?.style.getPropertyValue('box-shadow') ?? ''\n    } else {\n      data.boxShadowActualImageFlat = '不支持 inset'\n    }\n  }\n\n  const changeBoxShadow = (value: string) => {\n    data.boxShadow = value\n    viewRef.value?.style.setProperty('box-shadow', value)\n    if (!value.includes('inset')) {\n      viewRefFlat.value?.style.setProperty('box-shadow', value)\n    }\n    textRef.value?.style.setProperty('box-shadow', value)\n    if (!value.includes('inset')) {\n      textRefFlat.value?.style.setProperty('box-shadow', value)\n    }\n    imageRef.value?.style.setProperty('box-shadow', value)\n    if (!value.includes('inset')) {\n      imageRefFlat.value?.style.setProperty('box-shadow', value)\n    }\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues(value)\n    })\n  }\n\n  const radioChangeBoxShadow = (index: number) => {\n    const selectedItem = boxShadowEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeBoxShadow(selectedItem.name)\n    }\n  }\n\n  const inputChangeBoxShadow = (value: string) => {\n    changeBoxShadow(value)\n  }\n\n  const showFlatSection = () => (data.boxShadow as string).includes('inset') == false\n\n  onReady(() => {\n    nextTick(() => {\n      const element = uni.getElementById(\"dynamic-height-textarea\")\n      element?.style.setProperty(\"height\", \"26px\")\n      triggerShadowResizeDemo()\n    })\n    getPropertyValues(data.boxShadow as string)\n  })\n\n  onUnload(() => {\n    if (shadowResizeTimer.value >= 0) {\n      clearTimeout(shadowResizeTimer.value)\n      shadowResizeTimer.value = -1\n    }\n  })\n\n  defineExpose({\n    radioChangeBoxShadow,\n    data\n  })\n</script>\n\n<style>\n  .box-shadow-label {\n    color: var(--text-color, #333333);\n  }\n\n  .shadow-textarea,\n  .scroll-view-label {\n    color: #1a1a1a;\n  }\n\n  .common {\n    width: 50px;\n    height: 50px;\n    background-color: brown;\n  }\n\n  .common-rect {\n    width: 48px;\n    height: 24px;\n    background-color: brown;\n  }\n\n  .backgroundview {\n    width: 75px;\n    height: 75px;\n    background-color: white;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .backgroundview-rect {\n    width: 75px;\n    height: 50px;\n    background-color: white;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .backgroundview-resize {\n    width: 95px;\n    height: 95px;\n    background-color: white;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .row-container {\n    flex-direction: row;\n    align-items: flex-start;\n    margin-bottom: 10px;\n  }\n\n  .row-item {\n    flex: 1;\n    margin-right: 10px;\n  }\n\n  .big{\n    width: 200px;\n    height: 200px;\n  }\n\n  .shadow {\n    box-shadow: 5px 5px black;\n  }\n\n  .disabledShadow {\n    box-shadow: none;\n  }\n\n  .invalidShadow {\n    box-shadow: abcd;\n  }\n\n  .resize-shadow-box {\n    background-color: #2f8f2f;\n    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.45);\n  }\n\n  .resize-shadow-box-collapsed {\n    width: 36px;\n    height: 36px;\n  }\n\n  .resize-shadow-box-expanded {\n    width: 68px;\n    height: 52px;\n  }\n\n  .text-shadow {\n    width: 62px;\n    height: 62px;\n    background-color: brown;\n    font-size: 12px;\n    color: white;\n  }\n\n  .text-shadow-rect {\n    width: 62px;\n    height: 31px;\n    background-color: brown;\n    font-size: 12px;\n    color: white;\n  }\n\n  .image-shadow {\n    width: 62px;\n    height: 62px;\n    background-color: brown;\n  }\n\n  .image-shadow-rect {\n    width: 62px;\n    height: 31px;\n    background-color: brown;\n  }\n\n  .image-shadow-circle {\n    width: 62px;\n    height: 62px;\n    background-color: brown;\n  }\n\n  .image-shadow-ellipse {\n    width: 62px;\n    height: 40px;\n    background-color: brown;\n  }\n\n  /* 多组件横向布局样式 */\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 80px;\n    padding: 10px;\n    background-color: gray;\n  }\n\n  .common-dynamic{\n    width: 50px;\n    height: 50px;\n    background-color: green;\n  }\n\n  .common-text {\n    font-size: 10px;\n    color: white;\n  }\n\n  .scroll-view-label {\n    font-size: 12px;\n    line-height: 100px;\n    text-align: center;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n- length\n- color\n"},"box-sizing":{"name":"## box-sizing\n","description":"\nCSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nbox-sizing: content-box | border-box;\n```\n","values":"\n### box-sizing 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| content-box | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 默认值，标准盒子模型。width 与 height 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。注意：内边距、边框和外边距都在这个盒子的外部。比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。<br/>    尺寸计算公式：<br/>    <br/>      width = 内容的宽度<br/>      height = 内容的高度<br/>    <br/>    宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。 |\n| border-box | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks 模式 时 Internet Explorer 使用的盒模型。注意，填充和边框将在盒子内 , 例如， .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为 350px 的盒子。内容框不能为负，并且被分配到 0，使得不可能使用 border-box 使元素消失。<br/>    尺寸计算公式：<br/>    <br/>      width = border + padding + 内容的宽度<br/>      height = border + padding + 内容的高度 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | border-box |\n\n **注意**：W3C 默认值为：content-box","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/box-sizing)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.box-sizing)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/box-sizing/box-sizing.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/box-sizing/box-sizing.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/box-sizing/box-sizing\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/box-sizing/box-sizing\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\n  <view class=\"uni-theme-root\" style=\"flex-grow: 1;\">\n    <view>\n      <text class=\"desc-text\">content-box（标准盒模型，默认值）</text>\n      <text class=\"help-text\">width 只包括内容宽度，padding 和 border 在盒子外部向外扩展</text>\n      <text class=\"help-text\">设置 width: 100px, padding: 10px, border: 10px</text>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <view class=\"compare-container\">\n        <view class=\"compare-box\" style=\"box-sizing: content-box;\">\n          <text class=\"box-label\">content-box</text>\n          <text class=\"box-info\">内容区: 100px</text>\n        </view>\n      </view>\n      <text class=\"calc-text\">实际占用宽度 = 100(内容) + 20(padding) + 20(border) = 140px</text>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <text class=\"help-text\">拍平</text>\n      <view class=\"compare-container\">\n        <view class=\"compare-box\" style=\"box-sizing: content-box;\" flatten>\n          <text class=\"box-label\">content-box 拍平</text>\n          <text class=\"box-info\">内容区: 100px</text>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <text class=\"desc-text\">border-box</text>\n      <text class=\"help-text\">width 包括 border + padding + 内容，padding 和 border 在盒子内部向内挤压</text>\n      <text class=\"help-text\">设置 width: 100px, padding: 10px, border: 10px</text>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <view class=\"compare-container\">\n        <view class=\"compare-box\" style=\"box-sizing: border-box;\">\n          <text class=\"box-label\">border-box</text>\n          <text class=\"box-info\">内容区: 60px</text>\n        </view>\n      </view>\n      <text class=\"calc-text\">实际占用宽度 = 100px（width 设置值）</text>\n      <text class=\"calc-text\">内容宽度 = 100 - 20(padding) - 20(border) = 60px</text>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <text class=\"help-text\">拍平</text>\n      <view class=\"compare-container\">\n        <view class=\"compare-box\" style=\"box-sizing: border-box;\" flatten>\n          <text class=\"box-label\">border-box 拍平</text>\n          <text class=\"box-info\">内容区: 60px</text>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <text class=\"title-text\">并排对比（左：content-box 140px，右：border-box 100px）</text>\n      <text class=\"help-text\">设置 width: 100px, padding: 10px, border: 10px</text>\n    </view>\n\n    <view class=\"uni-common-mt side-by-side\">\n      <view class=\"compare-box\" style=\"box-sizing: content-box;\">\n        <text class=\"box-label-small\">content-box</text>\n      </view>\n      <view class=\"compare-box\" style=\"box-sizing: border-box; margin-left: 10px;\">\n        <text class=\"box-label-small\">border-box</text>\n      </view>\n    </view>\n\n    <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\n    <text class=\"help-text\">设置 width: 100px, padding: 10px, border: 10px</text>\n    <view class=\"demo-box\">\n      <scroll-view class=\"common scroll-view-box-sizing\" style=\"box-sizing: content-box;\">\n        <text class=\"box-label-small\">content-box</text>\n      </scroll-view>\n      <scroll-view class=\"common scroll-view-box-sizing\" style=\"box-sizing: border-box;\">\n        <text class=\"box-label-small\">border-box</text>\n      </scroll-view>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      <text class=\"help-text\">设置 width: 60px, padding: 10px, border: 10px</text>\n    </view>\n\n    <!-- 普通版本 -->\n    <view class=\"test-container\">\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">view 组件</text>\n        <text class=\"uni-info\">设置值: {{data.boxSizing}}</text>\n        <text class=\"uni-info\">获取值: {{data.boxSizingActual}}</text>\n        <view class=\"test-box\">\n          <view ref=\"viewRef\" class=\"common\" :style=\"{ boxSizing: data.boxSizing }\">\n            <text class=\"common-text font-size-12\">view</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">text 组件</text>\n        <text class=\"uni-info\">设置值: {{data.boxSizing}}</text>\n        <text class=\"uni-info\">获取值: {{data.boxSizingActualText}}</text>\n        <view class=\"test-box\">\n          <text ref=\"textRef\" class=\"common font-size-12\" :style=\"{ boxSizing: data.boxSizing }\">text</text>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">image 组件</text>\n        <text class=\"uni-info\">设置值: {{data.boxSizing}}</text>\n        <text class=\"uni-info\">获取值: {{data.boxSizingActualImage}}</text>\n        <view class=\"test-box\">\n          <image ref=\"imageRef\" class=\"common\" :style=\"{ boxSizing: data.boxSizing }\" src=\"/static/test-image/logo.png\"></image>\n        </view>\n      </view>\n    </view>\n\n    <!-- 拍平版本 -->\n    <view class=\"test-container\">\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">view 组件拍平</text>\n        <text class=\"uni-info\">设置值: {{data.boxSizing}}</text>\n        <text class=\"uni-info\">获取值: {{data.boxSizingActualFlat}}</text>\n        <view class=\"test-box\">\n          <view ref=\"viewRefFlat\" class=\"common\" :style=\"{ boxSizing: data.boxSizing }\" flatten>\n            <text class=\"common-text font-size-12\">view</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">text 组件拍平</text>\n        <text class=\"uni-info\">设置值: {{data.boxSizing}}</text>\n        <text class=\"uni-info\">获取值: {{data.boxSizingActualTextFlat}}</text>\n        <view class=\"test-box\">\n          <text ref=\"textRefFlat\" class=\"common font-size-12\" :style=\"{ boxSizing: data.boxSizing }\" flatten>text</text>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">image 组件拍平</text>\n        <text class=\"uni-info\">设置值: {{data.boxSizing}}</text>\n        <text class=\"uni-info\">获取值: {{data.boxSizingActualImageFlat}}</text>\n        <view class=\"test-box\">\n          <image ref=\"imageRefFlat\" class=\"common\" :style=\"{ boxSizing: data.boxSizing }\" flatten src=\"/static/test-image/logo.png\"></image>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt uni-common-mb\">\n      <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n      <enum-data :items=\"boxSizingEnum\" title=\"box-sizing 枚举值\" @change=\"radioChangeBoxSizing\" :compact=\"true\"></enum-data>\n      <input-data :defaultValue=\"data.boxSizing\" title=\"box-sizing 自定义值\" type=\"text\" @confirm=\"inputChangeBoxSizing\"></input-data>\n    </view>\n\n    <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text>native-view组件: box-sizing: content-box 和 border-box</text>\n        <text class=\"help-text\">设置 width: 100px, padding: 10px, border: 10px</text>\n        <view class=\"demo-box\">\n          <test-native-view class=\"native-view-box-sizing\" style=\"box-sizing: content-box;\"></test-native-view>\n          <test-native-view class=\"native-view-box-sizing\" style=\"box-sizing: border-box;\"></test-native-view>\n        </view>\n      </view>\n    <!-- #endif -->\n  </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const boxSizingEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'content-box' },\n    { value: 2, name: 'border-box' }\n  ]\n\n  const data = reactive({\n    boxSizing: 'content-box',\n    boxSizingActual: '',\n    boxSizingActualText: '',\n    boxSizingActualImage: '',\n    boxSizingActualFlat: '',\n    boxSizingActualTextFlat: '',\n    boxSizingActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    data.boxSizingActual = viewRef.value?.style.getPropertyValue('box-sizing') ?? ''\n    data.boxSizingActualFlat = viewRefFlat.value?.style.getPropertyValue('box-sizing') ?? ''\n    data.boxSizingActualText = textRef.value?.style.getPropertyValue('box-sizing') ?? ''\n    data.boxSizingActualTextFlat = textRefFlat.value?.style.getPropertyValue('box-sizing') ?? ''\n    data.boxSizingActualImage = imageRef.value?.style.getPropertyValue('box-sizing') ?? ''\n    data.boxSizingActualImageFlat = imageRefFlat.value?.style.getPropertyValue('box-sizing') ?? ''\n  }\n\n  const changeBoxSizing = (value: string) => {\n    data.boxSizing = value\n    viewRef.value?.style.setProperty('box-sizing', value)\n    viewRefFlat.value?.style.setProperty('box-sizing', value)\n    textRef.value?.style.setProperty('box-sizing', value)\n    textRefFlat.value?.style.setProperty('box-sizing', value)\n    imageRef.value?.style.setProperty('box-sizing', value)\n    imageRefFlat.value?.style.setProperty('box-sizing', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeBoxSizing = (index: number) => {\n    const selectedItem = boxSizingEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeBoxSizing(selectedItem.name)\n    }\n  }\n\n  const inputChangeBoxSizing = (value: string) => {\n    changeBoxSizing(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeBoxSizing,\n    data\n  })\n</script>\n\n<style>\n  .desc-text {\n    font-size: 14px;\n    color: var(--text-color, #333);\n    font-weight: bold;\n    line-height: 22px;\n  }\n\n  .title-text {\n    font-size: 16px;\n    color: var(--text-color, #333);\n    font-weight: bold;\n  }\n\n  .help-text {\n    font-size: 12px;\n    color: var(--active-color, #666);\n    margin-top: 5px;\n    line-height: 18px;\n  }\n\n  .calc-text {\n    font-size: 13px;\n    color: #ff6b6b;\n    font-weight: bold;\n    margin-top: 5px;\n    line-height: 20px;\n  }\n\n  .side-by-side {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  .compare-container {\n    background-color: var(--active-background-color, #f5f5f5);\n    padding: 10px;\n    border: 1px dashed #999;\n  }\n\n  .compare-box {\n    width: 100px;\n    height: 80px;\n    padding: 10px;\n    border: 10px solid cyan;\n    background-color: #4ecdc4;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .box-label {\n    font-size: 13px;\n    color: #1a1a1a;\n    font-weight: bold;\n    text-align: center;\n  }\n\n  .box-label-small {\n    font-size: 12px;\n    color: #1a1a1a;\n    font-weight: bold;\n    text-align: center;\n  }\n\n  .box-info {\n    font-size: 10px;\n    color: #1a1a1a;\n    text-align: center;\n    margin-top: 3px;\n  }\n\n  .common {\n    width: 60px;\n    height: 60px;\n    background-color: cyan;\n    padding: 10px;\n    border: 10px solid #d8dde5;\n    color: #1a1a1a;\n  }\n\n  .common-text {\n    width: 50px;\n    color: #1a1a1a;\n  }\n  .font-size-12{\n    font-size: 12px;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 100px;\n    background-color: gray;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    justify-content: space-around;\n    margin-top: 10px;\n  }\n\n  .scroll-view-box-sizing {\n    width: 100px;\n    height: 80px;\n    padding: 10px;\n    border: 10px solid cyan;\n    background-color: #4ecdc4;\n    color: #1a1a1a;\n  }\n\n  .native-view-box-sizing {\n    width: 100px;\n    height: 80px;\n    padding: 10px;\n    border: 10px solid cyan;\n    background-color: cyan;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"color":{"name":"## color\n","description":"\ncolor 属性设置元素的文本及文本装饰（text-decoration）的前景色颜色值。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\ncolor: <color>;\n```\n","values":"\n### color 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| currentcolor | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 将颜色设置为元素的 color 属性值。但是，如果设置为 color 的值，currentcolor 将被视为 inherit。 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue-app | #000000 |\n| uvue-web | canvastext |\n\n **注意**：W3C 默认值为：canvastext","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)\n- [input](/component/input.md)\n- [textarea](/component/textarea.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/color)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.color)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/color.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/color.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/color\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/color\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view class=\"demo-box\">\n        <view class=\"box\">\n          <text class=\"common\" style=\"color: rgb(0, 0, 255);\">color: rgb(0, 0, 255)</text>\n          <text class=\"common\" style=\"color: rgba(0, 0, 255, 0.5);\">color: rgba(0, 0, 255, 0.5)</text>\n          <text class=\"common\" style=\"color: #0000ff;\">color: #0000ff</text>\n          <text class=\"common\" style=\"color: #00f;\">color: #00f</text>\n          <text class=\"common\" style=\"color: #00f8;\">color: #00f8</text>\n          <text class=\"common\" style=\"color: #0000ff80;\">color: #0000ff80</text>\n          <text class=\"common\" style=\"color: blue;\">color: blue</text>\n        </view>\n        <view class=\"box\">\n          <text class=\"common\" style=\"color: rgb(0, 0, 255);\" flatten>color: rgb(0, 0, 255)</text>\n          <text class=\"common\" style=\"color: rgba(0, 0, 255, 0.5);\" flatten>color: rgba(0, 0, 255, 0.5)</text>\n          <text class=\"common\" style=\"color: #0000ff;\" flatten>color: #0000ff</text>\n          <text class=\"common\" style=\"color: #00f;\" flatten>color: #00f</text>\n          <text class=\"common\" style=\"color: #00f8;\" flatten>color: #00f8</text>\n          <text class=\"common\" style=\"color: #0000ff80;\" flatten>color: #0000ff80</text>\n          <text class=\"common\" style=\"color: blue;\" flatten>color: blue</text>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"common-box\">\n        <!-- 普通版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">color</text>\n          <text class=\"uni-info\">设置值: {{data.color}}</text>\n          <text class=\"uni-info\">获取值: {{data.colorActual}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common test-text\" :style=\"{ color: data.color }\">当前 color: {{data.color}}</text>\n          </view>\n        </view>\n\n        <!-- 拍平版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">测试拍平</text>\n          <text class=\"uni-info\">设置值: {{data.color}}</text>\n          <text class=\"uni-info\">获取值: {{data.colorActualFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common test-text-flatten\" :style=\"{ color: data.color }\" flatten>当前 color: {{data.color}}</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"colorEnum\" title=\"color 枚举值\" @change=\"radioChangeColor\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.color\" title=\"color 自定义值\" type=\"text\" @confirm=\"inputChangeColor\"></input-data>\n      </view>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const colorEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'green' },\n    { value: 2, name: '#942192' },\n    { value: 3, name: '#000' },\n    { value: 4, name: '#0000ff' },\n    { value: 5, name: '#00f8' },\n    { value: 6, name: '#0000ff80' },\n    { value: 7, name: 'rgb(0, 255, 0)' },\n    { value: 8, name: 'rgba(0, 255, 0, 0.5)' }\n  ]\n\n  const data = reactive({\n    color: 'cyan',\n    colorActual: '',\n    colorActualFlat: ''\n  })\n  const textRef = ref(null as UniTextElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n\n  const getPropertyValues = () => {\n    data.colorActual = textRef.value?.style.getPropertyValue('color') ?? ''\n    data.colorActualFlat = textRefFlat.value?.style.getPropertyValue('color') ?? ''\n  }\n\n\n  const changeColor = (value: string) => {\n    data.color = value\n    textRef.value?.style.setProperty('color', value)\n    textRefFlat.value?.style.setProperty('color', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeColor = (index: number) => {\n    const selectedItem = colorEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeColor(selectedItem.name)\n    }\n  }\n\n  const inputChangeColor = (value: string) => {\n    changeColor(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeColor,\n    data\n  })\n</script>\n\n<style>\n  .common {\n    font-size: 16px;\n  }\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n  .box{\n    flex:1;\n    height: 190px;\n    background-color: gray;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .common-box{\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 80px;\n    background-color: gray;\n    justify-content: center;\n    align-items: center;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- color\n"},"direction":{"name":"## direction\n","description":"\ndirection CSS 属性用于设置文本水平溢出的方向。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- |\n| 4.0 | x | 5.25 | x | 5.25 | x | 5.25 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.25 | 5.25 | 4.26 |\n","syntax":"\n### 语法\n```\ndirection: ltr | rtl;\n```\n","values":"\n### direction 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| ltr | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"x\",\"5.25\",\"x\",\"5.25\",\"x\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 默认属性。可设置文本和其他元素的默认方向是从左到右。 |\n| rtl | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"x\",\"5.25\",\"x\",\"5.25\",\"x\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 可设置文本和其他元素的默认方向是从右到左。 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue-app | ltr |\n| uvue-web | ltr |\n\n **注意**：W3C 默认值为：ltr","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/direction)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.direction)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/direction.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/direction.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/direction\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/direction\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view class=\"demo-box\">\n        <view class=\"common\">\n          <text class=\"uni-info\">direction: ltr</text>\n          <text class=\"common-text\" style=\"direction: ltr;\">hello مرحبا</text>\n          <text class=\"uni-info\">direction: rtl</text>\n          <text class=\"common-text\" style=\"direction: rtl;\">hello مرحبا</text>\n        </view>\n        <view class=\"common\">\n          <text class=\"uni-info\">direction: ltr</text>\n          <text class=\"common-text\" style=\"direction: ltr;\" flatten>hello مرحبا</text>\n          <text class=\"uni-info\">direction: rtl</text>\n          <text class=\"common-text\" style=\"direction: rtl;\" flatten>hello مرحبا</text>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"common-box\">\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">direction</text>\n          <text class=\"uni-info\">设置值: {{data.direction}}</text>\n          <text class=\"uni-info\">获取值: {{data.directionActual}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"test-text\" :style=\"{ direction: data.direction }\">hello مرحبا</text>\n          </view>\n        </view>\n\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">拍平</text>\n          <text class=\"uni-info\">设置值: {{data.direction}}</text>\n          <text class=\"uni-info\">获取值: {{data.directionActualFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"test-text\" :style=\"{ direction: data.direction }\" flatten>hello مرحبا</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"directionEnum\" title=\"direction 枚举值\" @change=\"radioChangeDirection\"\n          :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.direction\" title=\"direction 自定义值\" type=\"text\"\n          @confirm=\"inputChangeDirection\"></input-data>\n      </view>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const directionEnum : ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'ltr' },\n    { value: 2, name: 'rtl' }\n  ]\n\n  const data = reactive({\n    direction: 'ltr',\n    directionActual: '',\n    directionActualFlat: ''\n  })\n  const textRef = ref(null as UniTextElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n\n  const getPropertyValues = () => {\n    data.directionActual = textRef.value?.style.getPropertyValue('direction') ?? ''\n    data.directionActualFlat = textRefFlat.value?.style.getPropertyValue('direction') ?? ''\n  }\n\n  const changeDirection = (value : string) => {\n    data.direction = value\n    textRef.value?.style.setProperty('direction', value)\n    textRefFlat.value?.style.setProperty('direction', value)\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeDirection = (index : number) => {\n    const selectedItem = directionEnum.find((item) : boolean => item.value === index)\n    if (selectedItem != null) {\n      changeDirection(selectedItem.name)\n    }\n  }\n\n  const inputChangeDirection = (value : string) => {\n    changeDirection(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeDirection,\n    data\n  })\n</script>\n\n<style>\n  .common-text {\n    width: 150px;\n    font-size: 18px;\n  }\n\n  .common {\n    flex: 1;\n    height: 150px;\n    padding: 10px;\n    background-color: gray;\n    justify-content: center;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n  }\n\n  .common-box {\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 80px;\n    padding: 10px;\n    background-color: gray;\n    justify-content: center;\n  }\n\n  .test-text {\n    width: 160px;\n    font-size: 18px;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"display":{"name":"## display\n","description":"\ndisplay 属性设置元素的显示或布局方式，默认值为flex（弹性布局）。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\ndisplay: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>;\n```\n","values":"\n### display 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| flex | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 该元素根据弹性盒模型布局。 |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 使元素不再显示，其对布局不会有影响（页面渲染得好像此元素并不存在），所有的子元素也不会再显示。如需元素占据空间，但不渲染任何东西，应该使用 visibility 属性。 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | flex |\n\n **注意**：W3C 默认值为：inline","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/display)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.display)\n","example":"","restrictions":"\n### 值限制\n- enum\n"},"flex":{"name":"## flex\n","description":"\nflex 属性设置弹性元素如何增大或缩小以适应其弹性容器中可用的空间，是 flex-grow、flex-shrink、flex-basis 的简写。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nflex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];\n```\n","values":"\n### flex 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| initial | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为\"flex: 0 1 auto\"。 |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 \"flex: 1 1 auto\". |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为\"flex: 0 0 auto\"。 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | none |\n\n **注意**：W3C 默认值为：initial","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.flex)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/display/flex.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/display/flex.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/display/flex\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/display/flex\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view>\n      <view class=\"head\">\n        <text class=\"tip\">下面有一个灰色区域，display默认值为flex</text>\n        <text class=\"tip\">当前display值：{{data.display}}</text>\n      </view>\n      <view class=\"content\" :style=\"{display:data.display}\">\n        <text class=\"cyan-text\" style=\"background-color: aquamarine;\">展示display区域</text>\n        <scroll-view>\n          <text class=\"common-text\" style=\"height: 20px;\">scroll-view</text>\n        </scroll-view>\n        <!-- #ifndef MP-ALIPAY -->\n          <text class=\"common-text\" style=\"height: 20px;\">下方有个native-view</text>\n          <test-native-view style=\"width: 20px;height: 20px;background-color: cyan;\"></test-native-view>\n        <!-- #endif -->\n      </view>\n      <button @tap=\"switchDisplay\" class=\"uni-common-mb\">切换display属性</button>\n\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\n      <text class=\"uni-subtitle-text\">display: flex 和 display: none</text>\n      <view class=\"demo-box\">\n        <scroll-view class=\"common-view\" style=\"display: flex;\">\n          <text class=\"common-text\">display: flex</text>\n        </scroll-view>\n        <scroll-view class=\"common-view\" style=\"display: none;\">\n          <text class=\"common-text\">display: none</text>\n        </scroll-view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"test-container\">\n        <!-- view 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.displayProp}}</text>\n          <text class=\"uni-info\">获取值: {{data.displayActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-view test-view\" :style=\"{ display: data.displayProp }\">\n              <text class=\"common-text\">view</text>\n            </view>\n          </view>\n        </view>\n\n        <!-- text 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.displayProp}}</text>\n          <text class=\"uni-info\">获取值: {{data.displayActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-text test-text\" :style=\"{ display: data.displayProp }\">text</text>\n          </view>\n        </view>\n\n        <!-- image 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.displayProp}}</text>\n          <text class=\"uni-info\">获取值: {{data.displayActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ display: data.displayProp }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 测试控制区域 -->\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"displayEnum\" title=\"display 枚举值\" @change=\"radioChangeDisplay\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.displayProp\" title=\"display 自定义值\" type=\"text\" @confirm=\"inputChangeDisplay\"></input-data>\n      </view>\n\n      <!-- #ifndef MP-ALIPAY -->\n        <view class=\"uni-common-mb\">\n          <text>native-view组件: display: flex 和 display: none</text>\n          <view class=\"demo-box\">\n            <test-native-view class=\"common-view\" style=\"display: flex;width:100px;\"></test-native-view>\n            <test-native-view class=\"common-view\" style=\"display: none;width:100px;\"></test-native-view>\n          </view>\n        </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    display: 'flex',\n    displayProp: 'flex',\n    displayActual: '',\n    displayActualText: '',\n    displayActualImage: ''\n  })\n\n  const switchDisplay = () => {\n    data.display = ('flex' == data.display) ? 'none' : 'flex'\n  }\n\n  const displayEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'flex' },\n    { value: 2, name: 'none' }\n  ]\n\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    data.displayActual = viewRef.value?.style.getPropertyValue('display') ?? ''\n    data.displayActualText = textRef.value?.style.getPropertyValue('display') ?? ''\n    data.displayActualImage = imageRef.value?.style.getPropertyValue('display') ?? ''\n  }\n\n  const changeDisplay = (value: string) => {\n    data.displayProp = value\n    viewRef.value?.style.setProperty('display', value)\n    textRef.value?.style.setProperty('display', value)\n    imageRef.value?.style.setProperty('display', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeDisplay = (index: number) => {\n    const selectedItem = displayEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeDisplay(selectedItem.name)\n    }\n  }\n\n  const inputChangeDisplay = (value: string) => {\n    changeDisplay(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeDisplay,\n    data\n  })\n</script>\n\n<style>\n  .page {\n    height: 100%;\n  }\n\n  .head {\n    margin-top: 10px;\n    margin-bottom: 10px;\n    align-items: center;\n  }\n\n  .tip {\n    color: red;\n  }\n\n  .content {\n    border: 5px dotted blue;\n    margin: 10px auto;\n    padding: 30px;\n    width: 200px;\n    height: 150px;\n    background-color: gray;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* 多组件横向布局样式 */\n  .test-container {\n    flex-direction: row;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 60px;\n    background-color: gray;\n  }\n\n  .common-view {\n    height: 50px;\n    background-color: green;\n  }\n\n  .common-text {\n    height: 50px;\n    background-color: green;\n    font-size: 12px;\n    color: white;\n  }\n\n  .cyan-text {\n    color: #1a1a1a;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: green;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    justify-content: space-around;\n    margin-top: 10px;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- number\n- length\n- enum\n"},"flex-basis":{"name":"## flex-basis\n","description":"\nflex-basis 属性设置弹性元素在主轴方向的初始大小，即在分配剩余空间（flex-grow）或收缩溢出空间（flex-shrink）的基准尺寸。当弹性元素同时设置了 flex-basis（除 auto 外的值）和 width（或 flex-direction 为 column 时设置了 height），flex-basis 的优先级更高。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nflex-basis: content | <'width'>;\n```\n","values":"\n### flex-basis 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 参照元素的 `width` 和 `height` 属性计算初始大小。 |\n| content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 基于 flex 的元素的内容自动调整大小。<br/>    <br/>      **备注：**由于最初规范中没有包括这个值，在一些早期的浏览器实现的 flex 布局中，content 值无效，可以利用设置 (width 或 height) 为 auto 达到同样的效果。<br/>    <br/>    <br/>      备注： 简史<br/>      <br/>        最初，\"flex-basis:auto\" 的含义是 \"参照我的width和height属性\".<br/>        在此之后，\"flex-basis:auto\" 的含义变成了自动尺寸，而 \"main-size\" 变成了 \"参照我的width和height属性\"。实际执行于 bug 1032922.<br/>        然后呢，这个更改又在 bug 1093316 中被撤销了，所以 \"auto\" 变回了原来的含义; 而一个新的关键字 'content' 变成了自动尺寸。 (Firefox bug 1105111 包括了增加这个关键字). |\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-basis)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.flex.flex-basis)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/flex/flex-basis.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/flex/flex-basis.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/flex/flex-basis\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/flex/flex-basis\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>flex-basis</text>\n        <view class=\"demo-box\">\n          <view class=\"flex-container\">\n            <view class=\"common\" style=\"flex-basis: 100px\">\n              <text>100px</text>\n            </view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"flex-container\">\n            <view class=\"common\" style=\"flex-basis: 100px\" flatten>\n              <text>100px</text>\n            </view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n      </view>\n\n      <view class=\"demo-box\">\n        <view class=\"flex-container\">\n          <scroll-view class=\"common\" style=\"flex-basis: 50px;\">\n            <text class=\"scroll-view-label\">50px</text>\n          </scroll-view>\n          <view class=\"flex-item green\"></view>\n          <view class=\"flex-item blue\"></view>\n        </view>\n        <view class=\"flex-container\">\n          <scroll-view class=\"common\" style=\"flex-basis: 100px;\">\n            <text class=\"scroll-view-label\">100px</text>\n          </scroll-view>\n          <view class=\"flex-item green\"></view>\n          <view class=\"flex-item blue\"></view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <!-- view 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.flexBasis}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexBasisActual}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <view class=\"common-image red\"></view>\n              <view ref=\"viewRef\" class=\"common-image green test-view\" :style=\"{ flexBasis: data.flexBasis }\">\n                <text class=\"test-label\">view</text>\n              </view>\n              <view class=\"common-image blue\"></view>\n            </view>\n          </view>\n        </view>\n\n        <!-- text 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.flexBasis}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexBasisActualText}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <text class=\"common-text red\">红色</text>\n              <text ref=\"textRef\" class=\"common-text green test-text\" :style=\"{ flexBasis: data.flexBasis }\">text</text>\n              <text class=\"common-text blue\">蓝色</text>\n            </view>\n          </view>\n        </view>\n\n        <!-- image 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.flexBasis}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexBasisActualImage}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <image class=\"common-image red\" src=\"/static/test-image/logo.png\"></image>\n              <image ref=\"imageRef\" class=\"common-image green test-image\" :style=\"{ flexBasis: data.flexBasis }\" src=\"/static/test-image/logo.png\"></image>\n              <image class=\"common-image blue\" src=\"/static/test-image/logo.png\"></image>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <!-- view 组件拍平测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.flexBasis}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexBasisActualFlat}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <view class=\"common-image red\"></view>\n              <view ref=\"viewRefFlat\" class=\"common-image green test-view-flatten\" :style=\"{ flexBasis: data.flexBasis }\" flatten>\n                <text class=\"test-label\">view</text>\n              </view>\n              <view class=\"common-image blue\"></view>\n            </view>\n          </view>\n        </view>\n\n        <!-- text 组件拍平测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.flexBasis}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexBasisActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <text class=\"common-text red\">红色</text>\n              <text ref=\"textRefFlat\" class=\"common-text green test-text-flatten\" :style=\"{ flexBasis: data.flexBasis }\" flatten>text</text>\n              <text class=\"common-text blue\">蓝色</text>\n            </view>\n          </view>\n        </view>\n\n        <!-- image 组件拍平测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.flexBasis}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexBasisActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <image class=\"common-image red\" src=\"/static/test-image/logo.png\"></image>\n              <image ref=\"imageRefFlat\" class=\"common-image green test-image-flatten\" :style=\"{ flexBasis: data.flexBasis }\" flatten src=\"/static/test-image/logo.png\"></image>\n              <image class=\"common-image blue\" src=\"/static/test-image/logo.png\"></image>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"flexBasisEnum\" title=\"flex-basis 枚举值\" @change=\"radioChangeFlexBasis\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.flexBasis\" title=\"flex-basis 自定义值\" type=\"text\" @confirm=\"inputChangeFlexBasis\"></input-data>\n      </view>\n\n      <!-- #ifndef MP-ALIPAY -->\n        <text class=\"uni-title-text\">native-view 组件：flex-basis: 50px 和 100px</text>\n        <view class=\"demo-box uni-common-mb\">\n          <view class=\"flex-container\">\n            <test-native-view class=\"common-view\" style=\"flex-basis: 50px;\"></test-native-view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"flex-container\">\n            <test-native-view class=\"common-view\" style=\"flex-basis: 100px;\"></test-native-view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const flexBasisEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '0px' },\n    { value: 3, name: '50px' },\n    { value: 4, name: '0%' },\n    { value: 5, name: '50%' },\n    { value: 6, name: 'auto' },\n  ]\n\n  const data = reactive({\n    flexBasis: '30px',\n    flexBasisActual: '',\n    flexBasisActualFlat: '',\n    flexBasisActualText: '',\n    flexBasisActualImage: '',\n    flexBasisActualTextFlat: '',\n    flexBasisActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    data.flexBasisActual = viewRef.value?.style.getPropertyValue('flex-basis') ?? ''\n    data.flexBasisActualFlat = viewRefFlat.value?.style.getPropertyValue('flex-basis') ?? ''\n    data.flexBasisActualText = textRef.value?.style.getPropertyValue('flex-basis') ?? ''\n    data.flexBasisActualTextFlat = textRefFlat.value?.style.getPropertyValue('flex-basis') ?? ''\n    data.flexBasisActualImage = imageRef.value?.style.getPropertyValue('flex-basis') ?? ''\n    data.flexBasisActualImageFlat = imageRefFlat.value?.style.getPropertyValue('flex-basis') ?? ''\n  }\n\n  const changeFlexBasis = (value: string) => {\n    data.flexBasis = value\n    viewRef.value?.style.setProperty('flex-basis', value)\n    viewRefFlat.value?.style.setProperty('flex-basis', value)\n    textRef.value?.style.setProperty('flex-basis', value)\n    textRefFlat.value?.style.setProperty('flex-basis', value)\n    imageRef.value?.style.setProperty('flex-basis', value)\n    imageRefFlat.value?.style.setProperty('flex-basis', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeFlexBasis = (index: number) => {\n    const selectedItem = flexBasisEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeFlexBasis(selectedItem.name)\n    }\n  }\n\n  const inputChangeFlexBasis = (value: string) => {\n    changeFlexBasis(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeFlexBasis,\n    data\n  })\n</script>\n\n<style>\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .flex-container {\n    flex: 1;\n    margin: 0 10px;\n    height: 80px;\n    background-color: gray;\n    flex-direction: row;\n  }\n  .flex-item {\n    width: 40px;\n    height: 40px;\n  }\n  .red {\n    background-color: red;\n  }\n  .green {\n    background-color: green;\n  }\n  .blue {\n    background-color: blue;\n  }\n  .common {\n    width: 40px;\n    height: 40px;\n    background-color: red;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .common-view {\n    width: 40px;\n    height: 40px;\n    background-color: red;\n  }\n\n  .common-text {\n    width: 30px;\n    height: 30px;\n    font-size: 12px;\n    color: white;\n  }\n\n  .common-image {\n    width: 30px;\n    height: 30px;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 50px;\n    background-color: gray;\n  }\n\n\n  .test-flex-container {\n    width: 100%;\n    height: 100%;\n    flex-direction: row;\n  }\n\n\n  .test-label {\n    font-size: 12px;\n  }\n\n  .scroll-view-label {\n    font-size: 12px;\n    line-height: 50px;\n    text-align: center;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- number\n- length\n- percentage\n"},"flex-direction":{"name":"## flex-direction\n","description":"\nflex-direction 属性设置弹性容器中的子元素的布局方向，该方向定义为主轴，另一个垂直与它的方向为交叉轴。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nflex-direction: row | row-reverse | column | column-reverse;\n```\n","values":"\n### flex-direction 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| row | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。 |\n| row-reverse | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表现和 row 相同，但是置换了主轴起点和主轴终点 |\n| column | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同 |\n| column-reverse | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表现和column相同，但是置换了主轴起点和主轴终点 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | column |\n\n **注意**：W3C 默认值为：row","unixTags":"### 适用组件 @unix-tags \n - [view](/component/view.md)\n- [scroll-view](/component/scroll-view.md)\n- [list-item](/component/list-item.md)\n- [swiper-item](/component/swiper-item.md)\n- [flow-item](/component/flow-item.md)\n- [navigator](/component/navigator.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-direction)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.flex.flex-direction)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/flex/flex-direction.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/flex/flex-direction.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/flex/flex-direction\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/flex/flex-direction\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>flex-direction: row</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"flex-direction: row\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"flex-direction: row\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>flex-direction: row-reverse</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"flex-direction: row-reverse\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"flex-direction: row-reverse\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>flex-direction: column</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"flex-direction: column\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"flex-direction: column\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>flex-direction: column-reverse</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"flex-direction: column-reverse\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"flex-direction: column-reverse\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n      </view>\n\n      <view>\n        <text class=\"uni-subtitle-text\">flex-direction：row 和 column</text>\n        <view class=\"demo-box\">\n          <scroll-view class=\"common\" style=\"flex-direction: row;\" direction=\"horizontal\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </scroll-view>\n          <scroll-view class=\"common\" style=\"flex-direction: column;\" direction=\"horizontal\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </scroll-view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"common-box\">\n        <!-- 普通版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">flex-direction</text>\n          <text class=\"uni-info\">设置值: {{data.flexDirection}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexDirectionActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"test-flex-container test-view\" :style=\"{ flexDirection: data.flexDirection }\">\n              <view class=\"test-item-small red\"></view>\n              <view class=\"test-item-small green\"></view>\n              <view class=\"test-item-small blue\"></view>\n            </view>\n          </view>\n        </view>\n\n        <!-- 拍平版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">拍平</text>\n          <text class=\"uni-info\">设置值: {{data.flexDirection}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexDirectionActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"test-flex-container test-view-flatten\" :style=\"{ flexDirection: data.flexDirection }\" flatten>\n              <view class=\"test-item-small red\"></view>\n              <view class=\"test-item-small green\"></view>\n              <view class=\"test-item-small blue\"></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"flexDirectionEnum\" title=\"flex-direction 枚举值\" @change=\"radioChangeFlexDirection\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.flexDirection\" title=\"flex-direction 自定义值\" type=\"text\" @confirm=\"inputChangeFlexDirection\"></input-data>\n      </view>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const flexDirectionEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'row' },\n    { value: 2, name: 'row-reverse' },\n    { value: 3, name: 'column' },\n    { value: 4, name: 'column-reverse' }\n  ]\n\n  const data = reactive({\n    flexDirection: 'row',\n    flexDirectionActual: '',\n    flexDirectionActualFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n\n  const getPropertyValues = () => {\n    data.flexDirectionActual = viewRef.value?.style.getPropertyValue('flex-direction') ?? ''\n    data.flexDirectionActualFlat = viewRefFlat.value?.style.getPropertyValue('flex-direction') ?? ''\n  }\n\n  const changeFlexDirection = (value: string) => {\n    data.flexDirection = value\n    viewRef.value?.style.setProperty('flex-direction', value)\n    viewRefFlat.value?.style.setProperty('flex-direction', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeFlexDirection = (index: number) => {\n    const selectedItem = flexDirectionEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeFlexDirection(selectedItem.name)\n    }\n  }\n\n  const inputChangeFlexDirection = (value: string) => {\n    changeFlexDirection(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeFlexDirection,\n    data\n  })\n</script>\n\n<style>\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .flex-item {\n    width: 40px;\n    height: 40px;\n  }\n  .red {\n    background-color: red;\n  }\n  .green {\n    background-color: green;\n  }\n  .blue {\n    background-color: blue;\n  }\n  .common {\n    flex: 1;\n    margin: 0 10px;\n    height: 220px;\n    background-color: gray;\n  }\n  .common-box{\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 150px;\n    background-color: gray;\n  }\n\n\n  .test-flex-container {\n    width: 100%;\n    height: 100%;\n    background-color: gray;\n  }\n\n  .test-item-small {\n    width: 30px;\n    height: 30px;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"flex-flow":{"name":"## flex-flow\n","description":"\nflex-flow 属性设置弹性容器中子元素的布局主轴方向及单或多行（列）堆叠方向，，是 flex-direction、flex-wrap 的简写。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nflex-flow: <'flex-direction'> || <'flex-wrap'>;\n```\n","values":"\n### flex-flow 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| column | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 主轴为垂直方向，起点在上沿。 |\n| column-reverse | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 主轴为垂直方向（与column相同），起点在下沿（与column相反）。 |\n| row | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 主轴为水平方向，起点在左端。 |\n| row-reverse | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 主轴为水平方向（与row相同），起点在右端（与row相反）。 |\n| nowrap | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 不换行。 |\n| wrap | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 换行，第一行在上方。 |\n| wrap-reverse | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 换行（与wrap相同），第一行在下方（与wrap相反）。 |\n","defaultValue":"","unixTags":"### 适用组件 @unix-tags \n - [view](/component/view.md)\n- [scroll-view](/component/scroll-view.md)\n- [list-view](/component/list-view.md)\n- [list-item](/component/list-item.md)\n- [flow-item](/component/flow-item.md)\n- [swiper-item](/component/swiper-item.md)\n- [navigator](/component/navigator.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-flow)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.flex.flex-flow)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/flex/flex-flow.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/flex/flex-flow.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/flex/flex-flow\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/flex/flex-flow\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>flex-flow: row nowrap</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"flex-flow: row nowrap\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"flex-flow: row nowrap\" flatten>\n            <view class=\"flex-item red\" flatten></view>\n            <view class=\"flex-item green\" flatten></view>\n            <view class=\"flex-item blue\" flatten></view>\n            <view class=\"flex-item red\" flatten></view>\n            <view class=\"flex-item green\" flatten></view>\n            <view class=\"flex-item blue\" flatten></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>flex-flow: row wrap</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"flex-flow: row wrap\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"flex-flow: row wrap\" flatten>\n            <view class=\"flex-item red\" flatten></view>\n            <view class=\"flex-item green\" flatten></view>\n            <view class=\"flex-item blue\" flatten></view>\n            <view class=\"flex-item red\" flatten></view>\n            <view class=\"flex-item green\" flatten></view>\n            <view class=\"flex-item blue\" flatten></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>flex-flow: column nowrap</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"flex-flow: column nowrap\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"flex-flow: column nowrap\" flatten>\n            <view class=\"flex-item red\" flatten></view>\n            <view class=\"flex-item green\" flatten></view>\n            <view class=\"flex-item blue\" flatten></view>\n            <view class=\"flex-item red\" flatten></view>\n            <view class=\"flex-item green\" flatten></view>\n            <view class=\"flex-item blue\" flatten></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>flex-flow: column wrap</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"flex-flow: column wrap\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"flex-flow: column wrap\" flatten>\n            <view class=\"flex-item red\" flatten></view>\n            <view class=\"flex-item green\" flatten></view>\n            <view class=\"flex-item blue\" flatten></view>\n            <view class=\"flex-item red\" flatten></view>\n            <view class=\"flex-item green\" flatten></view>\n            <view class=\"flex-item blue\" flatten></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n        <text class=\"uni-subtitle-text\">flex-flow: row wrap 和 flex-flow: column nowrap</text>\n      </view>\n\n      <view class=\"demo-box\">\n        <scroll-view class=\"common\" style=\"flex-flow: row wrap;\" direction=\"horizontal\">\n          <view class=\"flex-item red\"></view>\n          <view class=\"flex-item green\"></view>\n          <view class=\"flex-item blue\"></view>\n          <view class=\"flex-item red\"></view>\n          <view class=\"flex-item green\"></view>\n          <view class=\"flex-item blue\"></view>\n        </scroll-view>\n        <scroll-view class=\"common\" style=\"flex-flow: column nowrap;\" direction=\"horizontal\">\n          <view class=\"flex-item red\"></view>\n          <view class=\"flex-item green\"></view>\n          <view class=\"flex-item blue\"></view>\n          <view class=\"flex-item red\"></view>\n          <view class=\"flex-item green\"></view>\n          <view class=\"flex-item blue\"></view>\n        </scroll-view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"common-box\">\n        <!-- 普通版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">flex-flow</text>\n          <text class=\"uni-info\">设置值: {{data.flexFlow}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexFlowActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"test-flex-container test-view\" :style=\"{ flexFlow: data.flexFlow }\">\n              <view class=\"test-item red\"></view>\n              <view class=\"test-item green\"></view>\n              <view class=\"test-item blue\"></view>\n              <view class=\"test-item red\"></view>\n              <view class=\"test-item green\"></view>\n              <view class=\"test-item blue\"></view>\n            </view>\n          </view>\n        </view>\n\n        <!-- 拍平版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">拍平</text>\n          <text class=\"uni-info\">设置值: {{data.flexFlow}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexFlowActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"test-flex-container test-view-flatten\" :style=\"{ flexFlow: data.flexFlow }\" flatten>\n              <view class=\"test-item red\" flatten></view>\n              <view class=\"test-item green\" flatten></view>\n              <view class=\"test-item blue\" flatten></view>\n              <view class=\"test-item red\" flatten></view>\n              <view class=\"test-item green\" flatten></view>\n              <view class=\"test-item blue\" flatten></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n          <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n          <enum-data :items=\"flexFlowEnum\" title=\"flex-flow 枚举值\" @change=\"radioChangeFlexFlow\" :compact=\"true\"></enum-data>\n          <input-data :defaultValue=\"data.flexFlow\" title=\"flex-flow 自定义值\" type=\"text\" @confirm=\"inputChangeFlexFlow\"></input-data>\n      </view>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const flexFlowEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'row nowrap' },\n    { value: 2, name: 'row wrap' },\n    { value: 3, name: 'row wrap-reverse' },\n    { value: 4, name: 'column nowrap' },\n    { value: 5, name: 'column wrap' },\n    { value: 6, name: 'column wrap-reverse' }\n  ]\n\n  const data = reactive({\n    flexFlow: 'row wrap',\n    flexFlowActual: '',\n    flexFlowActualFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n\n  const getPropertyValues = () => {\n    data.flexFlowActual = viewRef.value?.style.getPropertyValue('flex-flow') ?? ''\n    data.flexFlowActualFlat = viewRefFlat.value?.style.getPropertyValue('flex-flow') ?? ''\n  }\n\n\n  const changeFlexFlow = (value : string) => {\n    data.flexFlow = value\n    viewRef.value?.style.setProperty('flex-flow', value)\n    viewRefFlat.value?.style.setProperty('flex-flow', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeFlexFlow = (index: number) => {\n    const selectedItem = flexFlowEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeFlexFlow(selectedItem.name)\n    }\n  }\n\n  const inputChangeFlexFlow = (value: string) => {\n    changeFlexFlow(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeFlexFlow,\n    data\n  })\n</script>\n\n<style>\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .common {\n    flex: 1;\n    margin: 0 10px;\n    height: 190px;\n    background-color: gray;\n  }\n\n  .flex-item {\n    width: 40px;\n    height: 40px;\n    flex-shrink: 0;\n    border-bottom:#ddd solid 1px;\n  }\n  .red {\n    background-color: red;\n  }\n  .green {\n    background-color: green;\n  }\n  .blue {\n    background-color: blue;\n  }\n  .common-box{\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 180px;\n    background-color: gray;\n  }\n\n\n  .test-flex-container {\n    width: 100%;\n    height: 100%;\n    background-color: gray;\n  }\n\n  .test-item {\n    width: 40px;\n    height: 40px;\n    flex-shrink: 0;\n  }\n\n  .scroll-view-label {\n    font-size: 12px;\n    text-align: center;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"flex-grow":{"name":"## flex-grow\n","description":"\nflex-grow 属性设置弹性元素在主轴方向的增长系数。此属性定义了元素在弹性容器中分配主轴方向剩余空间的相对比例（即弹性增长因子），增长的可能是弹性元素的宽度或高度，取决于 flex-direction 值。<br/>剩余空间是指弹性容器尺寸减去所有子元素尺寸之和后的空间。若所有子元素有相同的增长系数，则各子元素将获得等量的剩余空间，否则按不同增长系数的比例进行分配。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nflex-grow: <number>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-grow)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.flex.flex-grow)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/flex/flex-grow.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/flex/flex-grow.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/flex/flex-grow\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/flex/flex-grow\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>flex-grow</text>\n        <view class=\"demo-box\">\n          <view class=\"flex-container\">\n            <view class=\"common red\" style=\"flex-grow: 0.5\">\n              <text>0.5</text>\n            </view>\n            <view class=\"common green\" style=\"flex-grow: 1\">\n              <text>1</text>\n            </view>\n            <view class=\"common blue\" style=\"flex-grow: 2\">\n              <text>2</text>\n            </view>\n          </view>\n          <view class=\"flex-container\">\n            <view class=\"common red\" style=\"flex-grow: 0.5\" flatten>\n              <text>0.5</text>\n            </view>\n            <view class=\"common green\" style=\"flex-grow: 1\" flatten>\n              <text>1</text>\n            </view>\n            <view class=\"common blue\" style=\"flex-grow: 2\" flatten>\n              <text>2</text>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n      </view>\n\n      <view class=\"demo-box\">\n        <view class=\"flex-container-compare\" style=\"margin-right:10px;\">\n          <view class=\"common red width-30-no-grow\"></view>\n          <scroll-view class=\"scroll-view-grow green\" style=\"flex-grow: 0.5;\">\n            <text class=\"scroll-view-label\">flex-grow: 0.5</text>\n          </scroll-view>\n          <view class=\"common blue width-30-no-grow\"></view>\n        </view>\n        <view class=\"flex-container-compare\">\n          <view class=\"common red width-30-no-grow\"></view>\n          <scroll-view class=\"scroll-view-grow green\" style=\"flex-grow: 1;\">\n            <text class=\"scroll-view-label\">flex-grow: 1</text>\n          </scroll-view>\n          <view class=\"common blue width-30-no-grow\"></view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <!-- view 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.flexGrow}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexGrowActual}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <view class=\"common-image red\"></view>\n              <view ref=\"viewRef\" class=\"common-image green test-view\" :style=\"{ flexGrow: data.flexGrow }\">\n                <text class=\"common-text\">{{data.flexGrow}}</text>\n              </view>\n              <view class=\"common-image blue\"></view>\n            </view>\n          </view>\n        </view>\n\n        <!-- text 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.flexGrow}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexGrowActualText}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <text class=\"common-text red\">红色</text>\n              <text ref=\"textRef\" class=\"common-text green test-text\" :style=\"{ flexGrow: data.flexGrow }\">text</text>\n              <text class=\"common-text blue\">蓝色</text>\n            </view>\n          </view>\n        </view>\n\n        <!-- image 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.flexGrow}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexGrowActualImage}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <image class=\"common-image red\" src=\"/static/test-image/logo.png\"></image>\n              <image ref=\"imageRef\" class=\"common-image green test-image\" :style=\"{ flexGrow: data.flexGrow }\" src=\"/static/test-image/logo.png\"></image>\n              <image class=\"common-image blue\" src=\"/static/test-image/logo.png\"></image>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <!-- view 组件拍平测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.flexGrow}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexGrowActualFlat}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <view class=\"common-image red\"></view>\n              <view ref=\"viewRefFlat\" class=\"common-image green test-view-flatten\" :style=\"{ flexGrow: data.flexGrow }\" flatten>\n                <text class=\"common-text\">{{data.flexGrow}}</text>\n              </view>\n              <view class=\"common-image blue\"></view>\n            </view>\n          </view>\n        </view>\n\n        <!-- text 组件拍平测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.flexGrow}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexGrowActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <text class=\"common-text red\">红色</text>\n              <text ref=\"textRefFlat\" class=\"common-text green test-text-flatten\" :style=\"{ flexGrow: data.flexGrow }\" flatten>text</text>\n              <text class=\"common-text blue\">蓝色</text>\n            </view>\n          </view>\n        </view>\n\n        <!-- image 组件拍平测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.flexGrow}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexGrowActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <image class=\"common-image red\" src=\"/static/test-image/logo.png\"></image>\n              <image ref=\"imageRefFlat\" class=\"common-image green test-image-flatten\" :style=\"{ flexGrow: data.flexGrow }\" flatten src=\"/static/test-image/logo.png\"></image>\n              <image class=\"common-image blue\" src=\"/static/test-image/logo.png\"></image>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"flexGrowEnum\" title=\"flex-grow 枚举值\" @change=\"radioChangeFlexGrow\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.flexGrow\" title=\"flex-grow 自定义值\" type=\"text\" @confirm=\"inputChangeFlexGrow\"></input-data>\n      </view>\n\n      <!-- #ifndef MP-ALIPAY -->\n        <text class=\"uni-title-text uni-common-mt\">native-view 组件：flex-grow: 0.5 和 flex-grow: 1</text>\n        <view class=\"demo-box uni-common-mb\">\n          <view class=\"flex-container-compare\" style=\"margin-right:10px;\">\n            <view class=\"common red width-30-no-grow\"></view>\n            <test-native-view class=\"native-view-grow green\" style=\"flex-grow: 0.5;\"></test-native-view>\n            <view class=\"common blue width-30-no-grow\"></view>\n          </view>\n          <view class=\"flex-container-compare\">\n            <view class=\"common red width-30-no-grow\"></view>\n            <test-native-view class=\"native-view-grow green\" style=\"flex-grow: 1;\"></test-native-view>\n            <view class=\"common blue width-30-no-grow\"></view>\n          </view>\n        </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const flexGrowEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '0.5' },\n    { value: 3, name: '1' },\n    { value: 4, name: '2' },\n  ]\n\n  const data = reactive({\n    flexGrow: '0',\n    flexGrowActual: '',\n    flexGrowActualFlat: '',\n    flexGrowActualText: '',\n    flexGrowActualImage: '',\n    flexGrowActualTextFlat: '',\n    flexGrowActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    data.flexGrowActual = viewRef.value?.style.getPropertyValue('flex-grow') ?? ''\n    data.flexGrowActualFlat = viewRefFlat.value?.style.getPropertyValue('flex-grow') ?? ''\n    data.flexGrowActualText = textRef.value?.style.getPropertyValue('flex-grow') ?? ''\n    data.flexGrowActualTextFlat = textRefFlat.value?.style.getPropertyValue('flex-grow') ?? ''\n    data.flexGrowActualImage = imageRef.value?.style.getPropertyValue('flex-grow') ?? ''\n    data.flexGrowActualImageFlat = imageRefFlat.value?.style.getPropertyValue('flex-grow') ?? ''\n  }\n\n\n  const changeFlexGrow = (value: string) => {\n    data.flexGrow = value\n    viewRef.value?.style.setProperty('flex-grow', value)\n    viewRefFlat.value?.style.setProperty('flex-grow', value)\n    textRef.value?.style.setProperty('flex-grow', value)\n    textRefFlat.value?.style.setProperty('flex-grow', value)\n    imageRef.value?.style.setProperty('flex-grow', value)\n    imageRefFlat.value?.style.setProperty('flex-grow', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeFlexGrow = (index: number) => {\n    const selectedItem = flexGrowEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeFlexGrow(selectedItem.name)\n    }\n  }\n\n  const inputChangeFlexGrow = (value: string) => {\n    changeFlexGrow(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeFlexGrow,\n    data\n  })\n</script>\n\n<style>\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .flex-container {\n    flex: 1;\n    margin: 0 10px;\n    height: 100px;\n    background-color: gray;\n    flex-direction: row;\n  }\n  .common {\n    width: 50px;\n    height: 50px;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .common-text {\n    height: 30px;\n    background-color: green;\n    font-size: 14px;\n    color: white;\n  }\n\n  .common-image {\n    width: 30px;\n    height: 30px;\n    background-color: green;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 50px;\n    background-color: gray;\n  }\n\n\n  .test-flex-container {\n    width: 100%;\n    height: 100%;\n    flex-direction: row;\n  }\n\n  .red {\n    background-color: red;\n  }\n\n  .blue {\n    background-color: blue;\n  }\n\n  .green {\n    background-color: green;\n  }\n\n  .scroll-view-label {\n    font-size: 12px;\n    line-height: 50px;\n    text-align: center;\n  }\n\n  .flex-container-compare {\n    width: 180px;\n    height: 100px;\n    background-color: gray;\n    flex-direction: row;\n  }\n\n  .scroll-view-grow {\n    height: 50px;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .native-view-grow {\n    height: 50px;\n  }\n\n  .width-30-no-grow {\n    width: 30px;\n    flex-grow: 0;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- number\n"},"flex-shrink":{"name":"## flex-shrink\n","description":"\nflex-shrink 属性设置弹性元素在主轴方向的收缩系数。当所有子元素在主轴方向的尺寸之和大于容器时才会发生收缩，会根据元素的收缩系数进行收缩保证不溢出弹性容器。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nflex-shrink: <number>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | 0 |\n\n **注意**：W3C 默认值为：1","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-shrink)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.flex.flex-shrink)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/flex/flex-shrink.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/flex/flex-shrink.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/flex/flex-shrink\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/flex/flex-shrink\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>flex-shrink</text>\n        <view class=\"demo-box\">\n          <view class=\"flex-container\">\n            <view class=\"common red\" style=\"flex-shrink: 1\">\n              <text>1</text>\n            </view>\n            <view class=\"common green\" style=\"flex-shrink: 2\">\n              <text>2</text>\n            </view>\n            <view class=\"common blue\" style=\"flex-shrink: 3\">\n              <text>3</text>\n            </view>\n          </view>\n          <view class=\"flex-container\">\n            <view class=\"common red\" style=\"flex-shrink: 1\" flatten>\n              <text>1</text>\n            </view>\n            <view class=\"common green\" style=\"flex-shrink: 2\" flatten>\n              <text>2</text>\n            </view>\n            <view class=\"common blue\" style=\"flex-shrink: 3\" flatten>\n              <text>3</text>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件：flex-shrink: 1 、2、3</text>\n      </view>\n      <view class=\"demo-box\">\n        <view class=\"flex-container-shrink\">\n          <scroll-view class=\"scroll-view-shrink red\" style=\"width: 100px; flex-shrink: 1;\">\n            <text class=\"scroll-view-label\">flex-shrink: 1</text>\n          </scroll-view>\n          <scroll-view class=\"scroll-view-shrink green\" style=\"width: 100px; flex-shrink: 2;\">\n            <text class=\"scroll-view-label\">flex-shrink: 2</text>\n          </scroll-view>\n          <scroll-view class=\"scroll-view-shrink blue\" style=\"width: 100px; flex-shrink: 3;\">\n            <text class=\"scroll-view-label\">flex-shrink: 3</text>\n          </scroll-view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <!-- view 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.flexShrink}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexShrinkActual}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <view class=\"common-image red\" style=\"flex-shrink: 1;\"></view>\n              <view ref=\"viewRef\" class=\"common-image green test-view\" :style=\"{ flexShrink: data.flexShrink }\">\n                <text class=\"test-label\">{{data.flexShrink}}</text>\n              </view>\n              <view class=\"common-image blue\" style=\"flex-shrink: 1;\"></view>\n            </view>\n          </view>\n        </view>\n\n        <!-- text 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.flexShrink}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexShrinkActualText}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <text class=\"common-text red\" style=\"flex-shrink: 1;\">红色</text>\n              <text ref=\"textRef\" class=\"common-text green test-text\" :style=\"{ flexShrink: data.flexShrink }\">text</text>\n              <text class=\"common-text blue\" style=\"flex-shrink: 1;\">蓝色</text>\n            </view>\n          </view>\n        </view>\n\n        <!-- image 组件测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.flexShrink}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexShrinkActualImage}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <image class=\"common-image red\" style=\"flex-shrink: 1;\" src=\"/static/test-image/logo.png\"></image>\n              <image ref=\"imageRef\" class=\"common-image green test-image\" :style=\"{ flexShrink: data.flexShrink }\" src=\"/static/test-image/logo.png\"></image>\n              <image class=\"common-image blue\" style=\"flex-shrink: 1;\" src=\"/static/test-image/logo.png\"></image>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <!-- view 组件拍平测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.flexShrink}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexShrinkActualFlat}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <view class=\"common-image red\" style=\"flex-shrink: 1;\"></view>\n              <view ref=\"viewRefFlat\" class=\"common-image green test-view-flatten\" :style=\"{ flexShrink: data.flexShrink }\" flatten>\n                <text class=\"test-label\">{{data.flexShrink}}</text>\n              </view>\n              <view class=\"common-image blue\" style=\"flex-shrink: 1;\"></view>\n            </view>\n          </view>\n        </view>\n\n        <!-- text 组件拍平测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.flexShrink}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexShrinkActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <text class=\"common-text red\" style=\"flex-shrink: 1;\">红色</text>\n              <text ref=\"textRefFlat\" class=\"common-text green test-text-flatten\" :style=\"{ flexShrink: data.flexShrink }\" flatten>text</text>\n              <text class=\"common-text blue\" style=\"flex-shrink: 1;\">蓝色</text>\n            </view>\n          </view>\n        </view>\n\n        <!-- image 组件拍平测试 -->\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.flexShrink}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexShrinkActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <view class=\"test-flex-container\">\n              <image class=\"common-image red\" style=\"flex-shrink: 1;\" src=\"/static/test-image/logo.png\"></image>\n              <image ref=\"imageRefFlat\" class=\"common-image green test-image-flatten\" :style=\"{ flexShrink: data.flexShrink }\" flatten src=\"/static/test-image/logo.png\"></image>\n              <image class=\"common-image blue\" style=\"flex-shrink: 1;\" src=\"/static/test-image/logo.png\"></image>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"flexShrinkEnum\" title=\"flex-shrink 枚举值\" @change=\"radioChangeFlexShrink\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.flexShrink\" title=\"flex-shrink 自定义值\" type=\"text\" @confirm=\"inputChangeFlexShrink\"></input-data>\n      </view>\n\n      <!-- #ifndef MP-ALIPAY -->\n        <text class=\"uni-title-text uni-common-mt\">native-view 组件：flex-shrink: 1 、2、3</text>\n        <view class=\"demo-box uni-common-mb\">\n          <view class=\"flex-container-shrink\">\n            <test-native-view class=\"native-view-shrink red\" style=\"width: 100px; flex-shrink: 1;\"></test-native-view>\n            <test-native-view class=\"native-view-shrink green\" style=\"width: 100px; flex-shrink: 2;\"></test-native-view>\n            <test-native-view class=\"native-view-shrink blue\" style=\"width: 100px; flex-shrink: 3;\"></test-native-view>\n          </view>\n        </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const flexShrinkEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '1' },\n    { value: 3, name: '2' },\n    { value: 4, name: '3' }\n  ]\n\n  const data = reactive({\n    flexShrink: '1',\n    flexShrinkActual: '',\n    flexShrinkActualFlat: '',\n    flexShrinkActualText: '',\n    flexShrinkActualImage: '',\n    flexShrinkActualTextFlat: '',\n    flexShrinkActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    data.flexShrinkActual = viewRef.value?.style.getPropertyValue('flex-shrink') ?? ''\n    data.flexShrinkActualFlat = viewRefFlat.value?.style.getPropertyValue('flex-shrink') ?? ''\n    data.flexShrinkActualText = textRef.value?.style.getPropertyValue('flex-shrink') ?? ''\n    data.flexShrinkActualTextFlat = textRefFlat.value?.style.getPropertyValue('flex-shrink') ?? ''\n    data.flexShrinkActualImage = imageRef.value?.style.getPropertyValue('flex-shrink') ?? ''\n    data.flexShrinkActualImageFlat = imageRefFlat.value?.style.getPropertyValue('flex-shrink') ?? ''\n  }\n\n\n  const changeFlexShrink = (value: string) => {\n    data.flexShrink = value\n    viewRef.value?.style.setProperty('flex-shrink', value)\n    viewRefFlat.value?.style.setProperty('flex-shrink', value)\n    textRef.value?.style.setProperty('flex-shrink', value)\n    textRefFlat.value?.style.setProperty('flex-shrink', value)\n    imageRef.value?.style.setProperty('flex-shrink', value)\n    imageRefFlat.value?.style.setProperty('flex-shrink', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeFlexShrink = (index: number) => {\n    const selectedItem = flexShrinkEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeFlexShrink(selectedItem.name)\n    }\n  }\n\n  const inputChangeFlexShrink = (value: string) => {\n    changeFlexShrink(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeFlexShrink,\n    data\n  })\n</script>\n\n<style>\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .flex-container {\n    width: 200px;\n    margin: 0 10px;\n    height: 100px;\n    background-color: gray;\n    flex-direction: row;\n  }\n  .common {\n    width: 100px;\n    height: 50px;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .common-text {\n    width: 60px;\n    height: 30px;\n    background-color: green;\n    font-size: 12px;\n    color: white;\n  }\n\n  .common-image {\n    width: 60px;\n    height: 30px;\n    background-color: green;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 50px;\n    background-color: gray;\n  }\n\n\n  .test-flex-container {\n    width: 135px;\n    height: 100%;\n    flex-direction: row;\n  }\n\n  .red {\n    background-color: red;\n  }\n\n  .blue {\n    background-color: blue;\n  }\n\n  .green {\n    background-color: green;\n  }\n\n  .test-label {\n    font-size: 12px;\n    color: white;\n  }\n\n  .scroll-view-label {\n    font-size: 12px;\n    text-align: center;\n  }\n\n  .flex-container-shrink {\n    width: 200px;\n    height: 100px;\n    background-color: gray;\n    flex-direction: row;\n    margin: 10px;\n  }\n\n  .scroll-view-shrink {\n    height: 50px;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .native-view-shrink {\n    height: 50px;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- number\n"},"flex-wrap":{"name":"## flex-wrap\n","description":"\nflex-wrap 属性设置弹性容器中的子元素在主轴方向是单行（列）还是多行（列）显示，以及多行（列）显示时的堆叠方向。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nflex-wrap: nowrap | wrap | wrap-reverse;\n```\n","values":"\n### flex-wrap 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| nowrap | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | flex 的元素被摆放到到一行，这可能导致 flex 容器溢出。cross-start 会根据 flex-direction 的值等价于 start 或 before。为该属性的默认值。 |\n| wrap | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 换行，第一行在上方。 |\n| wrap-reverse | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。 |\n","defaultValue":"### 默认值 @default-value \n `nowrap`","unixTags":"### 适用组件 @unix-tags \n - [view](/component/view.md)\n- [scroll-view](/component/scroll-view.md)\n- [list-item](/component/list-item.md)\n- [flow-item](/component/flow-item.md)\n- [swiper-item](/component/swiper-item.md)\n- [navigator](/component/navigator.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-wrap)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.flex.flex-wrap)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/flex/flex-wrap.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/flex/flex-wrap.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/flex/flex-wrap\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/flex/flex-wrap\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>flex-wrap: nowrap</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"flex-wrap: nowrap\">\n            <view class=\"common-item red\"></view>\n            <view class=\"common-item green\"></view>\n            <view class=\"common-item blue\"></view>\n            <view class=\"common-item red\"></view>\n            <view class=\"common-item green\"></view>\n            <view class=\"common-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"flex-wrap: nowrap\" flatten>\n            <view class=\"common-item red\" flatten></view>\n            <view class=\"common-item green\" flatten></view>\n            <view class=\"common-item blue\" flatten></view>\n            <view class=\"common-item red\" flatten></view>\n            <view class=\"common-item green\" flatten></view>\n            <view class=\"common-item blue\" flatten></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>flex-wrap: wrap</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"flex-wrap: wrap\">\n            <view class=\"common-item red\"></view>\n            <view class=\"common-item green\"></view>\n            <view class=\"common-item blue\"></view>\n            <view class=\"common-item red\"></view>\n            <view class=\"common-item green\"></view>\n            <view class=\"common-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"flex-wrap: wrap\" flatten>\n            <view class=\"common-item red\"></view>\n            <view class=\"common-item green\"></view>\n            <view class=\"common-item blue\"></view>\n            <view class=\"common-item red\"></view>\n            <view class=\"common-item green\"></view>\n            <view class=\"common-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>flex-wrap: wrap-reverse</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"flex-wrap: wrap-reverse\">\n            <view class=\"common-item red\"></view>\n            <view class=\"common-item green\"></view>\n            <view class=\"common-item blue\"></view>\n            <view class=\"common-item red\"></view>\n            <view class=\"common-item green\"></view>\n            <view class=\"common-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"flex-wrap: wrap-reverse\" flatten>\n            <view class=\"common-item red\"></view>\n            <view class=\"common-item green\"></view>\n            <view class=\"common-item blue\"></view>\n            <view class=\"common-item red\"></view>\n            <view class=\"common-item green\"></view>\n            <view class=\"common-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n      </view>\n      <text class=\"uni-subtitle-text\">flex-wrap: wrap 和 nowrap</text>\n      <view class=\"demo-box\">\n        <scroll-view class=\"common\" style=\"flex-wrap: wrap;\" direction=\"horizontal\">\n          <view class=\"common-item red\"></view>\n          <view class=\"common-item green\"></view>\n          <view class=\"common-item blue\"></view>\n          <view class=\"common-item red\"></view>\n          <view class=\"common-item green\"></view>\n          <view class=\"common-item blue\"></view>\n        </scroll-view>\n        <scroll-view class=\"common\" style=\"flex-wrap: nowrap;\" direction=\"horizontal\">\n          <view class=\"common-item red\"></view>\n          <view class=\"common-item green\"></view>\n          <view class=\"common-item blue\"></view>\n          <view class=\"common-item red\"></view>\n          <view class=\"common-item green\"></view>\n          <view class=\"common-item blue\"></view>\n        </scroll-view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"common-box\">\n        <!-- 普通版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">flex-wrap</text>\n          <text class=\"uni-info\">设置值: {{data.flexWrap}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexWrapActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"test-flex-container test-view\" :style=\"{ flexWrap: data.flexWrap }\">\n              <view class=\"common-item red\"></view>\n              <view class=\"common-item green\"></view>\n              <view class=\"common-item blue\"></view>\n              <view class=\"common-item red\"></view>\n              <view class=\"common-item green\"></view>\n              <view class=\"common-item blue\"></view>\n            </view>\n          </view>\n        </view>\n\n        <!-- 拍平版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">拍平</text>\n          <text class=\"uni-info\">设置值: {{data.flexWrap}}</text>\n          <text class=\"uni-info\">获取值: {{data.flexWrapActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"test-flex-container test-view-flatten\" :style=\"{ flexWrap: data.flexWrap }\" flatten>\n              <view class=\"common-item red\"></view>\n              <view class=\"common-item green\"></view>\n              <view class=\"common-item blue\"></view>\n              <view class=\"common-item red\"></view>\n              <view class=\"common-item green\"></view>\n              <view class=\"common-item blue\"></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"flexWrapEnum\" title=\"flex-wrap 枚举值\" @change=\"radioChangeFlexWrap\"\n          :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.flexWrap\" title=\"flex-wrap 自定义值\" type=\"text\"\n          @confirm=\"inputChangeFlexWrap\"></input-data>\n      </view>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const flexWrapEnum : ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'nowrap' },\n    { value: 2, name: 'wrap' },\n    { value: 3, name: 'wrap-reverse' }\n  ]\n\n  const data = reactive({\n    flexWrap: 'nowrap',\n    flexWrapActual: '',\n    flexWrapActualFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n\n  const getPropertyValues = () => {\n    data.flexWrapActual = viewRef.value?.style.getPropertyValue('flex-wrap') ?? ''\n    data.flexWrapActualFlat = viewRefFlat.value?.style.getPropertyValue('flex-wrap') ?? ''\n  }\n\n\n  const changeFlexWrap = (value : string) => {\n    data.flexWrap = value\n    viewRef.value?.style.setProperty('flex-wrap', value)\n    viewRefFlat.value?.style.setProperty('flex-wrap', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeFlexWrap = (index : number) => {\n    const selectedItem = flexWrapEnum.find((item) : boolean => item.value === index)\n    if (selectedItem != null) {\n      changeFlexWrap(selectedItem.name)\n    }\n  }\n\n  const inputChangeFlexWrap = (value : string) => {\n    changeFlexWrap(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeFlexWrap,\n    data\n  })\n</script>\n\n<style>\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .common {\n    flex: 1;\n    margin: 0 10px;\n    height: 150px;\n    background-color: gray;\n    flex-direction: row;\n  }\n\n  .common-box {\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 140px;\n    background-color: gray;\n  }\n\n\n  .test-flex-container {\n    width: 100%;\n    height: 100%;\n    background-color: gray;\n    flex-direction: row;\n  }\n\n  .common-item {\n    width: 40px;\n    height: 40px;\n    flex-shrink: 0;\n  }\n\n  .red {\n    background-color: red;\n  }\n\n  .green {\n    background-color: green;\n  }\n\n  .blue {\n    background-color: blue;\n  }\n\n  .scroll-view-label {\n    font-size: 12px;\n    text-align: center;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"font-family":{"name":"## font-family\n","description":"\nfont-family 属性用于设置元素使用的字体，允许通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为元素设置字体。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nfont-family: <family-name>;\n```\n","values":"\n### font-family 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| cursive | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。<br/>        例如：Brush Script MT、Brush Script Std、Lucida Calligraphy、Lucida Handwriting、Apple Chancery、cursive。 |\n| fantasy | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | Fantasy 字体主要是那些具有特殊艺术效果的字体。<br/>        例如：Papyrus、Herculanum、Party LET、Curlz MT、Harrington、fantasy。 |\n| monospace | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 等宽字体，即字体中每个字宽度相同。<br/>        例如：Fira Mono、DejaVu Sans Mono、Menlo、Consolas、Liberation Mono、Monaco、Lucida Console、monospace。 |\n| sans-serif | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 无衬线字体，即笔画结尾是平滑的字体。<br/>        例如：Open Sans、Fira Sans、Lucida Sans、Lucida Sans Unicode、Trebuchet MS、Liberation Sans、Nimbus Sans L、sans-serif。 |\n| serif | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 带衬线字体，笔画结尾有特殊的装饰线或衬线。<br/>        例如：Lucida Bright、Lucida Fax、Palatino、Palatino Linotype、Palladio、URW Palladio、serif。 |\n| uni-icon | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.33\",\"4.33\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | uni-app x 内置字体图标 uni-icon |\n","defaultValue":"","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)\n- [input](/component/input.md)\n- [textarea](/component/textarea.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-family)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.font-family)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/font-family.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/font-family.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/font-family\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/font-family\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view class=\"uni-padding-wrap\">\n      <text class=\"common\" style=\"font-family: monospace\">font-family: monospace</text>\n\n      <text class=\"common\" style=\"font-family: cursive\">font-family: cursive</text>\n\n      <text class=\"common\" style=\"font-family: AlimamaDaoLiTiTTF\">font-family: 阿里妈妈刀隶体-ttf（网络字体下载后生效）</text>\n\n      <text class=\"common\" style=\"font-family: AlimamaDaoLiTiOTF\">font-family: 阿里妈妈刀隶体-otf</text>\n\n      <text class=\"common\" style=\"font-family: AlimamaDaoLiTiOTF;font-weight: bold;font-style: italic;\">font-family: 阿里妈妈刀隶体-otf（粗斜体）</text>\n\n      <text style=\"font-family: UniFontFamily;\">style 加载非 static 目录字体文件：{{uniIcon}}</text>\n\n      <!--    <text class=\"common\" style=\"font-family: AlimamaDaoLiTiWOFF\">font-family: 阿里妈妈刀隶体-woff</text>\n      <text class=\"common\" style=\"font-family: AlimamaDaoLiTiWOFF2\">font-family: 阿里妈妈刀隶体-woff2</text> -->\n\n      <text class=\"uni-title-text title-color\">【拍平测试】</text>\n      <text class=\"common\" style=\"font-family: monospace\" flatten>font-family: monospace</text>\n      <text class=\"common\" style=\"font-family: cursive\" flatten>font-family: cursive</text>\n      <text class=\"common\" style=\"font-family: AlimamaDaoLiTiTTF\" flatten>font-family: 阿里妈妈刀隶体-ttf（网络字体下载后生效）</text>\n      <text class=\"common\" style=\"font-family: AlimamaDaoLiTiOTF\" flatten>font-family: 阿里妈妈刀隶体-otf</text>\n      <text class=\"common\" style=\"font-family: AlimamaDaoLiTiOTF;font-weight: bold;font-style: italic;\" flatten>font-family: 阿里妈妈刀隶体-otf（粗斜体）</text>\n      <text style=\"font-family: UniFontFamily;\" flatten>style 加载非 static 目录字体文件：{{uniIcon}}</text>\n\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text title-color\">setProperty 设置与 getPropertyValue 获取</text>\n\n        <!-- 普通版本 -->\n        <text class=\"uni-info\">设置值: {{data.fontFamily}}</text>\n        <text class=\"uni-info\">获取值: {{data.fontFamilyActual}}</text>\n        <text ref=\"textRef\" class=\"common\" :style=\"{ fontFamily: data.fontFamily }\">当前 font-family: {{data.fontFamily}}</text>\n\n        <!-- 拍平版本 -->\n        <text class=\"uni-info\">设置值: {{data.fontFamily}}</text>\n        <text class=\"uni-info\">获取值: {{data.fontFamilyActualFlat}}</text>\n        <text ref=\"textRefFlat\" class=\"common\" :style=\"{ fontFamily: data.fontFamily }\" flatten>当前 font-family: {{data.fontFamily}}</text>\n\n        <view class=\"uni-common-mt uni-common-mb\">\n          <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n          <enum-data :items=\"fontFamilyEnum\" title=\"font-family 枚举值\" @change=\"radioChangeFontFamily\" :compact=\"true\"></enum-data>\n          <input-data :defaultValue=\"data.fontFamily\" title=\"font-family 自定义值\" type=\"text\" @confirm=\"inputChangeFontFamily\"></input-data>\n        </view>\n      </view>\n    </view>\n    <!-- #ifdef APP -->\n    <view style=\"margin: 24px 12px;\">\n      <button type=\"default\" @click=\"openUniIcon\">内置字体图标uni-icon示例</button>\n    </view>\n    <!-- #endif -->\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const uniIcon = ref('\\ue100')\n  const openUniIcon = () => {\n    uni.navigateTo({\n      url: '/pages/CSS/text/font-family-icon'\n    })\n  }\n\n  const fontFamilyEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'monospace' },\n    { value: 2, name: 'cursive' },\n    { value: 3, name: 'AlimamaDaoLiTiTTF' },\n    { value: 4, name: 'AlimamaDaoLiTiOTF' },\n    { value: 5, name: 'UniFontFamily' }\n  ]\n\n  const data = reactive({\n    fontFamily: 'monospace',\n    fontFamilyActual: '',\n    fontFamilyActualFlat: ''\n  })\n  const textRef = ref(null as UniTextElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n\n  const getPropertyValues = () => {\n    data.fontFamilyActual = textRef.value?.style.getPropertyValue('font-family') ?? ''\n    data.fontFamilyActualFlat = textRefFlat.value?.style.getPropertyValue('font-family') ?? ''\n  }\n\n\n  const changeFontFamily = (value: string) => {\n    data.fontFamily = value\n    textRef.value?.style.setProperty('font-family', value)\n    textRefFlat.value?.style.setProperty('font-family', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeFontFamily = (index: number) => {\n    const selectedItem = fontFamilyEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeFontFamily(selectedItem.name)\n    }\n  }\n\n  const inputChangeFontFamily = (value: string) => {\n    changeFontFamily(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    data,\n    radioChangeFontFamily\n  })\n</script>\n\n<style>\n  .common {\n    font-size: 20px;\n    line-height: 40px;\n  }\n  .title-color{\n    color:#007aff;\n    margin-bottom: 10px;\n  }\n\n  @font-face {\n    font-family: AlimamaDaoLiTiTTF;\n    src: url('https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/font/AlimamaDaoLiTi.ttf');\n  }\n\n  @font-face {\n    font-family: AlimamaDaoLiTiOTF;\n    src: url('/static/font/AlimamaDaoLiTi.otf');\n  }\n\n  @font-face {\n    font-family: UniFontFamily;\n    src: url('./uni.ttf');\n  }\n\n  /*  @font-face {\n    font-family: AlimamaDaoLiTiWOFF;\n    src: url('/static/app-ios/AlimamaDaoLiTi.woff');\n  }\n  @font-face {\n    font-family: AlimamaDaoLiTiWOFF2;\n    src: url('/static/app-ios/AlimamaDaoLiTi.woff2');\n  } */\n\n  .common-box{\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 80px;\n    background-color: gray;\n    justify-content: center;\n    align-items: center;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- font\n"},"font-size":{"name":"## font-size\n","description":"\nfont-size 属性用于设置字体大小，更改字体大小还会更新字体大小相关的 `<length>` 单位，例如 line-height 属性的 em 单位值。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nfont-size: <absolute-size> | <relative-size> | <length-percentage>;\n```\n","values":"\n### font-size 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| large | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 基于用户默认字体大小（medium）的绝对大小关键字。 |\n| larger | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对大小关键字。字体大小将相对于父元素的字体大小变大或变小，大致按照上面用于区分绝对大小关键字的比率。 |\n| medium | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 基于用户默认字体大小（medium）的绝对大小关键字。 |\n| small | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 基于用户默认字体大小（medium）的绝对大小关键字。 |\n| smaller | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对大小关键字。字体大小将相对于父元素的字体大小变大或变小，大致按照上面用于区分绝对大小关键字的比率。 |\n| x-large | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 基于用户默认字体大小（medium）的绝对大小关键字。 |\n| x-small | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 基于用户默认字体大小（medium）的绝对大小关键字。 |\n| xx-large | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 基于用户默认字体大小（medium）的绝对大小关键字。 |\n| xx-small | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 基于用户默认字体大小（medium）的绝对大小关键字。 |\n| xxx-large | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 基于用户默认字体大小（medium）的绝对大小关键字。 |\n| math | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 使用特殊的数学缩放规则来确定 font-size 属性的计算值。 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | 16px |\n\n **注意**：W3C 默认值为：medium","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)\n- [input](/component/input.md)\n- [textarea](/component/textarea.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-size)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.font-size)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/font-size.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/font-size.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/font-size\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/font-size\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view class=\"demo-box\">\n        <view class=\"common\">\n          <text ref=\"text\" :style=\"{'font-size': data.fontSize}\">font-size: {{data.fontSize}}</text>\n          <text style=\"font-size: 30px;\">font-size: 30px</text>\n          <text style=\"font-size: 20rpx;\">font-size: 20rpx</text>\n        </view>\n        <view class=\"common\">\n          <text ref=\"text\" :style=\"{'font-size': data.fontSize}\" flatten>font-size: {{data.fontSize}}</text>\n          <text style=\"font-size: 30px;\" flatten>font-size: 30px</text>\n          <text style=\"font-size: 20rpx;\" flatten>font-size: 20rpx</text>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"common-box\">\n        <!-- 普通版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">font-size</text>\n          <text class=\"uni-info\">设置值: {{data.fontSizeProp}}</text>\n          <text class=\"uni-info\">获取值: {{data.fontSizeActual}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" :style=\"{ fontSize: data.fontSizeProp }\">当前 font-size: {{data.fontSizeProp}}</text>\n          </view>\n        </view>\n\n        <!-- 拍平版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">测试拍平</text>\n          <text class=\"uni-info\">设置值: {{data.fontSizeProp}}</text>\n          <text class=\"uni-info\">获取值: {{data.fontSizeActualFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" :style=\"{ fontSize: data.fontSizeProp }\" flatten>当前 font-size: {{data.fontSizeProp}}</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n          <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n          <enum-data :items=\"fontSizeEnum\" title=\"font-size 枚举值\" @change=\"radioChangeFontSize\" :compact=\"true\"></enum-data>\n          <input-data :defaultValue=\"data.fontSizeProp\" title=\"font-size 自定义值\" type=\"text\" @confirm=\"inputChangeFontSize\"></input-data>\n      </view>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    fontSize: '15px',\n    fontSizeProp: '15px',\n    fontSizeActual: '',\n    fontSizeActualFlat: ''\n  })\n  // 自动化测试\n  const setFontSize = () => {\n    data.fontSize = '30px'\n  }\n\n  const fontSizeEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '0px' },\n    { value: 3, name: '10px' },\n    { value: 4, name: '20px' },\n    { value: 5, name: '0rpx' },\n    { value: 6, name: '20rpx' },\n  ]\n\n  const textRef = ref(null as UniTextElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n\n  const getPropertyValues = () => {\n    data.fontSizeActual = textRef.value?.style.getPropertyValue('font-size') ?? ''\n    data.fontSizeActualFlat = textRefFlat.value?.style.getPropertyValue('font-size') ?? ''\n  }\n\n\n  const changeFontSize = (value: string) => {\n    data.fontSizeProp = value\n    textRef.value?.style.setProperty('font-size', value)\n    textRefFlat.value?.style.setProperty('font-size', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeFontSize = (index: number) => {\n    const selectedItem = fontSizeEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeFontSize(selectedItem.name)\n    }\n  }\n\n  const inputChangeFontSize = (value: string) => {\n    changeFontSize(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    setFontSize,\n    radioChangeFontSize,\n    data\n  })\n</script>\n\n<style>\n.common{\n  background-color: gray;\n  justify-content: center;\n  height: 100px;\n  flex:1;\n}\n.demo-box {\n  flex-direction: row;\n  margin-top: 10px;\n  justify-content: space-around;\n}\n.common-box{\n  flex-direction: row;\n  justify-content: space-around;\n}\n\n.test-box {\n  width: 180px;\n  height: 80px;\n  background-color: gray;\n  justify-content: center;\n  align-items: center;\n}\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n"},"font-style":{"name":"## font-style\n","description":"\nfont-style 属性用于设置字体样式。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nfont-style: normal | italic | oblique <angle>{0,2};\n```\n","values":"\n### font-style 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| italic | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代。 |\n| normal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 选择 font-family 的常规字体。 |\n","defaultValue":"### 默认值 @default-value \n `normal`","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)\n- [input](/component/input.md)\n- [textarea](/component/textarea.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-style)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.font-style)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/font-style.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/font-style.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/font-style\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/font-style\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view class=\"demo-box\">\n        <view class=\"common\">\n          <text class=\"common-size\" style=\"font-style: italic;\">font-style: italic</text>\n          <text class=\"common-size\" style=\"font-style: normal;\">font-style: normal</text>\n        </view>\n        <view class=\"common\">\n          <text class=\"common-size\" style=\"font-style: italic;\" flatten>font-style: italic</text>\n          <text class=\"common-size\" style=\"font-style: normal;\" flatten>font-style: normal</text>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"common-box\">\n        <!-- 普通版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">font-style</text>\n          <text class=\"uni-info\">设置值: {{data.fontStyle}}</text>\n          <text class=\"uni-info\">获取值: {{data.fontStyleActual}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-size test-text\" :style=\"{ fontStyle: data.fontStyle }\">当前 font-style: {{data.fontStyle}}</text>\n          </view>\n        </view>\n\n        <!-- 拍平版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">测试拍平</text>\n          <text class=\"uni-info\">设置值: {{data.fontStyle}}</text>\n          <text class=\"uni-info\">获取值: {{data.fontStyleActualFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-size test-text-flatten\" :style=\"{ fontStyle: data.fontStyle }\" flatten>当前 font-style: {{data.fontStyle}}</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n          <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n          <enum-data :items=\"fontStyleEnum\" title=\"font-style 枚举值\" @change=\"radioChangeFontStyle\" :compact=\"true\"></enum-data>\n          <input-data :defaultValue=\"data.fontStyle\" title=\"font-style 自定义值\" type=\"text\" @confirm=\"inputChangeFontStyle\"></input-data>\n      </view>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const fontStyleEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'normal' },\n    { value: 2, name: 'italic' }\n  ]\n\n  const data = reactive({\n    fontStyle: 'normal',\n    fontStyleActual: '',\n    fontStyleActualFlat: ''\n  })\n  const textRef = ref(null as UniTextElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n\n  const getPropertyValues = () => {\n    data.fontStyleActual = textRef.value?.style.getPropertyValue('font-style') ?? ''\n    data.fontStyleActualFlat = textRefFlat.value?.style.getPropertyValue('font-style') ?? ''\n  }\n\n\n  const changeFontStyle = (value: string) => {\n    data.fontStyle = value\n    textRef.value?.style.setProperty('font-style', value)\n    textRefFlat.value?.style.setProperty('font-style', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeFontStyle = (index: number) => {\n    const selectedItem = fontStyleEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeFontStyle(selectedItem.name)\n    }\n  }\n\n  const inputChangeFontStyle = (value: string) => {\n    changeFontStyle(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeFontStyle,\n    data\n  })\n</script>\n\n<style>\n  .common-size {\n    font-size: 20px;\n  }\n  .common{\n    height: 100px;\n    background-color: gray;\n    justify-content: center;\n    align-items: center;\n    flex:1;\n  }\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n  .common-box{\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 80px;\n    background-color: gray;\n    justify-content: center;\n    align-items: center;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"font-weight":{"name":"## font-weight\n","description":"\nfont-weight 属性用于设置字体的粗细程度。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nfont-weight: <font-weight-absolute>{1,2};\n```\n","values":"\n### font-weight 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| normal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 正常粗细。与 400 等值。 |\n| bold | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 加粗。与 700 等值。 |\n| 100 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"9.0\",\"5.08\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | Thin |\n| 200 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"9.0\",\"5.08\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | Extra Light (Ultra Light) |\n| 300 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"9.0\",\"5.08\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | Light |\n| 400 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 正常粗细，与 normal 等值。 |\n| 500 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"9.0\",\"5.08\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | Medium |\n| 600 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"9.0\",\"5.08\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | Semi Bold (Demi Bold) |\n| 700 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 加粗，与 bold 等值。 |\n| 800 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"9.0\",\"5.08\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | Extra Bold (Ultra Bold) |\n| 900 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"9.0\",\"5.08\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | Black (Heavy) |\n","defaultValue":"### 默认值 @default-value \n `normal`","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)\n- [input](/component/input.md)\n- [textarea](/component/textarea.md)\n- [loading](/component/loading.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-weight)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.font-weight)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/font-weight.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/font-weight.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/font-weight\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/font-weight\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view class=\"demo-box\">\n        <view class=\"common\">\n          <text class=\"common-size\" style=\"font-weight: normal;\">font-weight: normal</text>\n          <text class=\"common-size\" style=\"font-weight: bold;\">font-weight: bold</text>\n          <text class=\"common-size\" style=\"font-weight: 100;\">font-weight: 100</text>\n          <text class=\"common-size\" style=\"font-weight: 200;\">font-weight: 200</text>\n          <text class=\"common-size\" style=\"font-weight: 300;\">font-weight: 300</text>\n          <text class=\"common-size\" style=\"font-weight: 400;\">font-weight: 400</text>\n          <text class=\"common-size\" style=\"font-weight: 500;\">font-weight: 500</text>\n          <text class=\"common-size\" style=\"font-weight: 600;\">font-weight: 600</text>\n          <text class=\"common-size\" style=\"font-weight: 700;\">font-weight: 700</text>\n          <text class=\"common-size\" style=\"font-weight: 800;\">font-weight: 800</text>\n          <text class=\"common-size\" style=\"font-weight: 900;\">font-weight: 900</text>\n        </view>\n        <view class=\"common\">\n          <text class=\"common-size\" style=\"font-weight: normal;\" flatten>font-weight: normal</text>\n          <text class=\"common-size\" style=\"font-weight: bold;\" flatten>font-weight: bold</text>\n          <text class=\"common-size\" style=\"font-weight: 100;\" flatten>font-weight: 100</text>\n          <text class=\"common-size\" style=\"font-weight: 200;\" flatten>font-weight: 200</text>\n          <text class=\"common-size\" style=\"font-weight: 300;\" flatten>font-weight: 300</text>\n          <text class=\"common-size\" style=\"font-weight: 400;\" flatten>font-weight: 400</text>\n          <text class=\"common-size\" style=\"font-weight: 500;\" flatten>font-weight: 500</text>\n          <text class=\"common-size\" style=\"font-weight: 600;\" flatten>font-weight: 600</text>\n          <text class=\"common-size\" style=\"font-weight: 700;\" flatten>font-weight: 700</text>\n          <text class=\"common-size\" style=\"font-weight: 800;\" flatten>font-weight: 800</text>\n          <text class=\"common-size\" style=\"font-weight: 900;\" flatten>font-weight: 900</text>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"common-box\">\n        <!-- 普通版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">font-weight</text>\n          <text class=\"uni-info\">设置值: {{data.fontWeight}}</text>\n          <text class=\"uni-info\">获取值: {{data.fontWeightActual}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-size test-text\" :style=\"{ fontWeight: data.fontWeight }\">当前 font-weight: {{data.fontWeight}}</text>\n          </view>\n        </view>\n\n        <!-- 拍平版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">测试拍平</text>\n          <text class=\"uni-info\">设置值: {{data.fontWeight}}</text>\n          <text class=\"uni-info\">获取值: {{data.fontWeightActualFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-size test-text-flatten\" :style=\"{ fontWeight: data.fontWeight }\" flatten>当前 font-weight: {{data.fontWeight}}</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n          <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n          <enum-data :items=\"fontWeightEnum\" title=\"font-weight 枚举值\" @change=\"radioChangeFontWeight\" :compact=\"true\"></enum-data>\n          <input-data :defaultValue=\"data.fontWeight\" title=\"font-weight 自定义值\" type=\"text\" @confirm=\"inputChangeFontWeight\"></input-data>\n      </view>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n\timport { ItemType } from '@/components/enum-data/enum-data-types'\n\n\tconst fontWeightEnum: ItemType[] = [\n\t\t{ value: 0, name: '' },\n\t\t{ value: 1, name: 'normal' },\n\t\t{ value: 2, name: 'bold' },\n\t\t{ value: 3, name: '100' },\n\t\t{ value: 4, name: '200' },\n\t\t{ value: 5, name: '300' },\n\t\t{ value: 6, name: '400' },\n\t\t{ value: 7, name: '500' },\n\t\t{ value: 8, name: '600' },\n\t\t{ value: 9, name: '700' },\n\t\t{ value: 10, name: '800' },\n\t\t{ value: 11, name: '900' },\n\t]\n\n\tconst data = reactive({\n\t\tfontWeight: 'normal',\n\t\tfontWeightActual: '',\n\t\tfontWeightActualFlat: ''\n\t})\n\tconst textRef = ref(null as UniTextElement | null)\n\tconst textRefFlat = ref(null as UniTextElement | null)\n\n\tconst getPropertyValues = () => {\n\t\tdata.fontWeightActual = textRef.value?.style.getPropertyValue('font-weight') ?? ''\n\t\tdata.fontWeightActualFlat = textRefFlat.value?.style.getPropertyValue('font-weight') ?? ''\n\t}\n\n\n\tconst changeFontWeight = (value: string) => {\n\t\tdata.fontWeight = value\n\t\ttextRef.value?.style.setProperty('font-weight', value)\n\t\ttextRefFlat.value?.style.setProperty('font-weight', value)\n\t\t// 使用 nextTick 确保样式已应用后再获取值\n\t\tnextTick(() => {\n\t\t\tgetPropertyValues()\n\t\t})\n\t}\n\n\tconst radioChangeFontWeight = (index: number) => {\n\t\tconst selectedItem = fontWeightEnum.find((item): boolean => item.value === index)\n\t\tif (selectedItem != null) {\n\t\t\tchangeFontWeight(selectedItem.name)\n\t\t}\n\t}\n\n\tconst inputChangeFontWeight = (value: string) => {\n\t\tchangeFontWeight(value)\n\t}\n\n\tonReady(() => {\n\t\tgetPropertyValues()\n\t})\n\n\tdefineExpose({\n\t\tradioChangeFontWeight,\n\t\tdata\n\t})\n</script>\n\n<style>\n\t.common-size {\n\t  font-size: 20px;\n\t}\n\t.common{\n\t  background-color: gray;\n\t  justify-content: center;\n\t  align-items: center;\n    flex:1;\n\t}\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\t.common-box{\n\t\tflex-direction: row;\n\t\tjustify-content: space-around;\n\t}\n\n\t.test-box {\n\t\twidth: 180px;\n\t\theight: 80px;\n\t\tbackground-color: gray;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n- number\n"},"height":{"name":"## height\n","description":"\nheight CSS 属性指定了一个元素的高度。默认情况下，这个属性决定的是内容区（ content area）的高度，但是，如果将 box-sizing 设置为 border-box , 这个属性决定的将是边框区域（border area）的高度。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nheight: <viewport-length>{1,2};\n```\n","values":"\n### height 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 由浏览器为元素计算并选择一个高度。 |\n| fit-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 将 fill-content 公式中的可用位置替换为特定的参数以进行使用，如：min(max-content, max(min-content, )) |\n| max-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置为允许的最大高度。 |\n| min-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置为允许的最小高度。 |\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/height)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.height)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/height.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/height.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/height\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/height\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\n    <view class=\"css-page uni-theme-root\" style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text class=\"theme-label\">height: 100px</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"height: 100px;\"></view>\n          <view class=\"common\" style=\"height: 100px;\" flatten></view>\n        </view>\n      </view>\n\n      <view >\n        <text class=\"theme-label\">height: 50%</text>\n        <view class=\"demo-box\" style=\"height: 100px;\">\n          <view class=\"common\" style=\"height: 50%;\"></view>\n          <view class=\"common\" style=\"height: 50%;\" flatten></view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n      </view>\n\n      <view class=\"demo-box\">\n        <scroll-view style=\"width: 100px; height: 80px; background-color: cyan;\">\n          <text class=\"scroll-view-label\">height: 80px</text>\n        </scroll-view>\n        <scroll-view style=\"width: 100px; height: 120px; background-color: cyan;\">\n          <text class=\"scroll-view-label\">height: 120px</text>\n        </scroll-view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.height}}</text>\n          <text class=\"uni-info\">获取值: {{data.heightActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ height: data.height }\">\n              <text class=\"cyan-label\">view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.height}}</text>\n          <text class=\"uni-info\">获取值: {{data.heightActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-dynamic test-text\" :style=\"{ height: data.height }\">text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.height}}</text>\n          <text class=\"uni-info\">获取值: {{data.heightActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-dynamic test-image\" :style=\"{ height: data.height }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.height}}</text>\n          <text class=\"uni-info\">获取值: {{data.heightActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ height: data.height }\" flatten>\n              <text class=\"cyan-label\">view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.height}}</text>\n          <text class=\"uni-info\">获取值: {{data.heightActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-dynamic test-text-flatten\" :style=\"{ height: data.height }\" flatten>text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.height}}</text>\n          <text class=\"uni-info\">获取值: {{data.heightActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-dynamic test-image-flatten\" :style=\"{ height: data.height }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"heightEnum\" title=\"height 枚举值\" @change=\"radioChangeHeight\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.height\" title=\"height 自定义值\" type=\"text\" @confirm=\"inputChangeHeight\"></input-data>\n      </view>\n\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text class=\"theme-label\">native-view组件: height: 80px 和 height: 120px</text>\n        <view class=\"demo-box-native\">\n          <view class=\"container-native\">\n            <native-view style=\"width: 100px;height: 80px;\"></native-view>\n          </view>\n          <view class=\"container-native\">\n            <native-view style=\"width: 100px;height: 120px;\"></native-view>\n          </view>\n        </view>\n      </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const heightEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '0px' },\n    { value: 3, name: '50px' },\n    { value: 4, name: '150px' },\n    { value: 5, name: '0%' },\n    { value: 6, name: '50%' },\n    { value: 7, name: 'auto' }\n  ]\n\n  const data = reactive({\n    height: '100px',\n    heightActual: '',\n    heightActualText: '',\n    heightActualImage: '',\n    heightActualFlat: '',\n    heightActualTextFlat: '',\n    heightActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const getPropertyValues = () => {\n    data.heightActual = viewRef.value?.style.getPropertyValue('height') ?? ''\n    data.heightActualFlat = viewRefFlat.value?.style.getPropertyValue('height') ?? ''\n    data.heightActualText = textRef.value?.style.getPropertyValue('height') ?? ''\n    data.heightActualTextFlat = textRefFlat.value?.style.getPropertyValue('height') ?? ''\n    data.heightActualImage = imageRef.value?.style.getPropertyValue('height') ?? ''\n    data.heightActualImageFlat = imageRefFlat.value?.style.getPropertyValue('height') ?? ''\n  }\n\n\n  const changeHeight = (value: string) => {\n    data.height = value\n    viewRef.value?.style.setProperty('height', value)\n    viewRefFlat.value?.style.setProperty('height', value)\n    textRef.value?.style.setProperty('height', value)\n    textRefFlat.value?.style.setProperty('height', value)\n    imageRef.value?.style.setProperty('height', value)\n    imageRefFlat.value?.style.setProperty('height', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeHeight = (index: number) => {\n    const selectedItem = heightEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeHeight(selectedItem.name)\n    }\n  }\n\n  const inputChangeHeight = (value: string) => {\n    changeHeight(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeHeight,\n    data\n  })\n</script>\n\n<style>\n  .theme-label {\n    color: var(--text-color, #333333);\n  }\n\n  .cyan-label,\n  .scroll-view-label {\n    color: #1a1a1a;\n  }\n\n  .common {\n    flex: 1;\n    margin:0 10px;\n    background-color: cyan;\n  }\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .common-dynamic {\n    width: 100px;\n    background-color: cyan;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 150px;\n    background-color: gray;\n  }\n\n  .scroll-view-label {\n    font-size: 12px;\n    text-align: center;\n  }\n\n  .demo-box-native {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n    align-items: center;\n  }\n\n  .container-native {\n    background-color: cyan;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"justify-content":{"name":"## justify-content\n","description":"\njustify-content 属性设置弹性容器的子元素在主轴方向的对齐方式，控制如何在主轴方向分配内容元素之间和周围的空间。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\njustify-content: normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ];\n```\n","values":"\n### justify-content 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| center | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素紧密地排列在主轴方向居中对齐。第一个元素到主轴首的距离将与最后一个元素到主轴尾的距离相同 |\n| flex-start | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素紧密地排列在容器主轴起始侧 |\n| flex-end | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素紧密地排列在容器主轴结束侧 |\n| space-between | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在主轴上均匀分配元素，相邻元素间距离相同。第一个元素与主轴首对齐，最后一个元素与主轴尾对齐 |\n| space-around | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素沿着主轴均匀分布在容器中，相邻元素间距离相同。主轴起始位置到第一个元素的间距，主轴结束位置到最后一个元素的间距，是相邻元素之间距离的一半 |\n| space-evenly | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.61\",\"4.61\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素都沿着主轴均匀分布在指定的对齐容器中。相邻元素之间的间距，主轴起始位置到第一个元素的间距，主轴结束位置到最后一个元素的间距，都完全一样 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | flex-start |\n\n **注意**：W3C 默认值为：normal","unixTags":"### 适用组件 @unix-tags \n - [view](/component/view.md)\n- [scroll-view](/component/scroll-view.md)\n- [list-view](/component/list-view.md)\n- [list-item](/component/list-item.md)\n- [flow-item](/component/flow-item.md)\n- [swiper-item](/component/swiper-item.md)\n- [navigator](/component/navigator.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/justify-content)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.flex.justify-content)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/flex/justify-content.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/flex/justify-content.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/flex/justify-content\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/flex/justify-content\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>justify-content: center</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"justify-content: center\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"justify-content: center\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>justify-content: flex-start</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"justify-content: flex-start\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"justify-content: flex-start\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>justify-content: flex-end</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"justify-content: flex-end\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"justify-content: flex-end\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>justify-content: space-between</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"justify-content: space-between\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"justify-content: space-between\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>justify-content: space-around</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"justify-content: space-around\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"justify-content: space-around\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>justify-content: space-evenly </text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"justify-content: space-evenly\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n          <view class=\"common\" style=\"justify-content: space-evenly\" flatten>\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n      </view>\n\n      <view>\n        <text class=\"uni-subtitle-text\">justify-content：center 和 space-between</text>\n        <view class=\"demo-box\">\n          <scroll-view class=\"common\" style=\"justify-content: center;\" direction=\"horizontal\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </scroll-view>\n          <scroll-view class=\"common\" style=\"justify-content: space-between;\" direction=\"horizontal\">\n            <view class=\"flex-item red\"></view>\n            <view class=\"flex-item green\"></view>\n            <view class=\"flex-item blue\"></view>\n          </scroll-view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"common-box\">\n        <!-- 普通版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">justify-content</text>\n          <text class=\"uni-info\">设置值: {{data.justifyContent}}</text>\n          <text class=\"uni-info\">获取值: {{data.justifyContentActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"test-flex-container test-view\" :style=\"{ justifyContent: data.justifyContent }\">\n              <view class=\"test-item-small red\"></view>\n              <view class=\"test-item-small green\"></view>\n              <view class=\"test-item-small blue\"></view>\n            </view>\n          </view>\n        </view>\n\n        <!-- 拍平版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">拍平</text>\n          <text class=\"uni-info\">设置值: {{data.justifyContent}}</text>\n          <text class=\"uni-info\">获取值: {{data.justifyContentActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"test-flex-container test-view-flatten\" :style=\"{ justifyContent: data.justifyContent }\" flatten>\n              <view class=\"test-item-small red\"></view>\n              <view class=\"test-item-small green\"></view>\n              <view class=\"test-item-small blue\"></view>\n            </view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n          <enum-data :items=\"justifyContentEnum\" title=\"justify-content 枚举值\" @change=\"radioChangeJustifyContent\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.justifyContent\" title=\"justify-content 自定义值\" type=\"text\" @confirm=\"inputChangeJustifyContent\"></input-data>\n      </view>\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const justifyContentEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'flex-start' },\n    { value: 2, name: 'flex-end' },\n    { value: 3, name: 'center' },\n    { value: 4, name: 'space-between' },\n    { value: 5, name: 'space-around' },\n    { value: 6, name: 'space-evenly' }\n  ]\n\n  const data = reactive({\n    justifyContent: 'center',\n    justifyContentActual: '',\n    justifyContentActualFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n\n  const getPropertyValues = () => {\n    data.justifyContentActual = viewRef.value?.style.getPropertyValue('justify-content') ?? ''\n    data.justifyContentActualFlat = viewRefFlat.value?.style.getPropertyValue('justify-content') ?? ''\n  }\n\n\n  const changeJustifyContent = (value: string) => {\n    data.justifyContent = value\n    viewRef.value?.style.setProperty('justify-content', value)\n    viewRefFlat.value?.style.setProperty('justify-content', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeJustifyContent = (index: number) => {\n    const selectedItem = justifyContentEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeJustifyContent(selectedItem.name)\n    }\n  }\n\n  const inputChangeJustifyContent = (value: string) => {\n    changeJustifyContent(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeJustifyContent,\n    data\n  })\n</script>\n\n<style>\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .flex-item {\n    width: 40px;\n    height: 40px;\n  }\n\n  .red {\n    background-color: red;\n  }\n\n  .green {\n    background-color: green;\n  }\n\n  .blue {\n    background-color: blue;\n  }\n\n  .common {\n    flex: 1;\n    margin: 0 10px;\n    height: 80px;\n    background-color: gray;\n    flex-direction: row;\n  }\n\n  .common-box{\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 100px;\n    background-color: gray;\n  }\n\n  .test-flex-container {\n    width: 100%;\n    height: 100%;\n    background-color: gray;\n    flex-direction: row;\n  }\n\n  .test-item-small {\n    width: 30px;\n    height: 30px;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"left":{"name":"## left\n","description":"\nCSS **left**属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移，非定位元素设置此属性无效。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nleft: <length> | <percentage> | auto;\n```\n","values":"\n### left 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 这个关键字表示：<br/>    <br/>      对于绝对定位元素，元素将忽略此属性而以right属性为准，如果此时设置width: auto，将基于内容需要的宽度设置宽度；如果right也为auto的话，元素的水平位置就是它假如作为静态 (即 static) 元素时该在的位置。<br/>      对于相对定位元素，元素相对正常位置的偏移量将基于right属性；如果right也为auto的话，元素将不会有偏移。 |\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/left)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.position.left)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/left.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/left.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/left\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/left\n\n>示例\n```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\r\n    <view class=\"css-page uni-theme-root\" style=\"flex-grow: 1;\">\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">left: 20px (距离左边 20px) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"left: 20px;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"left: 20px;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">left: 20rpx (距离左边 20rpx) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"left: 20rpx;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"left: 20rpx;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">left: 20% (距离左边 20%) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"left: 20%;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"left: 20%;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">left: auto (自动，默认左边对齐) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"left: auto;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"left: auto;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\r\n\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-subtitle-text\">left: 10% 和 left: 30px</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <scroll-view class=\"common\" style=\"left: 10%;\"></scroll-view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <scroll-view class=\"common\" style=\"left: 30px;\"></scroll-view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt\">\r\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\r\n\r\n      <!-- 普通版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.left}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.leftActual}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRef\" class=\"common test-view\" :style=\"{ left: data.left }\">\r\n              <text class=\"common-text\">view</text>\r\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.left}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.leftActualText}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRef\" class=\"common common-text test-text\" :style=\"{ left: data.left }\">text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.left}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.leftActualImage}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRef\" class=\"common test-image\" :style=\"{ left: data.left }\" src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <!-- 拍平版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.left}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.leftActualFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRefFlat\" class=\"common test-view-flatten\" :style=\"{ left: data.left }\" flatten>\r\n              <text class=\"common-text\">view</text>\r\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.left}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.leftActualTextFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRefFlat\" class=\"common common-text test-text-flatten\" :style=\"{ left: data.left }\" flatten>text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.left}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.leftActualImageFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRefFlat\" class=\"common test-image-flatten\" :style=\"{ left: data.left }\" flatten src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt uni-common-mb\">\r\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\r\n        <enum-data :items=\"leftEnum\" title=\"left 枚举值\" @change=\"radioChangeLeft\" :compact=\"true\"></enum-data>\r\n        <input-data :defaultValue=\"data.left\" title=\"left 自定义值\" type=\"text\" @confirm=\"inputChangeLeft\"></input-data>\r\n      </view>\r\n\r\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text class=\"theme-label\">native-view组件: left: 10% 和 left: 30px</text>\n        <view class=\"test-container\">\n          <view class=\"example-box\">\n            <test-native-view class=\"common-native\" style=\"left: 10%;\"></test-native-view>\n          </view>\n          <view class=\"example-box\">\r\n            <test-native-view class=\"common-native\" style=\"left: 30px;\"></test-native-view>\r\n          </view>\r\n        </view>\n      </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n  const leftEnum : ItemType[] = [\r\n    { value: 0, name: '' },\r\n    { value: 1, name: '0' },\r\n    { value: 2, name: '0px' },\r\n    { value: 3, name: '10px' },\r\n    { value: 4, name: '20rpx' },\r\n    { value: 5, name: '0%' },\r\n    { value: 6, name: '20%' },\r\n    { value: 7, name: 'auto' }\r\n  ]\r\n\r\n  const data = reactive({\r\n    left: '10px',\r\n    leftActual: '',\r\n    leftActualText: '',\r\n    leftActualImage: '',\r\n    leftActualFlat: '',\r\n    leftActualTextFlat: '',\r\n    leftActualImageFlat: ''\r\n  })\r\n  const viewRef = ref(null as UniElement | null)\r\n  const textRef = ref(null as UniTextElement | null)\r\n  const imageRef = ref(null as UniImageElement | null)\r\n  const viewRefFlat = ref(null as UniElement | null)\r\n  const textRefFlat = ref(null as UniTextElement | null)\r\n  const imageRefFlat = ref(null as UniImageElement | null)\r\n\r\n  const getPropertyValues = () => {\r\n    data.leftActual = viewRef.value?.style.getPropertyValue('left') ?? ''\r\n    data.leftActualFlat = viewRefFlat.value?.style.getPropertyValue('left') ?? ''\r\n    data.leftActualText = textRef.value?.style.getPropertyValue('left') ?? ''\r\n    data.leftActualTextFlat = textRefFlat.value?.style.getPropertyValue('left') ?? ''\r\n    data.leftActualImage = imageRef.value?.style.getPropertyValue('left') ?? ''\r\n    data.leftActualImageFlat = imageRefFlat.value?.style.getPropertyValue('left') ?? ''\r\n  }\r\n\r\n\r\n  const changeLeft = (value : string) => {\r\n    data.left = value\r\n    viewRef.value?.style.setProperty('left', value)\r\n    viewRefFlat.value?.style.setProperty('left', value)\r\n    textRef.value?.style.setProperty('left', value)\r\n    textRefFlat.value?.style.setProperty('left', value)\r\n    imageRef.value?.style.setProperty('left', value)\r\n    imageRefFlat.value?.style.setProperty('left', value)\r\n    // 使用 nextTick 确保样式已应用后再获取值\r\n    nextTick(() => {\r\n      getPropertyValues()\r\n    })\r\n  }\r\n\r\n  const radioChangeLeft = (index : number) => {\r\n    const selectedItem = leftEnum.find((item) : boolean => item.value === index)\r\n    if (selectedItem != null) {\r\n      changeLeft(selectedItem.name)\r\n    }\r\n  }\r\n\r\n  const inputChangeLeft = (value : string) => {\r\n    changeLeft(value)\r\n  }\r\n\r\n  onReady(() => {\r\n    getPropertyValues()\r\n  })\r\n\r\n  defineExpose({\r\n    radioChangeLeft,\r\n    data\r\n  })\r\n</script>\r\n\r\n<style>\n  .theme-label {\n    color: var(--text-color, #333333);\n  }\n\n  .example-box {\r\n    position: relative;\r\n    flex: 1;\r\n    height: 60px;\r\n    background-color: #f5f5f5;\r\n    border: 1px solid #ddd;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .common {\r\n    position: absolute;\r\n    width: 60px;\r\n    height: 60px;\r\n    background-color: cyan;\r\n  }\r\n\r\n  .common-text {\n    width: 50px;\n    font-size: 12px;\n    color: #1a1a1a;\n  }\r\n\r\n  .test-container {\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .test-item {\r\n    flex: 1;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .test-box {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 60px;\r\n    background-color: #e0e0e0;\r\n  }\n\n  .common-native {\r\n    position: absolute;\r\n    width: 60px;\r\n    height: 60px;\r\n    background-color: #00FFFF;\r\n  }\r\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"letter-spacing":{"name":"## letter-spacing\n","description":"\nletter-spacing 属性用于设置文本字符的间距表现，正值会导致字符分布得更远，而负值会使字符更接近。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nletter-spacing: normal | <length>;\n```\n","values":"\n### letter-spacing 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| normal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 此间距是按照当前字体的正常间距确定的。和 0 不同的是，normal 会让用户代理调整文字之间空间来对齐文字。 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | 0 |\n\n **注意**：W3C 默认值为：normal","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/letter-spacing)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.letter-spacing)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/letter-spacing.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/letter-spacing.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/letter-spacing\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/letter-spacing\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <template v-if=\"autoTestData.begin\">\n      <view>\n        <text id=\"testText\"\n          :style=\"`letter-spacing:${letterSpacing_mix}px;`\">\n          uni-app 是一个使用 Vue.js\n          开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。</text>\n        <view style=\"flex-direction: row;\">\n          <button @click=\"plusLetterSpacing\">+字宽</button>\n          <button @click=\"minusLetterSpacing\">-字宽</button>\n        </view>\n      </view>\n    </template>\n    <view style=\"flex-grow: 1;\">\n      <view class=\"box\">\n        <text class=\"common\">letter-spacing</text>\n        <text class=\"common\" style=\"letter-spacing: 5px;\">letter-spacing: 5px</text>\n        <text class=\"common\" style=\"letter-spacing: -2px;\">letter-spacing: -2px</text>\n        <text class=\"common\" style=\"letter-spacing: 4rpx;\">letter-spacing: 4rpx</text>\n      </view>\n      <text class=\"uni-title-text\">拍平</text>\n      <view class=\"box\">\n        <text class=\"common\">letter-spacing</text>\n        <text class=\"common\" style=\"letter-spacing: 5px;\" flatten>letter-spacing: 5px</text>\n        <text class=\"common\" style=\"letter-spacing: -2px;\" flatten>letter-spacing: -2px</text>\n        <text class=\"common\" style=\"letter-spacing: 4rpx;\" flatten>letter-spacing: 4rpx</text>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"common-box\">\n        <!-- 普通版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">letter-spacing</text>\n          <text class=\"uni-info\">设置值: {{data.letterSpacing}}</text>\n          <text class=\"uni-info\">获取值: {{data.letterSpacingActual}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-text\" :style=\"{ letterSpacing: data.letterSpacing }\">当前 letter-spacing: {{data.letterSpacing}}</text>\n          </view>\n        </view>\n\n        <!-- 拍平版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">拍平</text>\n          <text class=\"uni-info\">设置值: {{data.letterSpacing}}</text>\n          <text class=\"uni-info\">获取值: {{data.letterSpacingActualFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-text\" :style=\"{ letterSpacing: data.letterSpacing }\" flatten>当前 letter-spacing: {{data.letterSpacing}}</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n          <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n          <enum-data :items=\"letterSpacingEnum\" title=\"letter-spacing 枚举值\" @change=\"radioChangeLetterSpacing\" :compact=\"true\"></enum-data>\n          <input-data :defaultValue=\"data.letterSpacing\" title=\"letter-spacing 自定义值\" type=\"text\" @confirm=\"inputChangeLetterSpacing\"></input-data>\n      </view>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n\timport { ItemType } from '@/components/enum-data/enum-data-types'\n\n\tconst letterSpacingEnum: ItemType[] = [\n\t\t{ value: 0, name: '' },\n\t\t{ value: 1, name: '0' },\n\t\t{ value: 2, name: '0px' },\n\t\t{ value: 3, name: '-2px' },\n\t\t{ value: 4, name: '2px' },\n\t\t{ value: 5, name: '5px' },\n\t\t{ value: 6, name: '10px' },\n\t\t{ value: 7, name: '2rpx' },\n\t\t{ value: 8, name: '10rpx' }\n\t]\n\n\tconst data = reactive({\n\t\tletterSpacing: '0px',\n\t\tletterSpacingActual: '',\n\t\tletterSpacingActualFlat: ''\n\t})\n\tconst letterSpacing_mix = ref(1)\n\tconst textRef = ref(null as UniTextElement | null)\n\tconst textRefFlat = ref(null as UniTextElement | null)\n\n\tconst getPropertyValues = () => {\n\t\tdata.letterSpacingActual = textRef.value?.style.getPropertyValue('letter-spacing') ?? ''\n\t\tdata.letterSpacingActualFlat = textRefFlat.value?.style.getPropertyValue('letter-spacing') ?? ''\n\t}\n\n\n\tconst changeLetterSpacing = (value: string) => {\n\t\tdata.letterSpacing = value\n\t\ttextRef.value?.style.setProperty('letter-spacing', value)\n\t\ttextRefFlat.value?.style.setProperty('letter-spacing', value)\n\t\t// 使用 nextTick 确保样式已应用后再获取值\n\t\tnextTick(() => {\n\t\t\tgetPropertyValues()\n\t\t})\n\t}\n\n\tconst radioChangeLetterSpacing = (index: number) => {\n\t\tconst selectedItem = letterSpacingEnum.find((item): boolean => item.value === index)\n\t\tif (selectedItem != null) {\n\t\t\tchangeLetterSpacing(selectedItem.name)\n\t\t}\n\t}\n\n\tconst inputChangeLetterSpacing = (value: string) => {\n\t\tchangeLetterSpacing(value)\n\t}\n\n  /**\n   * * * * * * * * * * * * * *\n   * 自动化测试\n   * * * * * * * * * * * * * *\n   */\n  type AutoTextData = {\n    begin: boolean\n  }\n  const autoTestData = reactive<AutoTextData>({\n    begin: false\n  } as AutoTextData)\n\n  function plusLetterSpacing() {\n    letterSpacing_mix.value += 0.2\n  }\n  function minusLetterSpacing() {\n    letterSpacing_mix.value -= 0.2\n  }\n  function getLetterSpacing() {\n    const testText = uni.getElementById('testText')\n    if (testText != null) {\n      return parseFloat(testText.style.getPropertyValue('letter-spacing'))\n    }\n    return 0\n  }\n\n  defineExpose({\n    autoTestData,\n    getLetterSpacing,\n    plusLetterSpacing,\n    minusLetterSpacing,\n    radioChangeLetterSpacing,\n    data\n  })\n  /**\n   * * * * * * * * * * * * * *\n   * 自动化测试 END\n   * * * * * * * * * * * * * *\n   */\n\n\tonReady(() => {\n\t\tgetPropertyValues()\n\t})\n</script>\n\n<style>\n\t.common {\n\t\tfont-size: 20px;\n\t}\n  .box{\n    height: 110px;\n    background-color: gray;\n    justify-content: center;\n    align-items: center;\n  }\n  .common-text{\n    font-size: 14px;\n  }\n\n  .common-box{\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 80px;\n    background-color: gray;\n    justify-content: center;\n    align-items: center;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n"},"line-height":{"name":"## line-height\n","description":"\nline-height 属性用于设置多行文本的间距。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nline-height: normal | <number> | <length> | <percentage>;\n```\n","values":"\n### line-height 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| normal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"5.0\",\"5.0\",\"5.0\"]],\"status\":\"SUPPORTED\"}' /> | 由各平台实现，约为 1.2，取决于元素的 font-family。 |\n","defaultValue":"### 默认值 @default-value \n `normal`","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)\n- [textarea](/component/textarea.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/line-height)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.line-height)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/line-height.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/line-height.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/line-height\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/line-height\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <template v-if=\"autoTestData.begin\">\n      <view>\n        <text id=\"testText\"\n          :style=\"`line-height: ${data.lineHeight_mix};`\">\n          uni-app 是一个使用 Vue.js\n          开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。</text>\n        <view style=\"flex-direction: row;\">\n          <button @click=\"plusLineHeight\">+行高</button>\n          <button @click=\"minusLineHeight\">-行高</button>\n        </view>\n      </view>\n    </template>\n    <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n    <view class=\"demo-box\">\n      <view class=\"box\">\n        <text class=\"common\" style=\"line-height: 75px;\">line-height: 75px</text>\n        <text class=\"line-height-3 common\">line-height: 3</text>\n        <text class=\"common\" style=\"line-height: 3em;\">line-height: 3em</text>\n        <text class=\"common\" style=\"line-height: 50rpx;\">line-height: 50rpx</text>\n        <text class=\"common\" style=\"line-height: 3;\">line-height: 3\\nline-height: 3\\nline-height: 3</text>\n      </view>\n      <view class=\"box\">\n        <text class=\"common\" style=\"line-height: 75px;\" flatten>line-height: 75px</text>\n        <text class=\"line-height-3 common\" flatten>line-height: 3</text>\n        <text class=\"common\" style=\"line-height: 3em;\" flatten>line-height: 3em</text>\n        <text class=\"common\" style=\"line-height: 50rpx;\" flatten>line-height: 50rpx</text>\n        <text class=\"common\" style=\"line-height: 3;\" flatten>line-height: 3\\nline-height: 3\\nline-height: 3</text>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n    </view>\n\n    <view class=\"common-box\">\n      <!-- 普通版本 -->\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">line-height</text>\n        <text class=\"uni-info\">设置值: {{data.lineHeight}}</text>\n        <text class=\"uni-info\">获取值: {{data.lineHeightActual}}</text>\n        <view class=\"test-box\">\n          <text ref=\"textRef\" class=\"common\" :style=\"{ lineHeight: data.lineHeight }\">当前 line-height: {{data.lineHeight}}</text>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">拍平</text>\n        <text class=\"uni-info\">设置值: {{data.lineHeight}}</text>\n        <text class=\"uni-info\">获取值: {{data.lineHeightActualFlat}}</text>\n        <view class=\"test-box\">\n          <text ref=\"textRefFlat\" class=\"common\" :style=\"{ lineHeight: data.lineHeight }\" flatten>当前 line-height: {{data.lineHeight}}</text>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"lineHeightEnum\" title=\"line-height 枚举值\" @change=\"radioChangeLineHeight\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.lineHeight\" title=\"line-height 自定义值\" type=\"text\" @confirm=\"inputChangeLineHeight\"></input-data>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const lineHeightEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '1.5' },\n    { value: 2, name: '2' },\n    { value: 3, name: '25px' },\n    { value: 4, name: '50rpx' },\n    { value: 5, name: '1.5em' },\n    { value: 6, name: '2em' }\n  ]\n\n  type LineHeightData = {\n    lineHeight: string\n    lineHeightActual: string\n    lineHeightActualFlat: string\n    lineHeight_mix: number\n  }\n  const data = reactive({\n    lineHeight: '20px',\n    lineHeightActual: '',\n    lineHeightActualFlat: '',\n    lineHeight_mix: 1.5\n  } as LineHeightData)\n  const textRef = ref(null as UniTextElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n\n  const getPropertyValues = () => {\n    data.lineHeightActual = textRef.value?.style.getPropertyValue('line-height') ?? ''\n    data.lineHeightActualFlat = textRefFlat.value?.style.getPropertyValue('line-height') ?? ''\n  }\n\n\n  const changeLineHeight = (value: string) => {\n    data.lineHeight = value\n    textRef.value?.style.setProperty('line-height', value)\n    textRefFlat.value?.style.setProperty('line-height', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeLineHeight = (index: number) => {\n    const selectedItem = lineHeightEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeLineHeight(selectedItem.name)\n    }\n  }\n\n  const inputChangeLineHeight = (value: string) => {\n    changeLineHeight(value)\n  }\n\n\n  /**\n   * * * * * * * * * * * * * *\n   * 自动化测试\n   * * * * * * * * * * * * * *\n   */\n  type AutoTextData = {\n    begin: boolean\n  }\n  const autoTestData = reactive<AutoTextData>({\n    begin: false\n  } as AutoTextData)\n\n  function plusLineHeight() {\n    data.lineHeight_mix = data.lineHeight_mix + 0.2\n  }\n  function minusLineHeight() {\n    data.lineHeight_mix = data.lineHeight_mix - 0.2\n  }\n  function getLineHeight() {\n    const testText = uni.getElementById('testText')\n    if (testText != null) {\n      return parseFloat(testText.style.getPropertyValue('line-height'))\n    }\n    return 0\n  }\n\n  defineExpose({\n    autoTestData,\n    getLineHeight,\n    plusLineHeight,\n    minusLineHeight,\n    radioChangeLineHeight,\n    data\n  })\n  /**\n   * * * * * * * * * * * * * *\n   * 自动化测试 END\n   * * * * * * * * * * * * * *\n   */\n\n  onReady(() => {\n    getPropertyValues()\n  })\n</script>\n\n<style>\n  .common {\n    font-size: 20px;\n    border: 1px cyan solid;\n    margin: 10px 0;\n    padding: 0 10px;\n  }\n  .line-height-3 {\n    line-height: 3;\n  }\n  .box{\n    height: 500px;\n    background-color: gray;\n    justify-content: center;\n    align-items: center;\n    flex:1;\n  }\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n  .common-box{\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 150px;\n    background-color: gray;\n    justify-content: center;\n    align-items: center;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- number\n"},"lines":{"name":"## lines\n","description":"\ntext 组件专有样式，设置文本的最大行数。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- |\n| x | 3.9 | x | 4.11 | x | 4.61 | x |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nlines: <integer>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `-1`","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)\n- [input](/component/input.md)\n- [textarea](/component/textarea.md)","compatibility":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.lines)\n","example":"","restrictions":"\n### 值限制\n- integer\n"},"margin":{"name":"## margin\n","description":"\nmargin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nmargin: [ <length> | <percentage> | auto ]{1,4};\n```\n","values":"\n### margin 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。 |\n","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/margin)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.margin)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/margin/margin.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/margin/margin.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/margin/margin\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/margin/margin\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>margin: 25px</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin: 25px;\"></view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin: 25px;\" flatten></view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>margin: 10%</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin: 10%;\"></view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin: 10%;\" flatten></view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.margin}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginActual}}</text>\n          <view class=\"test-box\">\n            <view class=\"common-view\" style=\"background-color: red;\"></view>\n            <view ref=\"viewRef\" class=\"common-view test-view\" :style=\"{ margin: data.margin }\">\n              <text class=\"common-text\">view</text>\n            </view>\n            <view class=\"common-view\" style=\"background-color: blue;\"></view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.margin}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginActualText}}</text>\n          <view class=\"test-box\">\n            <text class=\"common-view common-text\" style=\"background-color: red;\">红色</text>\n            <text ref=\"textRef\" class=\"common-view common-text test-text\" :style=\"{ margin: data.margin }\">text</text>\n            <text class=\"common-view common-text\" style=\"background-color: blue;\">蓝色</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.margin}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginActualImage}}</text>\n          <view class=\"test-box\">\n            <image class=\"common-image\" style=\"background-color: red;\" src=\"/static/test-image/logo.png\"></image>\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ margin: data.margin }\" src=\"/static/test-image/logo.png\"></image>\n            <image class=\"common-image\" style=\"background-color: blue;\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.margin}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginActualFlat}}</text>\n          <view class=\"test-box\">\n            <view class=\"common-view\" style=\"background-color: red;\"></view>\n            <view ref=\"viewRefFlat\" class=\"common-view test-view-flatten\" :style=\"{ margin: data.margin }\" flatten>\n              <text class=\"common-text\">view</text>\n            </view>\n            <view class=\"common-view\" style=\"background-color: blue;\"></view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.margin}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text class=\"common-view common-text\" style=\"background-color: red;\">红色</text>\n            <text ref=\"textRefFlat\" class=\"common-view common-text test-text-flatten\" :style=\"{ margin: data.margin }\" flatten>text</text>\n            <text class=\"common-view common-text\" style=\"background-color: blue;\">蓝色</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.margin}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image class=\"common-image\" style=\"background-color: red;\" src=\"/static/test-image/logo.png\"></image>\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ margin: data.margin }\" flatten src=\"/static/test-image/logo.png\"></image>\n            <image class=\"common-image\" style=\"background-color: blue;\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件 margin </text>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-info\">设置值: {{data.margin}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginActualScrollView}}</text>\n          <view class=\"test-box\" style=\"height: 180px;\">\n            <view class=\"common-view\" style=\"background-color: red;\"></view>\n            <scroll-view ref=\"scrollViewRef\" class=\"common-scroll-view\" :style=\"{ margin: data.margin }\">\n              <view class=\"scroll-view-content\">\n                <text class=\"common-text\">scroll-view1</text>\n              </view>\n              <view class=\"scroll-view-content\">\n                <text class=\"common-text\">scroll-view2</text>\n              </view>\n              <view class=\"scroll-view-content\">\n                <text class=\"common-text\">scroll-view3</text>\n              </view>\n            </scroll-view>\n            <view class=\"common-view\" style=\"background-color: blue;\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :compact=\"true\" :items=\"marginEnum\" title=\"margin 枚举值\" @change=\"radioChangeMargin\"></enum-data>\n        <input-data :defaultValue=\"data.margin\" title=\"margin 自定义值\" type=\"text\" @confirm=\"inputChangeMargin\"></input-data>\n      </view>\n\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text>native-view组件: margin: 25px 和 5%</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <test-native-view class=\"common\" style=\"margin: 25px;\"></test-native-view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <test-native-view class=\"common\" style=\"margin: 10%;\"></test-native-view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n      <!-- #endif -->\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    margin: '25px',\n    marginActual: '',\n    marginActualText: '',\n    marginActualImage: '',\n    marginActualFlat: '',\n    marginActualTextFlat: '',\n    marginActualImageFlat: '',\n    marginActualScrollView: ''\n  })\n\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n  const scrollViewRef = ref(null as UniElement | null)\n\n  const marginEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '0px' },\n    { value: 3, name: '20px' },\n    { value: 4, name: '0%' },\n    { value: 5, name: '10%' },\n    { value: 6, name: 'auto' }\n  ]\n\n  const getPropertyValues = () => {\n    data.marginActual = viewRef.value?.style.getPropertyValue('margin') ?? ''\n    data.marginActualFlat = viewRefFlat.value?.style.getPropertyValue('margin') ?? ''\n    data.marginActualText = textRef.value?.style.getPropertyValue('margin') ?? ''\n    data.marginActualTextFlat = textRefFlat.value?.style.getPropertyValue('margin') ?? ''\n    data.marginActualImage = imageRef.value?.style.getPropertyValue('margin') ?? ''\n    data.marginActualImageFlat = imageRefFlat.value?.style.getPropertyValue('margin') ?? ''\n    data.marginActualScrollView = scrollViewRef.value?.style.getPropertyValue('margin') ?? ''\n  }\n\n\n  const changeMargin = (value: string) => {\n    data.margin = value\n    viewRef.value?.style.setProperty('margin', value)\n    viewRefFlat.value?.style.setProperty('margin', value)\n    textRef.value?.style.setProperty('margin', value)\n    textRefFlat.value?.style.setProperty('margin', value)\n    imageRef.value?.style.setProperty('margin', value)\n    imageRefFlat.value?.style.setProperty('margin', value)\n    scrollViewRef.value?.style.setProperty('margin', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeMargin = (index: number) => {\n    const selectedItem = marginEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeMargin(selectedItem.name)\n    }\n  }\n\n  const inputChangeMargin = (value: string) => {\n    changeMargin(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeMargin,\n    data\n  })\n</script>\n\n<style>\n  .demo-container {\n    flex: 1;\n    margin:0 10px;\n    height: 220px;\n    background-color: gray;\n  }\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n  .common {\n    height: 50px;\n    background-color: green;\n  }\n\n  .red {\n    background-color: red;\n  }\n\n  .blue {\n    background-color: blue;\n  }\n\n  .common-view {\n    height: 30px;\n    background-color: green;\n  }\n\n  .common-text {\n    font-size: 12px;\n    color: white;\n  }\n\n  .common-image {\n    width: 30px;\n    height: 30px;\n    background-color: green;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 140px;\n    background-color: gray;\n  }\n\n\n  .common-scroll-view {\n    height: 30px;\n    background-color: green;\n  }\n\n  .scroll-view-content {\n    width: 100%;\n    height: 30px;\n    align-items: center;\n    justify-content: center;\n    border: cyan solid 2px;\n  }\n\n  .native-view-container {\n    width: 100px;\n    height: 100px;\n    background-color: #e0e0e0;\n    border: 1px solid #999;\n  }\n\n  .native-view {\n    width: 100%;\n    height: 100%;\n    background-color: cyan;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"margin-bottom":{"name":"## margin-bottom\n","description":"\nmargin-bottom 属性设置与元素相关联的盒子模型的下外边距。可以为负值\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nmargin-bottom: <length> | <percentage> | auto;\n```\n","values":"\n### margin-bottom 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 由浏览器自己选择一个合适的值。参见 margin。 |\n","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/margin-bottom)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.margin.margin-bottom)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/margin/margin-bottom.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/margin/margin-bottom.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/margin/margin-bottom\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/margin/margin-bottom\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>margin-bottom: 25px</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-bottom: 25px;\"></view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-bottom: 25px;\" flatten></view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>margin-bottom: 10%</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-bottom: 10%;\"></view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-bottom: 10%;\" flatten></view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n      </view>\n      <view>\n        <text class=\"uni-subtitle-text\">margin-bottom: 10% 和 margin-bottom: 30px</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <scroll-view class=\"common\" style=\"margin-bottom: 10%;\"></scroll-view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <scroll-view class=\"common\" style=\"margin-bottom: 30px;\"></scroll-view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.marginBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginBottomActual}}</text>\n          <view class=\"test-box\">\n            <view class=\"common-view\" style=\"background-color: red;\"></view>\n            <view ref=\"viewRef\" class=\"common-view test-view\" :style=\"{ marginBottom: data.marginBottom }\">\n              <text class=\"common-text\">view</text>\n            </view>\n            <view class=\"common-view\" style=\"background-color: blue;\"></view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.marginBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginBottomActualText}}</text>\n          <view class=\"test-box\">\n            <text class=\"common-view common-text\" style=\"background-color: red;\">红色</text>\n            <text ref=\"textRef\" class=\"common-view common-text test-text\" :style=\"{ marginBottom: data.marginBottom }\">text</text>\n            <text class=\"common-view common-text\" style=\"background-color: blue;\">蓝色</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.marginBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginBottomActualImage}}</text>\n          <view class=\"test-box\">\n            <image class=\"common-image\" style=\"background-color: red;\" src=\"/static/test-image/logo.png\"></image>\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ marginBottom: data.marginBottom }\" src=\"/static/test-image/logo.png\"></image>\n            <image class=\"common-image\" style=\"background-color: blue;\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.marginBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginBottomActualFlat}}</text>\n          <view class=\"test-box\">\n            <view class=\"common-view\" style=\"background-color: red;\"></view>\n            <view ref=\"viewRefFlat\" class=\"common-view test-view-flatten\" :style=\"{ marginBottom: data.marginBottom }\" flatten>\n              <text class=\"common-text\">view</text>\n            </view>\n            <view class=\"common-view\" style=\"background-color: blue;\"></view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.marginBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginBottomActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text class=\"common-view common-text\" style=\"background-color: red;\">红色</text>\n            <text ref=\"textRefFlat\" class=\"common-view common-text test-text-flatten\" :style=\"{ marginBottom: data.marginBottom }\" flatten>text</text>\n            <text class=\"common-view common-text\" style=\"background-color: blue;\">蓝色</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.marginBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginBottomActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image class=\"common-image\" style=\"background-color: red;\" src=\"/static/test-image/logo.png\"></image>\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ marginBottom: data.marginBottom }\" flatten src=\"/static/test-image/logo.png\"></image>\n            <image class=\"common-image\" style=\"background-color: blue;\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"marginBottomEnum\" title=\"margin-bottom 枚举值\" @change=\"radioChangeMarginBottom\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.marginBottom\" title=\"margin-bottom 自定义值\" type=\"text\" @confirm=\"inputChangeMarginBottom\"></input-data>\n      </view>\n\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text>native-view组件: margin-bottom: 25px 和 10%</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <test-native-view class=\"common\" style=\"margin-bottom: 25px;\"></test-native-view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <test-native-view class=\"common\" style=\"margin-bottom: 10%;\"></test-native-view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    marginBottom: '25px',\n    marginBottomActual: '',\n    marginBottomActualText: '',\n    marginBottomActualImage: '',\n    marginBottomActualFlat: '',\n    marginBottomActualTextFlat: '',\n    marginBottomActualImageFlat: ''\n  })\n\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const marginBottomEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '0px' },\n    { value: 3, name: '20px' },\n    { value: 4, name: '0%' },\n    { value: 5, name: '10%' },\n    { value: 6, name: 'auto' }\n  ]\n\n  const getPropertyValues = () => {\n    data.marginBottomActual = viewRef.value?.style.getPropertyValue('margin-bottom') ?? ''\n    data.marginBottomActualFlat = viewRefFlat.value?.style.getPropertyValue('margin-bottom') ?? ''\n    data.marginBottomActualText = textRef.value?.style.getPropertyValue('margin-bottom') ?? ''\n    data.marginBottomActualTextFlat = textRefFlat.value?.style.getPropertyValue('margin-bottom') ?? ''\n    data.marginBottomActualImage = imageRef.value?.style.getPropertyValue('margin-bottom') ?? ''\n    data.marginBottomActualImageFlat = imageRefFlat.value?.style.getPropertyValue('margin-bottom') ?? ''\n  }\n\n\n  const changeMarginBottom = (value: string) => {\n    data.marginBottom = value\n    viewRef.value?.style.setProperty('margin-bottom', value)\n    viewRefFlat.value?.style.setProperty('margin-bottom', value)\n    textRef.value?.style.setProperty('margin-bottom', value)\n    textRefFlat.value?.style.setProperty('margin-bottom', value)\n    imageRef.value?.style.setProperty('margin-bottom', value)\n    imageRefFlat.value?.style.setProperty('margin-bottom', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeMarginBottom = (index: number) => {\n    const selectedItem = marginBottomEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeMarginBottom(selectedItem.name)\n    }\n  }\n\n  const inputChangeMarginBottom = (value: string) => {\n    changeMarginBottom(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeMarginBottom,\n    data\n  })\n</script>\n\n<style>\n  .demo-container {\n    flex: 1;\n    margin:0 10px;\n    height: 220px;\n    background-color: gray;\n  }\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n  .common {\n    height: 50px;\n    background-color: green;\n  }\n\n  .red {\n    background-color: red;\n  }\n\n  .blue {\n    background-color: blue;\n  }\n\n  .green {\n    background-color: green;\n  }\n\n  .scroll-view-test {\n    height: 50px;\n  }\n\n  .common-view {\n    height: 30px;\n    background-color: green;\n  }\n\n  .common-text {\n    font-size: 12px;\n    color: white;\n  }\n\n  .common-image {\n    width: 30px;\n    height: 30px;\n    background-color: green;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 140px;\n    background-color: gray;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"margin-left":{"name":"## margin-left\n","description":"\nmargin-left 属性 设置与元素相关联的盒子模型的左外边距。这个值可以为负值。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nmargin-left: <length> | <percentage> | auto;\n```\n","values":"\n### margin-left 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | auto 关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。如果有几组 margin-left 和 margin-right 设置为 auto，那么最后计算的空间分布，会根据 display，float，position 属性，自动生成以下几种情况：<br/>    <br/>      <br/>        <br/>          Value of display<br/>          Value of float<br/>          Value of position<br/>          Computed value of auto<br/>          Comment<br/>        <br/>      <br/>      <br/>        <br/>          inline, inline-block, inline-table<br/>          any<br/>          static or relative<br/>          0<br/>          Inline layout mode<br/>        <br/>        <br/>          block, inline, inline-block, block, table, inline-table, list-item, table-caption<br/>          any<br/>          static or relative<br/>          0, 除非margin-left和 margin-right 同时都设置为 auto。这样的话，元素就被设置为基于父元素居中。<br/>          Block layout mode<br/>        <br/>        <br/>          block, inline, inline-block, block, table, inline-table, list-item, table-caption<br/>          left or right<br/>          static or relative<br/>          0<br/>          Block layout mode (floating element)<br/>        <br/>        <br/>          any table-*, except table-caption<br/>          any<br/>          any<br/>          0<br/>          Internal table-* elements don't have margins, use border-spacing instead<br/>        <br/>        <br/>          any, except flex, inline-flex, or table-*<br/>          any<br/>          fixed or absolute<br/>          0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the border area inside the available width, if fixed.<br/>          Absolutely positioned layout mode<br/>        <br/>        <br/>          flex, inline-flex<br/>          any<br/>          any<br/>          在水平方向上有空余空间的情况下，空余的空间会被平均分给水平方向上写有 margin-left:auto 属性的元素的外边距<br/>          Flexbox layout mode |\n","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/margin-left)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.margin.margin-left)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/margin/margin-left.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/margin/margin-left.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/margin/margin-left\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/margin/margin-left\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>margin-left: 25px</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-left: 25px;\"></view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-left: 25px;\" flatten></view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>margin-left: 10%</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-left: 10%;\"></view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-left: 10%;\" flatten></view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n      </view>\n      <view>\n        <text class=\"uni-subtitle-text\">margin-left: 10% 和 margin-left: 30px</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <scroll-view class=\"common\" style=\"margin-left: 10%;\"></scroll-view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <scroll-view class=\"common\" style=\"margin-left: 30px;\"></scroll-view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.marginLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginLeftActual}}</text>\n          <view class=\"test-box\">\n            <view class=\"common-view\" style=\"background-color: red;\"></view>\n            <view ref=\"viewRef\" class=\"common-view test-view\" :style=\"{ marginLeft: data.marginLeft }\">\n              <text class=\"common-text\">view</text>\n            </view>\n            <view class=\"common-view\" style=\"background-color: blue;\"></view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.marginLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginLeftActualText}}</text>\n          <view class=\"test-box\">\n            <text class=\"common-view common-text\" style=\"background-color: red;\">红色</text>\n            <text ref=\"textRef\" class=\"common-view common-text test-text\" :style=\"{ marginLeft: data.marginLeft }\">text</text>\n            <text class=\"common-view common-text\" style=\"background-color: blue;\">蓝色</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.marginLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginLeftActualImage}}</text>\n          <view class=\"test-box\">\n            <image class=\"common-image\" style=\"background-color: red;\" src=\"/static/test-image/logo.png\"></image>\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ marginLeft: data.marginLeft }\" src=\"/static/test-image/logo.png\"></image>\n            <image class=\"common-image\" style=\"background-color: blue;\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.marginLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginLeftActualFlat}}</text>\n          <view class=\"test-box\">\n            <view class=\"common-view\" style=\"background-color: red;\"></view>\n            <view ref=\"viewRefFlat\" class=\"common-view test-view-flatten\" :style=\"{ marginLeft: data.marginLeft }\" flatten>\n              <text class=\"common-text\">view</text>\n            </view>\n            <view class=\"common-view\" style=\"background-color: blue;\"></view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.marginLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginLeftActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text class=\"common-view common-text\" style=\"background-color: red;\">红色</text>\n            <text ref=\"textRefFlat\" class=\"common-view common-text test-text-flatten\" :style=\"{ marginLeft: data.marginLeft }\" flatten>text</text>\n            <text class=\"common-view common-text\" style=\"background-color: blue;\">蓝色</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.marginLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginLeftActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image class=\"common-image\" style=\"background-color: red;\" src=\"/static/test-image/logo.png\"></image>\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ marginLeft: data.marginLeft }\" flatten src=\"/static/test-image/logo.png\"></image>\n            <image class=\"common-image\" style=\"background-color: blue;\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"marginLeftEnum\" title=\"margin-left 枚举值\" @change=\"radioChangeMarginLeft\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.marginLeft\" title=\"margin-left 自定义值\" type=\"text\" @confirm=\"inputChangeMarginLeft\"></input-data>\n      </view>\n\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text>native-view组件: margin-left: 25px 和 10%</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <test-native-view class=\"common\" style=\"margin-left: 25px;\"></test-native-view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <test-native-view class=\"common\" style=\"margin-left: 10%;\"></test-native-view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    marginLeft: '25px',\n    marginLeftActual: '',\n    marginLeftActualText: '',\n    marginLeftActualImage: '',\n    marginLeftActualFlat: '',\n    marginLeftActualTextFlat: '',\n    marginLeftActualImageFlat: ''\n  })\n\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const marginLeftEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '0px' },\n    { value: 3, name: '20px' },\n    { value: 4, name: '0%' },\n    { value: 5, name: '10%' },\n    { value: 6, name: 'auto' }\n  ]\n\n  const getPropertyValues = () => {\n    data.marginLeftActual = viewRef.value?.style.getPropertyValue('margin-left') ?? ''\n    data.marginLeftActualFlat = viewRefFlat.value?.style.getPropertyValue('margin-left') ?? ''\n    data.marginLeftActualText = textRef.value?.style.getPropertyValue('margin-left') ?? ''\n    data.marginLeftActualTextFlat = textRefFlat.value?.style.getPropertyValue('margin-left') ?? ''\n    data.marginLeftActualImage = imageRef.value?.style.getPropertyValue('margin-left') ?? ''\n    data.marginLeftActualImageFlat = imageRefFlat.value?.style.getPropertyValue('margin-left') ?? ''\n  }\n\n\n  const changeMarginLeft = (value: string) => {\n    data.marginLeft = value\n    viewRef.value?.style.setProperty('margin-left', value)\n    viewRefFlat.value?.style.setProperty('margin-left', value)\n    textRef.value?.style.setProperty('margin-left', value)\n    textRefFlat.value?.style.setProperty('margin-left', value)\n    imageRef.value?.style.setProperty('margin-left', value)\n    imageRefFlat.value?.style.setProperty('margin-left', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeMarginLeft = (index: number) => {\n    const selectedItem = marginLeftEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeMarginLeft(selectedItem.name)\n    }\n  }\n\n  const inputChangeMarginLeft = (value: string) => {\n    changeMarginLeft(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeMarginLeft,\n    data\n  })\n</script>\n\n<style>\n  .demo-container {\n    flex: 1;\n    margin:0 10px;\n    height: 180px;\n    background-color: gray;\n  }\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n  .common {\n    height: 50px;\n    background-color: green;\n  }\n\n  .red {\n    background-color: red;\n  }\n\n  .blue {\n    background-color: blue;\n  }\n\n  .green {\n    background-color: green;\n  }\n\n  .scroll-view-test {\n    height: 50px;\n  }\n\n  .common-view {\n    height: 30px;\n    background-color: green;\n  }\n\n  .common-text {\n    font-size: 12px;\n    color: white;\n  }\n\n  .common-image {\n    width: 30px;\n    height: 30px;\n    background-color: green;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 100px;\n    background-color: gray;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"margin-right":{"name":"## margin-right\n","description":"\nmargin-right 属性 设置与元素相关联的盒子模型的右外边距。这个值可以为负值。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nmargin-right: <length> | <percentage> | auto;\n```\n","values":"\n### margin-right 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | auto 关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。如果有几组 margin-left 和 margin-right 设置为 auto，那么最后计算的空间分布，会根据 display，float，position 属性，自动生成以下几种情况：<br/>    <br/>      <br/>        <br/>          Value of display<br/>          Value of float<br/>          Value of position<br/>          Computed value of auto<br/>          Comment<br/>        <br/>      <br/>      <br/>        <br/>          inline, inline-block, inline-table<br/>          any<br/>          static or relative<br/>          0<br/>          Inline layout mode<br/>        <br/>        <br/>          block, inline, inline-block, block, table, inline-table, list-item, table-caption<br/>          any<br/>          static or relative<br/>          0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the element inside its parent.<br/>          Block layout mode<br/>        <br/>        <br/>          block, inline, inline-block, block, table, inline-table, list-item, table-caption<br/>          left or right<br/>          static or relative<br/>          0<br/>          Block layout mode (floating element)<br/>        <br/>        <br/>          any table-*, except table-caption<br/>          any<br/>          any<br/>          0<br/>          Internal table-* elements don't have margins, use border-spacing instead<br/>        <br/>        <br/>          any, except flex, inline-flex, or table-*<br/>          any<br/>          fixed or absolute<br/>          0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the border area inside the available width, if fixed.<br/>          Absolutely positioned layout mode<br/>        <br/>        <br/>          flex, inline-flex<br/>          any<br/>          any<br/>          0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins.<br/>          Flexbox layout mode |\n","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/margin-right)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.margin.margin-right)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/margin/margin-right.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/margin/margin-right.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/margin/margin-right\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/margin/margin-right\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>margin-right: 25px</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-right: 25px;\"></view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-right: 25px;\" flatten></view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>margin-right: 10%</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-right: 10%;\"></view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-right: 10%;\" flatten></view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n      </view>\n      <view>\n        <text class=\"uni-subtitle-text\">margin-right: 10% 和 margin-right: 30px</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <scroll-view class=\"common\" style=\"margin-right: 10%;\"></scroll-view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <scroll-view class=\"common\" style=\"margin-right: 30px;\"></scroll-view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.marginRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginRightActual}}</text>\n          <view class=\"test-box\">\n            <view class=\"common-view\" style=\"background-color: red;\"></view>\n            <view ref=\"viewRef\" class=\"common-view test-view\" :style=\"{ marginRight: data.marginRight }\">\n              <text class=\"common-text\">view</text>\n            </view>\n            <view class=\"common-view\" style=\"background-color: blue;\"></view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.marginRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginRightActualText}}</text>\n          <view class=\"test-box\">\n            <text class=\"common-view common-text\" style=\"background-color: red;\">红色</text>\n            <text ref=\"textRef\" class=\"common-view common-text test-text\" :style=\"{ marginRight: data.marginRight }\">text</text>\n            <text class=\"common-view common-text\" style=\"background-color: blue;\">蓝色</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.marginRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginRightActualImage}}</text>\n          <view class=\"test-box row\">\n            <image class=\"common-image\" style=\"background-color: red;\" src=\"/static/test-image/logo.png\"></image>\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ marginRight: data.marginRight }\" src=\"/static/test-image/logo.png\"></image>\n            <image class=\"common-image\" style=\"background-color: blue;\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.marginRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginRightActualFlat}}</text>\n          <view class=\"test-box\">\n            <view class=\"common-view\" style=\"background-color: red;\"></view>\n            <view ref=\"viewRefFlat\" class=\"common-view test-view-flatten\" :style=\"{ marginRight: data.marginRight }\" flatten>\n              <text class=\"common-text\">view</text>\n            </view>\n            <view class=\"common-view\" style=\"background-color: blue;\"></view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.marginRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginRightActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text class=\"common-view common-text\" style=\"background-color: red;\">红色</text>\n            <text ref=\"textRefFlat\" class=\"common-view common-text test-text-flatten\" :style=\"{ marginRight: data.marginRight }\" flatten>text</text>\n            <text class=\"common-view common-text\" style=\"background-color: blue;\">蓝色</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.marginRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginRightActualImageFlat}}</text>\n          <view class=\"test-box row\">\n            <image class=\"common-image\" style=\"background-color: red;\" src=\"/static/test-image/logo.png\"></image>\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ marginRight: data.marginRight }\" flatten src=\"/static/test-image/logo.png\"></image>\n            <image class=\"common-image\" style=\"background-color: blue;\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"marginRightEnum\" title=\"margin-right 枚举值\" @change=\"radioChangeMarginRight\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.marginRight\" title=\"margin-right 自定义值\" type=\"text\" @confirm=\"inputChangeMarginRight\"></input-data>\n      </view>\n\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text>native-view组件: margin-right: 25px 和 10%</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <test-native-view class=\"common\" style=\"margin-right: 25px;\"></test-native-view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <test-native-view class=\"common\" style=\"margin-right: 10%;\"></test-native-view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    marginRight: '25px',\n    marginRightActual: '',\n    marginRightActualText: '',\n    marginRightActualImage: '',\n    marginRightActualFlat: '',\n    marginRightActualTextFlat: '',\n    marginRightActualImageFlat: ''\n  })\n\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const marginRightEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '0px' },\n    { value: 3, name: '20px' },\n    { value: 4, name: '0%' },\n    { value: 5, name: '10%' },\n    { value: 6, name: 'auto' }\n  ]\n\n  const getPropertyValues = () => {\n    data.marginRightActual = viewRef.value?.style.getPropertyValue('margin-right') ?? ''\n    data.marginRightActualFlat = viewRefFlat.value?.style.getPropertyValue('margin-right') ?? ''\n    data.marginRightActualText = textRef.value?.style.getPropertyValue('margin-right') ?? ''\n    data.marginRightActualTextFlat = textRefFlat.value?.style.getPropertyValue('margin-right') ?? ''\n    data.marginRightActualImage = imageRef.value?.style.getPropertyValue('margin-right') ?? ''\n    data.marginRightActualImageFlat = imageRefFlat.value?.style.getPropertyValue('margin-right') ?? ''\n  }\n\n\n  const changeMarginRight = (value: string) => {\n    data.marginRight = value\n    viewRef.value?.style.setProperty('margin-right', value)\n    viewRefFlat.value?.style.setProperty('margin-right', value)\n    textRef.value?.style.setProperty('margin-right', value)\n    textRefFlat.value?.style.setProperty('margin-right', value)\n    imageRef.value?.style.setProperty('margin-right', value)\n    imageRefFlat.value?.style.setProperty('margin-right', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeMarginRight = (index: number) => {\n    const selectedItem = marginRightEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeMarginRight(selectedItem.name)\n    }\n  }\n\n  const inputChangeMarginRight = (value: string) => {\n    changeMarginRight(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeMarginRight,\n    data\n  })\n</script>\n\n<style>\n  .demo-container {\n    flex: 1;\n    margin:0 10px;\n    height: 180px;\n    background-color: gray;\n  }\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n  .common {\n    height: 50px;\n    background-color: green;\n  }\n\n  .red {\n    background-color: red;\n  }\n\n  .blue {\n    background-color: blue;\n  }\n\n  .common-view {\n    height: 30px;\n    background-color: green;\n  }\n\n  .common-text {\n    font-size: 12px;\n    color: white;\n  }\n\n  .common-image {\n    width: 30px;\n    height: 30px;\n    background-color: green;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 100px;\n    background-color: gray;\n  }\n\n  .row{\n    flex-direction: row;\n    align-items: center;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"margin-top":{"name":"## margin-top\n","description":"\nmargin-top CSS 属性用于设置元素的顶部外边距外边距区域。正值使它离相邻元素更远，而负值使它更靠近相邻元素。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nmargin-top: <length> | <percentage> | auto;\n```\n","values":"\n### margin-top 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 浏览器选择一个合适的值来使用。参见 margin。 |\n","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/margin-top)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.margin.margin-top)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/margin/margin-top.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/margin/margin-top.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/margin/margin-top\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/margin/margin-top\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>margin-top: 25px</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-top: 25px;\"></view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-top: 25px;\" flatten></view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>margin-top: 10%</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-top: 10%;\"></view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <view class=\"common\" style=\"margin-top: 10%;\" flatten></view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n      </view>\n      <view>\n        <text class=\"uni-subtitle-text\">margin-top: 10% 和 margin-top: 30px</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <scroll-view class=\"common\" style=\"margin-top: 10%;\"></scroll-view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <scroll-view class=\"common\" style=\"margin-top: 30px;\"></scroll-view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.marginTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginTopActual}}</text>\n          <view class=\"test-box\">\n            <view class=\"common-view\" style=\"background-color: red;\"></view>\n            <view ref=\"viewRef\" class=\"common-view test-view\" :style=\"{ marginTop: data.marginTop }\">\n              <text class=\"common-text\">view</text>\n            </view>\n            <view class=\"common-view\" style=\"background-color: blue;\"></view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.marginTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginTopActualText}}</text>\n          <view class=\"test-box\">\n            <text class=\"common-view common-text\" style=\"background-color: red;\">红色</text>\n            <text ref=\"textRef\" class=\"common-view common-text test-text\" :style=\"{ marginTop: data.marginTop }\">text</text>\n            <text class=\"common-view common-text\" style=\"background-color: blue;\">蓝色</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.marginTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginTopActualImage}}</text>\n          <view class=\"test-box\">\n            <image class=\"common-image\" style=\"background-color: red;\" src=\"/static/test-image/logo.png\"></image>\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ marginTop: data.marginTop }\" src=\"/static/test-image/logo.png\"></image>\n            <image class=\"common-image\" style=\"background-color: blue;\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.marginTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginTopActualFlat}}</text>\n          <view class=\"test-box\">\n            <view class=\"common-view\" style=\"background-color: red;\"></view>\n            <view ref=\"viewRefFlat\" class=\"common-view test-view-flatten\" :style=\"{ marginTop: data.marginTop }\" flatten>\n              <text class=\"common-text\">view</text>\n            </view>\n            <view class=\"common-view\" style=\"background-color: blue;\"></view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.marginTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginTopActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text class=\"common-view common-text\" style=\"background-color: red;\">红色</text>\n            <text ref=\"textRefFlat\" class=\"common-view common-text test-text-flatten\" :style=\"{ marginTop: data.marginTop }\" flatten>text</text>\n            <text class=\"common-view common-text\" style=\"background-color: blue;\">蓝色</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.marginTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.marginTopActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image class=\"common-image\" style=\"background-color: red;\" src=\"/static/test-image/logo.png\"></image>\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ marginTop: data.marginTop }\" flatten src=\"/static/test-image/logo.png\"></image>\n            <image class=\"common-image\" style=\"background-color: blue;\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"marginTopEnum\" title=\"margin-top 枚举值\" @change=\"radioChangeMarginTop\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.marginTop\" title=\"margin-top 自定义值\" type=\"text\" @confirm=\"inputChangeMarginTop\"></input-data>\n      </view>\n\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text>native-view组件: margin-top: 25px 和 10%</text>\n        <view class=\"demo-box\">\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <test-native-view class=\"common\" style=\"margin-top: 25px;\"></test-native-view>\n            <view class=\"common blue\"></view>\n          </view>\n          <view class=\"demo-container\">\n            <view class=\"common red\"></view>\n            <test-native-view class=\"common\" style=\"margin-top: 10%;\"></test-native-view>\n            <view class=\"common blue\"></view>\n          </view>\n        </view>\n      </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    marginTop: '25px',\n    marginTopActual: '',\n    marginTopActualText: '',\n    marginTopActualImage: '',\n    marginTopActualFlat: '',\n    marginTopActualTextFlat: '',\n    marginTopActualImageFlat: ''\n  })\n\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const marginTopEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '0px' },\n    { value: 3, name: '20px' },\n    { value: 4, name: '0%' },\n    { value: 5, name: '10%' },\n    { value: 6, name: 'auto' }\n  ]\n\n  const getPropertyValues = () => {\n    data.marginTopActual = viewRef.value?.style.getPropertyValue('margin-top') ?? ''\n    data.marginTopActualFlat = viewRefFlat.value?.style.getPropertyValue('margin-top') ?? ''\n    data.marginTopActualText = textRef.value?.style.getPropertyValue('margin-top') ?? ''\n    data.marginTopActualTextFlat = textRefFlat.value?.style.getPropertyValue('margin-top') ?? ''\n    data.marginTopActualImage = imageRef.value?.style.getPropertyValue('margin-top') ?? ''\n    data.marginTopActualImageFlat = imageRefFlat.value?.style.getPropertyValue('margin-top') ?? ''\n  }\n\n\n  const changeMarginTop = (value: string) => {\n    data.marginTop = value\n    viewRef.value?.style.setProperty('margin-top', value)\n    viewRefFlat.value?.style.setProperty('margin-top', value)\n    textRef.value?.style.setProperty('margin-top', value)\n    textRefFlat.value?.style.setProperty('margin-top', value)\n    imageRef.value?.style.setProperty('margin-top', value)\n    imageRefFlat.value?.style.setProperty('margin-top', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeMarginTop = (index: number) => {\n    const selectedItem = marginTopEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeMarginTop(selectedItem.name)\n    }\n  }\n\n  const inputChangeMarginTop = (value: string) => {\n    changeMarginTop(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeMarginTop,\n    data\n  })\n</script>\n\n<style>\n  .demo-container {\n    flex:1;\n    margin:0 10px;\n    height: 220px;\n    background-color: gray;\n  }\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n  .common {\n    height: 50px;\n    background-color: green;\n  }\n\n  .red {\n    background-color: red;\n  }\n\n  .blue {\n    background-color: blue;\n  }\n\n  .common-view {\n    height: 30px;\n    background-color: green;\n  }\n\n  .common-text {\n    font-size: 12px;\n    color: white;\n  }\n\n  .common-image {\n    width: 30px;\n    height: 30px;\n    background-color: green;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 140px;\n    background-color: gray;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"max-height":{"name":"## max-height\n","description":"\nCSS属性 max-height 设置元素的最大高度。它防止height属性的使用值（used value）大于 max-height 的指定值。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nmax-height: <viewport-length>;\n```\n","values":"\n### max-height 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| fit-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 元素的最大高度根据内容可用高度自适应，当不会超过内容的最大高度 `max-content` 值。 |\n| max-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 元素的最大高度可以扩展到内容的最大高度。 |\n| min-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 元素的最大高度限制在内容的最小高度之内。 |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 元素的高度可以根据其内容的高度自动扩展，但仍然受到其他相关属性（如 `height` 和 `min-height`）的影响。如果没有其他限制，元素的高度将扩展以适应内容。 |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 元素的高度不再受到任何最大高度的限制，即使元素的内容很多，也会根据内容的大小来自动扩展。 |\n","defaultValue":"### 默认值 @default-value \n `none`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/max-height)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.height.max-height)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/max-height.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/max-height.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/max-height\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/max-height\n\n>示例\n```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\r\n    <view class=\"css-page uni-theme-root\" style=\"flex-grow: 1;\">\n      <view>\r\n        <text class=\"theme-label\">max-height: 100px</text>\n        <view class=\"common\" style=\"max-height: 100px;\">\r\n          <text class=\"cyan-label\">height: 400px</text>\n        </view>\r\n        <text class=\"theme-label\">拍平</text>\n        <view class=\"common\" style=\"max-height: 100px;\" flatten>\r\n          <text class=\"cyan-label\">height: 400px</text>\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt\">\r\n        <text class=\"uni-title-text\">scroll-view 组件</text>\r\n      </view>\r\n\r\n      <view class=\"demo-box\">\r\n        <scroll-view class=\"common\" style=\"max-height: 80px; background-color: cyan;width:100px;\">\r\n          <text class=\"scroll-view-label\">max-height: 80px</text>\r\n        </scroll-view>\r\n        <scroll-view class=\"common\" style=\"max-height: 120px; background-color: cyan;width:100px;\">\r\n          <text class=\"scroll-view-label\">max-height: 120px</text>\r\n        </scroll-view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt\">\r\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\r\n\r\n      <!-- 普通版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.maxHeight}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.maxHeightActual}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ maxHeight: data.maxHeight }\">\r\n              <text class=\"cyan-label\" style=\"font-size: 12px;\">view</text>\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.maxHeight}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.maxHeightActualText}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRef\" class=\"common-dynamic test-text\" :style=\"{ maxHeight: data.maxHeight }\">text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.maxHeight}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.maxHeightActualImage}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRef\" class=\"common-dynamic test-image\" :style=\"{ maxHeight: data.maxHeight }\"\r\n              src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <!-- 拍平版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.maxHeight}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.maxHeightActualFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ maxHeight: data.maxHeight }\"\r\n              flatten>\r\n              <text class=\"cyan-label\" style=\"font-size: 12px;\">view</text>\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.maxHeight}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.maxHeightActualTextFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRefFlat\" class=\"common-dynamic test-text-flatten\" :style=\"{ maxHeight: data.maxHeight }\"\r\n              flatten>text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.maxHeight}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.maxHeightActualImageFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRefFlat\" class=\"common-dynamic test-image-flatten\" :style=\"{ maxHeight: data.maxHeight }\"\r\n              flatten src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt uni-common-mb\">\r\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\r\n        <enum-data :items=\"maxHeightEnum\" title=\"max-height 枚举值\" @change=\"radioChangeMaxHeight\"\r\n          :compact=\"true\"></enum-data>\r\n        <input-data :defaultValue=\"data.maxHeight\" title=\"max-height 自定义值\" type=\"text\"\r\n          @confirm=\"inputChangeMaxHeight\"></input-data>\r\n      </view>\r\n\r\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text class=\"theme-label\">native-view组件: max-height: 80px 和 max-height: 120px</text>\n        <view class=\"demo-box-native\">\n          <view class=\"container-native\">\n            <native-view style=\"max-height: 80px; width:100px; height: 400px;\"></native-view>\n          </view>\n          <view class=\"container-native\">\r\n            <native-view style=\"max-height: 120px; width:100px; height: 400px;\"></native-view>\n          </view>\r\n        </view>\n      </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n  const maxHeightEnum : ItemType[] = [\r\n    { value: 0, name: '' },\r\n    { value: 1, name: '0' },\r\n    { value: 2, name: '0px' },\r\n    { value: 3, name: '100px' },\r\n    { value: 4, name: '150px' },\r\n    { value: 5, name: '80rpx' },\r\n    { value: 6, name: 'none' }\r\n  ]\r\n\r\n  const data = reactive({\r\n    maxHeight: '50px',\r\n    maxHeightActual: '',\r\n    maxHeightActualText: '',\r\n    maxHeightActualImage: '',\r\n    maxHeightActualFlat: '',\r\n    maxHeightActualTextFlat: '',\r\n    maxHeightActualImageFlat: ''\r\n  })\r\n  const viewRef = ref(null as UniElement | null)\r\n  const textRef = ref(null as UniTextElement | null)\r\n  const imageRef = ref(null as UniImageElement | null)\r\n  const viewRefFlat = ref(null as UniElement | null)\r\n  const textRefFlat = ref(null as UniTextElement | null)\r\n  const imageRefFlat = ref(null as UniImageElement | null)\r\n\r\n  const getPropertyValues = () => {\r\n    data.maxHeightActual = viewRef.value?.style.getPropertyValue('max-height') ?? ''\r\n    data.maxHeightActualFlat = viewRefFlat.value?.style.getPropertyValue('max-height') ?? ''\r\n    data.maxHeightActualText = textRef.value?.style.getPropertyValue('max-height') ?? ''\r\n    data.maxHeightActualTextFlat = textRefFlat.value?.style.getPropertyValue('max-height') ?? ''\r\n    data.maxHeightActualImage = imageRef.value?.style.getPropertyValue('max-height') ?? ''\r\n    data.maxHeightActualImageFlat = imageRefFlat.value?.style.getPropertyValue('max-height') ?? ''\r\n  }\r\n\r\n\r\n  const changeMaxHeight = (value : string) => {\r\n    data.maxHeight = value\r\n    viewRef.value?.style.setProperty('max-height', value)\r\n    viewRefFlat.value?.style.setProperty('max-height', value)\r\n    textRef.value?.style.setProperty('max-height', value)\r\n    textRefFlat.value?.style.setProperty('max-height', value)\r\n    imageRef.value?.style.setProperty('max-height', value)\r\n    imageRefFlat.value?.style.setProperty('max-height', value)\r\n    // 使用 nextTick 确保样式已应用后再获取值\r\n    nextTick(() => {\r\n      getPropertyValues()\r\n    })\r\n  }\r\n\r\n  const radioChangeMaxHeight = (index : number) => {\r\n    const selectedItem = maxHeightEnum.find((item) : boolean => item.value === index)\r\n    if (selectedItem != null) {\r\n      changeMaxHeight(selectedItem.name)\r\n    }\r\n  }\r\n\r\n  const inputChangeMaxHeight = (value : string) => {\r\n    changeMaxHeight(value)\r\n  }\r\n\r\n  onReady(() => {\r\n    getPropertyValues()\r\n  })\r\n\r\n  defineExpose({\r\n    radioChangeMaxHeight,\r\n    data\r\n  })\r\n</script>\r\n\r\n<style>\n  .theme-label {\n    color: var(--text-color, #333333);\n  }\n\n  .cyan-label,\n  .scroll-view-label {\n    color: #1a1a1a;\n  }\n\n  .common {\r\n    width: 200px;\r\n    height: 400px;\r\n    background-color: cyan;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  .common-dynamic {\r\n    width: 100px;\r\n    height: 150px;\r\n    background-color: cyan;\r\n  }\r\n\r\n  .test-container {\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .test-item {\r\n    flex: 1;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .test-box {\r\n    width: 100%;\r\n    height: 150px;\r\n    background-color: gray;\r\n  }\r\n\r\n  .demo-box {\r\n    flex-direction: row;\r\n    margin-top: 10px;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .scroll-view-label {\r\n    font-size: 12px;\r\n    text-align: center;\r\n  }\r\n\r\n  .demo-box-native {\r\n    flex-direction: row;\r\n    margin-top: 10px;\r\n    justify-content: space-around;\r\n    align-items: center;\r\n  }\r\n\r\n  .container-native {\r\n    background-color: cyan;\r\n  }\r\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n"},"max-width":{"name":"## max-width\n","description":"\nmax-width 属性用来给元素设置最大宽度值。定义了 max-width 的元素会在达到 max-width 值之后避免进一步按照 width 属性设置变大。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nmax-width: <viewport-length>;\n```\n","values":"\n### max-width 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| fit-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 与 max-content 等价。 |\n| max-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 元素的最大宽度可以扩展到内容的最大宽度。 |\n| min-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 元素的最大宽度限制在内容的最小宽度之内。 |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 浏览器将通过计算为指定元素选择一个 max-width 值。 |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 元素未设置最大值 |\n","defaultValue":"### 默认值 @default-value \n `none`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/max-width)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.width.max-width)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/max-width.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/max-width.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/max-width\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/max-width\n\n>示例\n```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\r\n    <view class=\"uni-theme-root\" style=\"flex-grow: 1;\">\n      <view>\r\n        <text>max-width: 200px</text>\r\n        <view class=\"common\" style=\"max-width: 200px;\">\r\n          <text class=\"cyan-label\">width: 400px</text>\n        </view>\r\n        <text>拍平</text>\r\n        <view class=\"common\" style=\"max-width: 200px;\" flatten>\r\n          <text class=\"cyan-label\">width: 400px</text>\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt\">\r\n        <text class=\"uni-title-text\">scroll-view 组件</text>\r\n      </view>\r\n\r\n      <view class=\"demo-box\">\r\n        <scroll-view class=\"common\" style=\"max-width: 100px; background-color: cyan;\">\r\n          <text class=\"scroll-view-label\">max-width: 100px</text>\r\n        </scroll-view>\r\n        <scroll-view class=\"common\" style=\"max-width: 200px; background-color: cyan;\">\r\n          <text class=\"scroll-view-label\">max-width: 200px</text>\r\n        </scroll-view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt\">\r\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\r\n\r\n      <!-- 普通版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.maxWidth}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.maxWidthActual}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ maxWidth: data.maxWidth }\">\r\n              <text class=\"cyan-label\">view</text>\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.maxWidth}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.maxWidthActualText}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRef\" class=\"common-dynamic test-text\" :style=\"{ maxWidth: data.maxWidth }\">text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.maxWidth}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.maxWidthActualImage}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRef\" class=\"common-dynamic test-image\" :style=\"{ maxWidth: data.maxWidth }\"\r\n              src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <!-- 拍平版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.maxWidth}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.maxWidthActualFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ maxWidth: data.maxWidth }\"\r\n              flatten>\r\n              <text class=\"common-text\">view</text>\r\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.maxWidth}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.maxWidthActualTextFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRefFlat\" class=\"common-dynamic test-text-flatten\" :style=\"{ maxWidth: data.maxWidth }\"\r\n              flatten>text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.maxWidth}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.maxWidthActualImageFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRefFlat\" class=\"common-dynamic test-image-flatten\" :style=\"{ maxWidth: data.maxWidth }\"\r\n              flatten src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt uni-common-mb\">\r\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\r\n        <enum-data :items=\"maxWidthEnum\" title=\"max-width 枚举值\" @change=\"radioChangeMaxWidth\"\r\n          :compact=\"true\"></enum-data>\r\n        <input-data :defaultValue=\"data.maxWidth\" title=\"max-width 自定义值\" type=\"text\"\r\n          @confirm=\"inputChangeMaxWidth\"></input-data>\r\n      </view>\r\n\r\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text>native-view组件: max-width: 100px 和 max-width: 200px</text>\n        <view class=\"demo-box-native\">\n          <view class=\"container-native\">\n            <native-view style=\"max-width: 100px; height: 100px;\"></native-view>\n          </view>\n          <view class=\"container-native\">\r\n            <native-view style=\"max-width: 200px; height: 100px;\"></native-view>\n          </view>\r\n        </view>\n      </view>\n      <!-- #endif -->\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n  const maxWidthEnum : ItemType[] = [\r\n    { value: 0, name: '' },\r\n    { value: 1, name: '0' },\r\n    { value: 2, name: '0px' },\r\n    { value: 3, name: '50px' },\r\n    { value: 4, name: '120px' },\r\n    { value: 5, name: '80rpx' },\r\n    { value: 6, name: 'none' }\r\n  ]\r\n\r\n  const data = reactive({\r\n    maxWidth: '100px',\r\n    maxWidthActual: '',\r\n    maxWidthActualText: '',\r\n    maxWidthActualImage: '',\r\n    maxWidthActualFlat: '',\r\n    maxWidthActualTextFlat: '',\r\n    maxWidthActualImageFlat: ''\r\n  })\r\n  const viewRef = ref(null as UniElement | null)\r\n  const textRef = ref(null as UniTextElement | null)\r\n  const imageRef = ref(null as UniImageElement | null)\r\n  const viewRefFlat = ref(null as UniElement | null)\r\n  const textRefFlat = ref(null as UniTextElement | null)\r\n  const imageRefFlat = ref(null as UniImageElement | null)\r\n\r\n  const getPropertyValues = () => {\r\n    data.maxWidthActual = viewRef.value?.style.getPropertyValue('max-width') ?? ''\r\n    data.maxWidthActualFlat = viewRefFlat.value?.style.getPropertyValue('max-width') ?? ''\r\n    data.maxWidthActualText = textRef.value?.style.getPropertyValue('max-width') ?? ''\r\n    data.maxWidthActualTextFlat = textRefFlat.value?.style.getPropertyValue('max-width') ?? ''\r\n    data.maxWidthActualImage = imageRef.value?.style.getPropertyValue('max-width') ?? ''\r\n    data.maxWidthActualImageFlat = imageRefFlat.value?.style.getPropertyValue('max-width') ?? ''\r\n  }\r\n\r\n\r\n  const changeMaxWidth = (value : string) => {\r\n    data.maxWidth = value\r\n    viewRef.value?.style.setProperty('max-width', value)\r\n    viewRefFlat.value?.style.setProperty('max-width', value)\r\n    textRef.value?.style.setProperty('max-width', value)\r\n    textRefFlat.value?.style.setProperty('max-width', value)\r\n    imageRef.value?.style.setProperty('max-width', value)\r\n    imageRefFlat.value?.style.setProperty('max-width', value)\r\n    // 使用 nextTick 确保样式已应用后再获取值\r\n    nextTick(() => {\r\n      getPropertyValues()\r\n    })\r\n  }\r\n\r\n  const radioChangeMaxWidth = (index : number) => {\r\n    const selectedItem = maxWidthEnum.find((item) : boolean => item.value === index)\r\n    if (selectedItem != null) {\r\n      changeMaxWidth(selectedItem.name)\r\n    }\r\n  }\r\n\r\n  function inputChangeMaxWidth(value : string) {\r\n    changeMaxWidth(value)\r\n  }\r\n\r\n  onReady(() => {\r\n    getPropertyValues()\r\n  })\r\n\r\n  defineExpose({\r\n    radioChangeMaxWidth,\r\n    data\r\n  })\r\n</script>\r\n\r\n<style>\r\n  .common {\r\n    width: 400px;\r\n    height: 80px;\r\n    background-color: cyan;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  .common-view {\r\n    width: 400px;\r\n    height: 80px;\r\n    background-color: cyan;\r\n  }\r\n\r\n  .common-text {\n    width: 50px;\n    color: #1a1a1a;\n  }\r\n\r\n  .common-dynamic {\n    width: 100px;\n    height: 80px;\n    background-color: cyan;\n    color: #1a1a1a;\n  }\r\n\r\n  .test-container {\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .test-item {\r\n    flex: 1;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .test-box {\r\n    width: 100%;\r\n    height: 80px;\r\n    background-color: gray;\r\n  }\r\n\r\n  .demo-box {\r\n    flex-direction: row;\r\n    margin-top: 10px;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .scroll-view-label {\n    font-size: 12px;\n    text-align: center;\n    color: #1a1a1a;\n  }\n\n  .cyan-label {\n    color: #1a1a1a;\n  }\n\n  .demo-box-native {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n    align-items: center;\n  }\n\n  .container-native {\n    background-color: cyan;\n  }\r\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n"},"min-height":{"name":"## min-height\n","description":"\nCSS 属性 min-height 能够设置元素的最小高度。这样能够防止 height 属性的应用值小于 min-height 的值。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nmin-height: <viewport-length>;\n```\n","values":"\n### min-height 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| fit-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 元素的高度将自动调整为适应内容的大小，但不会小于内容的最小高度 `min-content` 值。 |\n| max-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 元素的最小高度不会小于内容的最大高度。 |\n| min-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 元素的最小高度不会小于内容的最小高度。 |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 浏览器将通过计算为指定元素选择一个 min-height 值。 |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 不限制盒容器的尺寸。 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | 0px |\n\n **注意**：W3C 默认值为：auto","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/min-height)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.height.min-height)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/min-height.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/min-height.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/min-height\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/min-height\n\n>示例\n```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\r\n    <view class=\"css-page uni-theme-root\" style=\"flex-grow: 1;\">\n      <view>\r\n        <text class=\"theme-label\">min-height: 150px</text>\n        <view class=\"common\" style=\"min-height: 150px;\">\r\n          <text class=\"cyan-label\">height: 50px</text>\n        </view>\r\n        <text class=\"theme-label\">拍平</text>\n        <view class=\"common\" style=\"min-height: 150px;\" flatten>\r\n          <text class=\"cyan-label\">height: 50px</text>\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt\">\r\n        <text class=\"uni-title-text\">scroll-view 组件</text>\r\n      </view>\r\n\r\n      <view class=\"demo-box\">\r\n        <scroll-view class=\"common\" style=\"min-height: 100px; background-color: cyan;width:100px;\">\r\n          <text class=\"scroll-view-label\">min-height: 100px</text>\r\n        </scroll-view>\r\n        <scroll-view class=\"common\" style=\"min-height: 150px; background-color: cyan;width:100px;\">\r\n          <text class=\"scroll-view-label\">min-height: 150px</text>\r\n        </scroll-view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt\">\r\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\r\n\r\n      <!-- 普通版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.minHeight}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.minHeightActual}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ minHeight: data.minHeight }\">\r\n              <text class=\"cyan-label\">view</text>\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.minHeight}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.minHeightActualText}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRef\" class=\"common-dynamic test-text\" :style=\"{ minHeight: data.minHeight }\">text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.minHeight}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.minHeightActualImage}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRef\" class=\"common-dynamic test-image\" :style=\"{ minHeight: data.minHeight }\"\r\n              src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <!-- 拍平版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.minHeight}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.minHeightActualFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ minHeight: data.minHeight }\"\r\n              flatten>\r\n              <text class=\"cyan-label\">view</text>\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.minHeight}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.minHeightActualTextFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRefFlat\" class=\"common-dynamic test-text-flatten\" :style=\"{ minHeight: data.minHeight }\"\r\n              flatten>text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.minHeight}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.minHeightActualImageFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRefFlat\" class=\"common-dynamic test-image-flatten\" :style=\"{ minHeight: data.minHeight }\"\r\n              flatten src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt uni-common-mb\">\r\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\r\n        <enum-data :items=\"minHeightEnum\" title=\"min-height 枚举值\" @change=\"radioChangeMinHeight\"\r\n          :compact=\"true\"></enum-data>\r\n        <input-data :defaultValue=\"data.minHeight\" title=\"min-height 自定义值\" type=\"text\"\r\n          @confirm=\"inputChangeMinHeight\"></input-data>\r\n      </view>\r\n\r\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text class=\"theme-label\">native-view组件: min-height: 100px 和 min-height: 150px</text>\n        <view class=\"demo-box-native\">\n          <view class=\"container-native\">\n            <native-view style=\"min-height: 100px; width:100px; height: 50px;\"></native-view>\n          </view>\n          <view class=\"container-native\">\r\n            <native-view style=\"min-height: 150px; width:100px; height: 50px;\"></native-view>\n          </view>\r\n        </view>\n      </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n  const minHeightEnum : ItemType[] = [\r\n    { value: 0, name: '' },\r\n    { value: 1, name: '0' },\r\n    { value: 2, name: '0px' },\r\n    { value: 3, name: '50px' },\r\n    { value: 4, name: '150px' },\r\n    { value: 5, name: '80rpx' },\r\n  ]\r\n\r\n  const data = reactive({\r\n    minHeight: '100px',\r\n    minHeightActual: '',\r\n    minHeightActualText: '',\r\n    minHeightActualImage: '',\r\n    minHeightActualFlat: '',\r\n    minHeightActualTextFlat: '',\r\n    minHeightActualImageFlat: ''\r\n  })\r\n  const viewRef = ref(null as UniElement | null)\r\n  const textRef = ref(null as UniTextElement | null)\r\n  const imageRef = ref(null as UniImageElement | null)\r\n  const viewRefFlat = ref(null as UniElement | null)\r\n  const textRefFlat = ref(null as UniTextElement | null)\r\n  const imageRefFlat = ref(null as UniImageElement | null)\r\n\r\n  const getPropertyValues = () => {\r\n    data.minHeightActual = viewRef.value?.style.getPropertyValue('min-height') ?? ''\r\n    data.minHeightActualFlat = viewRefFlat.value?.style.getPropertyValue('min-height') ?? ''\r\n    data.minHeightActualText = textRef.value?.style.getPropertyValue('min-height') ?? ''\r\n    data.minHeightActualTextFlat = textRefFlat.value?.style.getPropertyValue('min-height') ?? ''\r\n    data.minHeightActualImage = imageRef.value?.style.getPropertyValue('min-height') ?? ''\r\n    data.minHeightActualImageFlat = imageRefFlat.value?.style.getPropertyValue('min-height') ?? ''\r\n  }\r\n\r\n\r\n  const changeMinHeight = (value : string) => {\r\n    data.minHeight = value\r\n    viewRef.value?.style.setProperty('min-height', value)\r\n    viewRefFlat.value?.style.setProperty('min-height', value)\r\n    textRef.value?.style.setProperty('min-height', value)\r\n    textRefFlat.value?.style.setProperty('min-height', value)\r\n    imageRef.value?.style.setProperty('min-height', value)\r\n    imageRefFlat.value?.style.setProperty('min-height', value)\r\n    // 使用 nextTick 确保样式已应用后再获取值\r\n    nextTick(() => {\r\n      getPropertyValues()\r\n    })\r\n  }\r\n\r\n  const radioChangeMinHeight = (index : number) => {\r\n    const selectedItem = minHeightEnum.find((item) : boolean => item.value === index)\r\n    if (selectedItem != null) {\r\n      changeMinHeight(selectedItem.name)\r\n    }\r\n  }\r\n\r\n  const inputChangeMinHeight = (value : string) => {\r\n    changeMinHeight(value)\r\n  }\r\n\r\n  onReady(() => {\r\n    getPropertyValues()\r\n  })\r\n\r\n  defineExpose({\r\n    radioChangeMinHeight,\r\n    data\r\n  })\r\n</script>\r\n\r\n<style>\n  .theme-label {\n    color: var(--text-color, #333333);\n  }\n\n  .cyan-label,\n  .scroll-view-label {\n    color: #1a1a1a;\n  }\n\n  .common {\r\n    width: 200px;\r\n    height: 50px;\r\n    background-color: cyan;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  .common-dynamic {\r\n    width: 100px;\r\n    height: 50px;\r\n    background-color: cyan;\r\n  }\r\n\r\n  .test-container {\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .test-item {\r\n    flex: 1;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .test-box {\r\n    width: 100%;\r\n    height: 150px;\r\n    background-color: gray;\r\n  }\r\n\r\n  .demo-box {\r\n    flex-direction: row;\r\n    margin-top: 10px;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .scroll-view-label {\r\n    font-size: 12px;\r\n    text-align: center;\r\n  }\r\n\r\n  .demo-box-native {\r\n    flex-direction: row;\r\n    margin-top: 10px;\r\n    justify-content: space-around;\r\n    align-items: center;\r\n  }\r\n\r\n  .container-native {\r\n    background-color: cyan;\r\n  }\r\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n"},"min-width":{"name":"## min-width\n","description":"\nmin-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nmin-width: <viewport-length>;\n```\n","values":"\n### min-width 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| fit-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 等同于 min(max-content, max(min-content, fill-available). |\n| max-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 固有首选宽度。 |\n| min-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 固有最小宽度 |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 用于弹性元素的默认最小宽度。相比其他布局中以0为默认值，auto能为弹性布局指明更合理的默认表现。 |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 元素未设置最小值 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | 0px |\n\n **注意**：W3C 默认值为：auto","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/min-width)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.width.min-width)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/min-width.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/min-width.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/min-width\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/min-width\n\n>示例\n```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\r\n    <view class=\"uni-theme-root\" style=\"flex-grow: 1;\">\n      <view>\r\n        <text>min-width: 250px</text>\r\n        <view class=\"common\" style=\"min-width: 250px;\">\r\n          <text class=\"cyan-label\">width: 50px</text>\n        </view>\r\n        <text>拍平</text>\r\n        <view class=\"common\" style=\"min-width: 250px;\" flatten>\r\n          <text class=\"cyan-label\">width: 50px</text>\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt\">\r\n        <text class=\"uni-title-text\">scroll-view 组件</text>\r\n      </view>\r\n\r\n      <view class=\"demo-box\">\r\n        <scroll-view class=\"common\" style=\"min-width: 100px; background-color: cyan;\">\r\n          <text class=\"scroll-view-label\">min-width: 100px</text>\r\n        </scroll-view>\r\n        <scroll-view class=\"common\" style=\"min-width: 200px; background-color: cyan;\">\r\n          <text class=\"scroll-view-label\">min-width: 200px</text>\r\n        </scroll-view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt\">\r\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\r\n\r\n      <!-- 普通版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.minWidth}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.minWidthActual}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ minWidth: data.minWidth }\">\r\n              <text class=\"cyan-label\">view</text>\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.minWidth}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.minWidthActualText}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRef\" class=\"common-dynamic test-text\" :style=\"{ minWidth: data.minWidth }\">text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.minWidth}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.minWidthActualImage}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRef\" class=\"common-dynamic test-image\" :style=\"{ minWidth: data.minWidth }\"\r\n              src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <!-- 拍平版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.minWidth}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.minWidthActualFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ minWidth: data.minWidth }\"\r\n              flatten>\r\n              <text class=\"cyan-label\">view</text>\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.minWidth}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.minWidthActualTextFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRefFlat\" class=\"common-dynamic test-text-flatten\" :style=\"{ minWidth: data.minWidth }\"\r\n              flatten>text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.minWidth}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.minWidthActualImageFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRefFlat\" class=\"common-dynamic test-image-flatten\" :style=\"{ minWidth: data.minWidth }\"\r\n              flatten src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt uni-common-mb\">\r\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\r\n        <enum-data :items=\"minWidthEnum\" title=\"min-width 枚举值\" @change=\"radioChangeMinWidth\"\r\n          :compact=\"true\"></enum-data>\r\n        <input-data :defaultValue=\"data.minWidth\" title=\"min-width 自定义值\" type=\"text\"\r\n          @confirm=\"inputChangeMinWidth\"></input-data>\r\n      </view>\r\n\r\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text>native-view组件: min-width: 100px 和 min-width: 200px</text>\n        <view class=\"demo-box-native\">\n          <view class=\"container-native\" style=\"background-color: green;\">\n            <native-view style=\"min-width: 100px; height: 100px;\"></native-view>\n          </view>\r\n          <view class=\"container-native\" style=\"background-color: red;\">\r\n            <native-view style=\"min-width: 200px; height: 100px;\"></native-view>\r\n          </view>\r\n        </view>\n      </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n  const minWidthEnum : ItemType[] = [\r\n    { value: 0, name: '' },\r\n    { value: 1, name: '0' },\r\n    { value: 2, name: '0px' },\r\n    { value: 3, name: '80px' },\r\n    { value: 4, name: '120px' },\r\n    { value: 5, name: '80rpx' },\r\n  ]\r\n\r\n  const data = reactive({\r\n    minWidth: '100px',\r\n    minWidthActual: '',\r\n    minWidthActualText: '',\r\n    minWidthActualImage: '',\r\n    minWidthActualFlat: '',\r\n    minWidthActualTextFlat: '',\r\n    minWidthActualImageFlat: ''\r\n  })\r\n  const viewRef = ref(null as UniElement | null)\r\n  const textRef = ref(null as UniTextElement | null)\r\n  const imageRef = ref(null as UniImageElement | null)\r\n  const viewRefFlat = ref(null as UniElement | null)\r\n  const textRefFlat = ref(null as UniTextElement | null)\r\n  const imageRefFlat = ref(null as UniImageElement | null)\r\n\r\n  const getPropertyValues = () => {\r\n    data.minWidthActual = viewRef.value?.style.getPropertyValue('min-width') ?? ''\r\n    data.minWidthActualFlat = viewRefFlat.value?.style.getPropertyValue('min-width') ?? ''\r\n    data.minWidthActualText = textRef.value?.style.getPropertyValue('min-width') ?? ''\r\n    data.minWidthActualTextFlat = textRefFlat.value?.style.getPropertyValue('min-width') ?? ''\r\n    data.minWidthActualImage = imageRef.value?.style.getPropertyValue('min-width') ?? ''\r\n    data.minWidthActualImageFlat = imageRefFlat.value?.style.getPropertyValue('min-width') ?? ''\r\n  }\r\n\r\n\r\n  const changeMinWidth = (value : string) => {\r\n    data.minWidth = value\r\n    viewRef.value?.style.setProperty('min-width', value)\r\n    viewRefFlat.value?.style.setProperty('min-width', value)\r\n    textRef.value?.style.setProperty('min-width', value)\r\n    textRefFlat.value?.style.setProperty('min-width', value)\r\n    imageRef.value?.style.setProperty('min-width', value)\r\n    imageRefFlat.value?.style.setProperty('min-width', value)\r\n    // 使用 nextTick 确保样式已应用后再获取值\r\n    nextTick(() => {\r\n      getPropertyValues()\r\n    })\r\n  }\r\n\r\n  const radioChangeMinWidth = (index : number) => {\r\n    console.log('index', index)\r\n    const selectedItem = minWidthEnum.find((item) : boolean => item.value === index)\r\n    if (selectedItem != null) {\r\n      changeMinWidth(selectedItem.name)\r\n    }\r\n  }\r\n\r\n  const inputChangeMinWidth = (value : string) => {\r\n    changeMinWidth(value)\r\n  }\r\n\r\n  onReady(() => {\r\n    getPropertyValues()\r\n  })\r\n\r\n  defineExpose({\r\n    radioChangeMinWidth,\r\n    data\r\n  })\r\n</script>\r\n\r\n<style>\r\n  .common {\r\n    width: 50px;\r\n    height: 80px;\r\n    background-color: cyan;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  .common-dynamic {\n    width: 50px;\n    height: 80px;\n    background-color: cyan;\n    color: #1a1a1a;\n  }\r\n\r\n  .test-container {\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .test-item {\r\n    flex: 1;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .test-box {\r\n    width: 100%;\r\n    height: 80px;\r\n    background-color: gray;\r\n  }\r\n\r\n  .demo-box {\r\n    flex-direction: row;\r\n    margin-top: 10px;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .scroll-view-label {\n    font-size: 12px;\n    text-align: center;\n    color: #1a1a1a;\n  }\n\n  .cyan-label {\n    color: #1a1a1a;\n  }\n\n  .demo-box-native {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n    align-items: center;\n  }\n\n  .container-native {\n    background-color: cyan;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n"},"opacity":{"name":"## opacity\n","description":"\nopacity 属性指定了一个元素的不透明度。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nopacity: <alpha-value>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `1`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/opacity)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.opacity)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/opacity.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/opacity.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/opacity\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/opacity\n\n>示例\n```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n    <view style=\"flex-grow: 1;\">\r\n      <view class=\"demo-row\">\r\n        <view class=\"demo-item\">\r\n          <text>opacity: 1 (默认值)</text>\r\n          <view class=\"common\" style=\"opacity: 1;\"></view>\r\n        </view>\r\n        <view class=\"demo-item\">\r\n          <text>拍平</text>\r\n          <view class=\"common\" style=\"opacity: 1;\" flatten></view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"demo-row uni-common-mt\">\r\n        <view class=\"demo-item\">\r\n          <text>opacity: 0.8</text>\r\n          <view class=\"common\" style=\"opacity: 0.8;\"></view>\r\n        </view>\r\n        <view class=\"demo-item\">\r\n          <text>拍平</text>\r\n          <view class=\"common\" style=\"opacity: 0.8;\" flatten></view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"demo-row uni-common-mt\">\r\n        <view class=\"demo-item\">\r\n          <text>opacity: 0.5</text>\r\n          <view class=\"common\" style=\"opacity: 0.5;\"></view>\r\n        </view>\r\n        <view class=\"demo-item\">\r\n          <text>拍平</text>\r\n          <view class=\"common\" style=\"opacity: 0.5;\" flatten></view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"demo-row uni-common-mt\">\r\n        <view class=\"demo-item\">\r\n          <text>opacity: 0.2</text>\r\n          <view class=\"common\" style=\"opacity: 0.2;\"></view>\r\n        </view>\r\n        <view class=\"demo-item\">\r\n          <text>拍平</text>\r\n          <view class=\"common\" style=\"opacity: 0.2;\" flatten></view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"demo-row uni-common-mt\">\r\n        <view class=\"demo-item\">\r\n          <text>opacity: 0</text>\r\n          <view class=\"common\" style=\"opacity: 0;\"></view>\r\n        </view>\r\n        <view class=\"demo-item\">\r\n          <text>拍平</text>\r\n          <view class=\"common\" style=\"opacity: 0;\" flatten></view>\r\n        </view>\r\n      </view>\r\n\r\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\r\n\r\n      <view class=\"demo-row uni-common-mt\">\r\n        <view class=\"demo-item\">\r\n          <text>opacity: 0.5</text>\r\n          <scroll-view class=\"common\" style=\"opacity: 0.5;\"></scroll-view>\r\n        </view>\r\n        <view class=\"demo-item\">\r\n          <text>opacity: 0.2</text>\r\n          <scroll-view class=\"common\" style=\"opacity: 0.2;\"></scroll-view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt\">\r\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\r\n\r\n      <!-- 普通版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.opacity}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.opacityActual}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRef\" class=\"common test-view\" :style=\"{ opacity: data.opacity }\">\r\n              <text class=\"common-text\">view</text>\r\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.opacity}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.opacityActualText}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRef\" class=\"common test-text\" :style=\"{ opacity: data.opacity }\">text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.opacity}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.opacityActualImage}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRef\" class=\"common test-image\" :style=\"{ opacity: data.opacity }\" src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <!-- 拍平版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.opacity}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.opacityActualFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRefFlat\" class=\"common test-view-flatten\" :style=\"{ opacity: data.opacity }\" flatten>\r\n              <text class=\"common-text\">view</text>\r\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.opacity}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.opacityActualTextFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRefFlat\" class=\"common test-text-flatten\" :style=\"{ opacity: data.opacity }\" flatten>text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.opacity}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.opacityActualImageFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRefFlat\" class=\"common test-image-flatten\" :style=\"{ opacity: data.opacity }\" flatten src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt uni-common-mb\">\r\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\r\n        <enum-data :items=\"opacityEnum\" title=\"opacity 枚举值\" @change=\"radioChangeOpacity\" :compact=\"true\"></enum-data>\r\n        <input-data :defaultValue=\"data.opacity\" title=\"opacity 自定义值\" type=\"text\" @confirm=\"inputChangeOpacity\"></input-data>\r\n      </view>\r\n\r\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text>native-view组件: opacity: 0.5 和 opacity: 0.2</text>\n        <view class=\"demo-row uni-common-mt\">\n          <view class=\"demo-item\">\n            <text>opacity: 0.5</text>\n            <test-native-view class=\"common\" style=\"opacity: 0.5;\"></test-native-view>\r\n          </view>\r\n          <view class=\"demo-item\">\r\n            <text>opacity: 0.2</text>\r\n            <test-native-view class=\"common\" style=\"opacity: 0.2;\"></test-native-view>\r\n          </view>\r\n        </view>\n      </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n  const opacityEnum : ItemType[] = [\r\n    { value: 0, name: '' },\r\n    { value: 1, name: '0' },\r\n    { value: 2, name: '0.2' },\r\n    { value: 3, name: '0.5' },\r\n    { value: 4, name: '0.8' },\r\n    { value: 5, name: '1' }\r\n  ]\r\n\r\n  const data = reactive({\r\n    opacity: '1',\r\n    opacityActual: '',\r\n    opacityActualText: '',\r\n    opacityActualImage: '',\r\n    opacityActualFlat: '',\r\n    opacityActualTextFlat: '',\r\n    opacityActualImageFlat: ''\r\n  })\r\n  const viewRef = ref(null as UniElement | null)\r\n  const textRef = ref(null as UniTextElement | null)\r\n  const imageRef = ref(null as UniImageElement | null)\r\n  const viewRefFlat = ref(null as UniElement | null)\r\n  const textRefFlat = ref(null as UniTextElement | null)\r\n  const imageRefFlat = ref(null as UniImageElement | null)\r\n\r\n  const getPropertyValues = () => {\r\n    data.opacityActual = viewRef.value?.style.getPropertyValue('opacity') ?? ''\r\n    data.opacityActualFlat = viewRefFlat.value?.style.getPropertyValue('opacity') ?? ''\r\n    data.opacityActualText = textRef.value?.style.getPropertyValue('opacity') ?? ''\r\n    data.opacityActualTextFlat = textRefFlat.value?.style.getPropertyValue('opacity') ?? ''\r\n    data.opacityActualImage = imageRef.value?.style.getPropertyValue('opacity') ?? ''\r\n    data.opacityActualImageFlat = imageRefFlat.value?.style.getPropertyValue('opacity') ?? ''\r\n  }\r\n\r\n\r\n  const changeOpacity = (value : string) => {\r\n    data.opacity = value\r\n    viewRef.value?.style.setProperty('opacity', value)\r\n    viewRefFlat.value?.style.setProperty('opacity', value)\r\n    textRef.value?.style.setProperty('opacity', value)\r\n    textRefFlat.value?.style.setProperty('opacity', value)\r\n    imageRef.value?.style.setProperty('opacity', value)\r\n    imageRefFlat.value?.style.setProperty('opacity', value)\r\n    // 使用 nextTick 确保样式已应用后再获取值\r\n    nextTick(() => {\r\n      getPropertyValues()\r\n    })\r\n  }\r\n\r\n  const radioChangeOpacity = (index : number) => {\r\n    const selectedItem = opacityEnum.find((item) : boolean => item.value === index)\r\n    if (selectedItem != null) {\r\n      changeOpacity(selectedItem.name)\r\n    }\r\n  }\r\n\r\n  const inputChangeOpacity = (value : string) => {\r\n    changeOpacity(value)\r\n  }\r\n\r\n  onReady(() => {\r\n    getPropertyValues()\r\n  })\r\n\r\n  defineExpose({\r\n    radioChangeOpacity,\r\n    data\r\n  })\r\n</script>\r\n\r\n<style>\r\n  .demo-row {\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n  }\r\n\r\n  .demo-item {\r\n    flex: 1;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .common {\r\n    width: 80px;\r\n    height: 80px;\r\n    background-color: blue;\r\n  }\r\n\r\n  .common-text {\r\n    width: 50px;\r\n  }\r\n\r\n  .test-container {\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .test-item {\r\n    flex: 1;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .test-box {\r\n    width: 100%;\r\n    height: 80px;\r\n    background-color: gray;\r\n  }\r\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- number(0-1)\n"},"overflow":{"name":"## overflow\n","description":"\noverflow 是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\noverflow: [ visible | hidden | clip | scroll | auto ]{1,2};\n```\n","values":"\n### overflow 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| visible | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 暂时仅view组件支持visible，其他组件支持不支持 |\n| hidden | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 如果需要，内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。内容可以以编程的方式滚动（例如，通过设置 scrollLeft 等属性的值或 scrollTo() 方法）, 因此该元素仍然是一个滚动的容器。 |\n| scroll | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 如果需要，内容将被裁减以适应边距（padding）盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。 |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 取决于用户代理。如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。 |\n| clip | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 类似于 hidden，内容将以元素的边距（padding）盒进行裁剪。clip 和 hidden 之间的区别是 clip 关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。如果你希望开启一个新的格式化上下文，你可以使用 display: flow-root 来这样做。 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | hidden |\n\n **注意**：W3C 默认值为：visible","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/overflow)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.overflow)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/overflow/overflow.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/overflow/overflow.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/overflow/overflow\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/overflow/overflow\n\n>示例\n```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view style=\"flex:1;\">\r\n  <!-- #endif -->\r\n    <page-intro content=\"本页演示 overflow 样式：overflow:hidden 与 overflow:visible 下子元素超出时的裁剪与显示；子元素为 view（border 圆角/边框）、text、image 等，每组均提供拍平（flatten）版本对比。\"></page-intro>\r\n    <text style=\"font-size: 15px;\">overflow=hidden效果子元素是view border圆角</text>\r\n    <view class=\"backgroundview\">\r\n      <view class=\"box-hidden-border-radius\">\r\n        <view style=\"width: 50px; height: 150px; background-color: greenyellow;\"></view>\r\n      </view>\r\n    </view>\r\n    <text>拍平</text>\r\n    <view class=\"backgroundview\">\r\n      <view class=\"box-hidden-border-radius\" flatten>\r\n        <view style=\"width: 50px; height: 150px; background-color: greenyellow;\" flatten></view>\r\n      </view>\r\n    </view>\r\n\r\n    <text style=\"font-size: 15px;\">overflow=hidden效果 子元素是view border边框</text>\r\n    <view class=\"backgroundview\">\r\n      <view class=\"box-hidden-border-width\">\r\n        <view style=\"width: 50px; height: 150px; background-color: greenyellow;\"></view>\r\n      </view>\r\n    </view>\r\n    <text>拍平</text>\r\n    <view class=\"backgroundview\">\r\n      <view class=\"box-hidden-border-width\" flatten>\r\n        <view style=\"width: 50px; height: 150px; background-color: greenyellow;\" flatten></view>\r\n      </view>\r\n    </view>\r\n\r\n    <text style=\"font-size: 15px;\">overflow=visible效果 子元素是view border圆角</text>\r\n    <view class=\"backgroundview\">\r\n      <view class=\"box-visible-border-radius\">\r\n        <view style=\"width: 50px; height: 150px; background-color: greenyellow;\"></view>\r\n      </view>\r\n    </view>\r\n    <text>拍平</text>\r\n    <view class=\"backgroundview\">\r\n      <view class=\"box-visible-border-radius\" flatten>\r\n        <view style=\"width: 50px; height: 150px; background-color: greenyellow;\" flatten></view>\r\n      </view>\r\n    </view>\r\n\r\n    <text style=\"font-size: 15px;\">overflow=visible效果 子元素是view border边框</text>\r\n    <view class=\"backgroundview\">\r\n      <view class=\"box-visible-border-width\">\r\n        <view style=\"width: 50px; height: 150px; background-color: greenyellow;\"></view>\r\n      </view>\r\n    </view>\r\n    <text>拍平</text>\r\n    <view class=\"backgroundview\">\r\n      <view class=\"box-visible-border-width\" flatten>\r\n        <view style=\"width: 50px; height: 150px; background-color: greenyellow;\" flatten></view>\r\n      </view>\r\n    </view>\r\n\r\n    <view style=\"flex-grow: 1\">\r\n      <text style=\"font-size: 15px;\">overflow=hidden效果 子元素是text</text>\r\n      <view class=\"backgroundview\">\r\n        <view class=\"box-hidden-border-radius\">\r\n          <!-- 微信小程序 webview 模式使用 line-clamp 会截断文本显示省略号，skyline 模式正常 -->\r\n          <text\r\n            <!-- #ifdef VUE3-VAPOR && !MP -->\r\n              max-lines=1\r\n            <!-- #endif-->\r\n            class=\"text1\">ABCDEFG</text>\r\n        </view>\r\n      </view>\r\n      <text>拍平</text>\r\n      <view class=\"backgroundview\">\r\n        <view class=\"box-hidden-border-radius\" flatten>\r\n          <text\r\n          <!-- #ifdef VUE3-VAPOR && !MP -->\r\n            max-lines=1\r\n          <!-- #endif-->\r\n          class=\"text1\" flatten>ABCDEFG</text>\r\n        </view>\r\n      </view>\r\n\r\n      <text style=\"font-size: 15px;\">overflow=visible效果 子元素是text</text>\r\n      <view class=\"backgroundview\">\r\n        <view class=\"box-visible-border-radius\">\r\n          <text\r\n          <!-- #ifdef VUE3-VAPOR && !MP -->\r\n            max-lines=1\r\n          <!-- #endif-->\r\n          class=\"text1\">ABCDEFG</text>\r\n        </view>\r\n      </view>\r\n      <text>拍平</text>\r\n      <view class=\"backgroundview\">\r\n        <view class=\"box-visible-border-radius\" flatten>\r\n          <text\r\n          <!-- #ifdef VUE3-VAPOR && !MP -->\r\n            max-lines=1\r\n          <!-- #endif-->\r\n           class=\"text1\" flatten >ABCDEFG</text>\r\n        </view>\r\n      </view>\r\n\r\n      <text style=\"font-size: 15px;\">overflow=hidden效果 子元素是image</text>\r\n      <view class=\"backgroundview\">\r\n        <view class=\"box-hidden-border-radius\">\r\n          <image style=\"width: 150px; height: 150px;\" src=\"/static/test-image/logo.png\"></image>\r\n        </view>\r\n      </view>\r\n      <text>拍平</text>\r\n      <view class=\"backgroundview\">\r\n        <view class=\"box-hidden-border-radius\" flatten>\r\n          <image style=\"width: 150px; height: 150px;\" src=\"/static/test-image/logo.png\" flatten></image>\r\n        </view>\r\n      </view>\r\n\r\n      <text style=\"font-size: 15px;\">overflow=visible效果 子元素是image</text>\r\n      <view class=\"backgroundview\">\r\n        <view class=\"box-visible-border-radius\">\r\n          <image style=\"width: 150px; height: 150px;\" src=\"/static/test-image/logo.png\"></image>\r\n        </view>\r\n      </view>\r\n      <text>拍平</text>\r\n      <view class=\"backgroundview\">\r\n        <view class=\"box-visible-border-radius\" flatten>\r\n          <image style=\"width: 150px; height: 150px;\" src=\"/static/test-image/logo.png\" flatten></image>\r\n        </view>\r\n      </view>\r\n\r\n      <text style=\"font-size: 15px;\">overflow=visible效果 子元素是view 父是scroll-view</text>\r\n      <scroll-view class=\"backgroundview\">\r\n        <view class=\"box-visible-border-radius\">\r\n          <view style=\"width: 50px; height: 150px; background-color: greenyellow;\"></view>\r\n        </view>\r\n      </scroll-view>\r\n      <text>拍平</text>\r\n      <scroll-view class=\"backgroundview\">\r\n        <view class=\"box-visible-border-radius\" flatten>\r\n          <view style=\"width: 50px; height: 150px; background-color: greenyellow;\" flatten></view>\r\n        </view>\r\n      </scroll-view>\r\n\r\n      <text style=\"font-size: 15px;\">overflow=visible 设置阴影显示文字</text>\r\n      <view class=\"backgroundview\">\r\n        <view class=\"\" style=\"overflow: visible;width: 100px;height: 100px;background-color: green;box-shadow: 10px 10px #000;margin-top: 10px;\">\r\n          <text style=\"width:170px; background-color: greenyellow;\">文字文字文字文字文字</text>\r\n        </view>\r\n      </view>\r\n      <text>拍平</text>\r\n      <view class=\"backgroundview\">\r\n        <view class=\"\" style=\"overflow: visible;width: 100px;height: 100px;background-color: green;box-shadow: 10px 10px #000;margin-top: 10px;\"\n          <!-- #ifndef APP-ANDROID -->\n          flatten\n          <!-- #endif -->\n        >\r\n          <text style=\"width:170px; background-color: greenyellow;\" flatten>文字文字文字文字文字</text>\r\n        </view>\r\n      </view>\r\n\r\n      <text style=\"font-size: 15px;\">overflow=visible 子view完全超出范围</text>\r\n      <view class=\"backgroundview\">\r\n        <view class=\"box-visible-border-width\">\r\n          <view style=\"width: 50px; height: 50px; background-color: greenyellow;right: -70px;position: absolute;\"></view>\r\n        </view>\r\n      </view>\r\n      <text>拍平</text>\r\n      <view class=\"backgroundview\">\r\n        <view class=\"box-visible-border-width\" flatten>\r\n          <view style=\"width: 50px; height: 50px; background-color: greenyellow;right: -70px;position: absolute;\" flatten></view>\r\n        </view>\r\n      </view>\r\n\r\n      <text style=\"font-size: 15px;\">overflow=hidden 多层view嵌套裁剪</text>\r\n      <view class=\"backgroundview\">\r\n        <view class=\"box-visible-border-width\">\r\n          <view style=\"overflow: hidden; width: 100px; height: 100px;\">\r\n            <view style=\"width: 50px; height: 130px; background-color: greenyellow;position: absolute;\"></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n      <text>拍平</text>\r\n      <view class=\"backgroundview\">\r\n        <view class=\"box-visible-border-width\">\r\n          <view style=\"overflow: hidden; width: 100px; height: 100px;\">\r\n            <view style=\"width: 50px; height: 130px; background-color: greenyellow;position: absolute;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <text style=\"font-size: 15px;\">overflow=visible 多层view嵌套visible</text>\r\n      <view class=\"backgroundview\">\r\n        <view style=\"overflow: visible; flex-direction: row; background-color: green;\">\r\n      \t\t<view style=\"overflow: visible; width: 50px; height: 100px;\">\r\n      \t\t\t<view style=\"width: 50px; height: 130px; background-color: greenyellow;position: absolute;\"></view>\r\n      \t\t</view>\r\n          <view style=\"overflow: hidden; width: 50px; height: 100px;\"></view>\r\n        </view>\r\n      </view>\r\n      <text>拍平</text>\r\n      <view class=\"backgroundview\">\r\n        <view class=\"backgroundview\">\r\n          <view style=\"overflow: visible; flex-direction: row; background-color: green;\">\r\n        \t\t<view style=\"overflow: visible; width: 50px; height: 100px;\">\r\n        \t\t\t<view style=\"width: 50px; height: 130px; background-color: greenyellow;position: absolute;\" flatten></view>\r\n        \t\t</view>\r\n            <view style=\"overflow: hidden; width: 50px; height: 100px;\"\n              <!-- #ifndef APP-ANDROID -->\n              flatten\n              <!-- #endif -->\n            ></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n    </view>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n</script>\r\n\r\n<style>\r\n  .backgroundview {\r\n    width: 300px;\r\n    height: 200px;\r\n    background-color: white;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  .box-hidden-border-radius {\r\n    width: 100px;\r\n    height: 100px;\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    background-color: green;\r\n  }\r\n\r\n  .box-hidden-border-width {\r\n    width: 100px;\r\n    height: 100px;\r\n    border-width: 2px;\r\n    border-style: solid;\r\n    background-color: green;\r\n  }\r\n\r\n  .box-visible-border-radius {\r\n    width: 100px;\r\n    height: 100px;\r\n    border-radius: 20px;\r\n    overflow: visible;\r\n    background-color: green;\r\n  }\r\n\r\n  .box-visible-border-width {\r\n    width: 100px;\r\n    height: 100px;\r\n    border-width: 2px;\r\n    border-style: solid;\r\n    overflow: visible;\r\n    background-color: green;\r\n  }\r\n\r\n  .text1 {\r\n    font-size: 50px;\r\n    /* #ifndef VUE3-VAPOR */\r\n    lines: 1;\r\n    /* #endif */\r\n  }\r\n</style>\r\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"padding":{"name":"## padding\n","description":"\npadding CSS 简写属性控制元素所有四条边的内边距区域。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\npadding: [ <length> | <percentage> ]{1,4};\n```\n","values":"","defaultValue":"","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.padding)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/padding/padding.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/padding/padding.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/padding/padding\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/padding/padding\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>padding: 25px</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"padding: 25px;\">\n            <view class=\"inner-content\"></view>\n          </view>\n          <view class=\"common\" style=\"padding: 25px;\" flatten>\n            <view class=\"inner-content\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>padding: 5%</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"padding: 5%;\">\n            <view class=\"inner-content\"></view>\n          </view>\n          <view class=\"common\" style=\"padding: 5%;\" flatten>\n            <view class=\"inner-content\"></view>\n          </view>\n        </view>\n      </view>\n      <view>\n        <text>text组件: padding: 25px</text>\n        <view class=\"demo-box\">\n          <text class=\"text-padding\" style=\"padding: 25px;\">文本</text>\n          <text class=\"text-padding\" style=\"padding: 25px;\" flatten>文本</text>\n        </view>\n      </view>\n      <view>\n        <text>text组件: padding: 5%</text>\n        <view class=\"demo-box\">\n          <text class=\"text-padding\" style=\"padding: 5%;\">文本</text>\n          <text class=\"text-padding\" style=\"padding: 5%;\" flatten>文本</text>\n        </view>\n      </view>\n      <view>\n        <text>image组件: padding: 25px</text>\n        <view class=\"demo-box\">\n          <image class=\"image-padding\" style=\"padding: 25px;\" src=\"/static/test-image/logo.png\"></image>\n          <image class=\"image-padding\" style=\"padding: 25px;\" src=\"/static/test-image/logo.png\" flatten></image>\n        </view>\n      </view>\n      <view>\n        <text>image组件: padding: 5%</text>\n        <view class=\"demo-box\">\n          <image class=\"image-padding\" style=\"padding: 5%;\" src=\"/static/test-image/logo.png\"></image>\n          <image class=\"image-padding\" style=\"padding: 5%;\" src=\"/static/test-image/logo.png\" flatten></image>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.padding}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ padding: data.padding }\">\n              <view style=\"flex-grow: 1;background-color: cyan;\">\n                <text class=\"common-text\">view</text>\n              </view>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.padding}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-dynamic common-text test-text\" :style=\"{ padding: data.padding }\">text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.padding}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ padding: data.padding }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.padding}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ padding: data.padding }\" flatten>\n              <view style=\"flex-grow: 1;background-color: cyan;\">\n                <text class=\"common-text\">view</text>\n              </view>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.padding}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-dynamic common-text test-text-flatten\" :style=\"{ padding: data.padding }\" flatten>text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.padding}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ padding: data.padding }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件 padding </text>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-info\">设置值: {{data.padding}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingActualScrollView}}</text>\n          <view class=\"test-box\" style=\"height: 150px;\">\n            <scroll-view ref=\"scrollViewRef\" class=\"common-scroll-view\" :style=\"{ padding: data.padding }\">\n              <view class=\"scroll-view-content\">\n                <text class=\"common-text\">scroll-view1</text>\n              </view>\n              <view class=\"scroll-view-content\">\n                <text class=\"common-text\">scroll-view2</text>\n              </view>\n              <view class=\"scroll-view-content\">\n                <text class=\"common-text\">scroll-view3</text>\n              </view>\n            </scroll-view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"paddingEnum\" title=\"padding 枚举值\" @change=\"radioChangePadding\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.padding\" title=\"padding 自定义值\" type=\"text\" @confirm=\"inputChangePadding\"></input-data>\n      </view>\n    </view>\n\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    padding: '20px',\n    paddingActual: '',\n    paddingActualText: '',\n    paddingActualImage: '',\n    paddingActualFlat: '',\n    paddingActualTextFlat: '',\n    paddingActualImageFlat: '',\n    paddingActualScrollView: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n  const scrollViewRef = ref(null as UniElement | null)\n\n  const paddingEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '0px' },\n    { value: 3, name: '10px' },\n    { value: 4, name: '0%' },\n    { value: 5, name: '5%' }\n  ]\n\n  const getPropertyValues = () => {\n    data.paddingActual = viewRef.value?.style.getPropertyValue('padding') ?? ''\n    data.paddingActualFlat = viewRefFlat.value?.style.getPropertyValue('padding') ?? ''\n    data.paddingActualText = textRef.value?.style.getPropertyValue('padding') ?? ''\n    data.paddingActualTextFlat = textRefFlat.value?.style.getPropertyValue('padding') ?? ''\n    data.paddingActualImage = imageRef.value?.style.getPropertyValue('padding') ?? ''\n    data.paddingActualImageFlat = imageRefFlat.value?.style.getPropertyValue('padding') ?? ''\n    data.paddingActualScrollView = scrollViewRef.value?.style.getPropertyValue('padding') ?? ''\n  }\n\n\n  const changePadding = (value: string) => {\n    data.padding = value\n    viewRef.value?.style.setProperty('padding', value)\n    viewRefFlat.value?.style.setProperty('padding', value)\n    textRef.value?.style.setProperty('padding', value)\n    textRefFlat.value?.style.setProperty('padding', value)\n    imageRef.value?.style.setProperty('padding', value)\n    imageRefFlat.value?.style.setProperty('padding', value)\n    scrollViewRef.value?.style.setProperty('padding', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangePadding = (index: number) => {\n    const selectedItem = paddingEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changePadding(selectedItem.name)\n    }\n  }\n\n  const inputChangePadding = (value: string) => {\n    changePadding(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangePadding,\n    data\n  })\n</script>\n\n<style>\n  .common {\n    flex:1;\n    margin:0 10px;\n    height: 100px;\n    background-color: gray;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .inner-content {\n    flex-grow: 1;\n    background-color: cyan;\n  }\n\n  .common-native {\n    flex:1;\n    height: 100px;\n    background-color: cyan;\n    border:red solid 1px;\n  }\n\n  .common-dynamic {\n    height: 80px;\n    background-color: gray;\n  }\n\n  .common-image {\n    width: 80px;\n    height: 80px;\n    background-color: gray;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 80px;\n    background-color: lightgray;\n  }\n\n  .text-padding {\n    flex:1;\n    margin:0 10px;\n    height: 100px;\n    background-color: gray;\n    font-size: 16px;\n    color: black;\n  }\n\n  .image-padding {\n    width: 100px;\n    height: 100px;\n    background-color: gray;\n  }\n\n  .common-scroll-view {\n    height: 100px;\n    border:blue solid 1px;\n  }\n\n  .scroll-view-content {\n    width: 100%;\n    height: 100px;\n    align-items: center;\n    justify-content: center;\n    border: cyan solid 2px;\n  }\n\n  .common-text {\n    font-size: 12px;\n    color: #1a1a1a;\n  }\n\n  .native-view-container-large {\n    width: 120px;\n    height: 120px;\n    background-color: #e0e0e0;\n    border: 2px solid #999;\n    margin: 0 10px;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .cyan {\n    background-color: cyan;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"padding-bottom":{"name":"## padding-bottom\n","description":"\nCSS 属性 padding-bottom 是指一个元素在内边距区域（padding area）中下方的高度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\npadding-bottom: <length> | <percentage>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-bottom)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.padding.padding-bottom)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/padding/padding-bottom.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/padding/padding-bottom.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/padding/padding-bottom\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/padding/padding-bottom\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>padding-bottom: 25px</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"padding-bottom: 25px;\">\n            <view class=\"inner-content\"></view>\n          </view>\n          <view class=\"common\" style=\"padding-bottom: 25px;\" flatten>\n            <view class=\"inner-content\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>padding-bottom: 10%</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"padding-bottom: 10%;\">\n            <view class=\"inner-content\"></view>\n          </view>\n          <view class=\"common\" style=\"padding-bottom: 10%;\" flatten>\n            <view class=\"inner-content\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n      </view>\n\n      <view>\n        <text class=\"uni-subtitle-text\">padding-bottom: 10% 和 padding-bottom: 30px</text>\n        <view class=\"demo-box\">\n          <scroll-view class=\"common\" style=\"padding-bottom: 10%;\">\n            <view class=\"inner-content\"></view>\n          </scroll-view>\n          <scroll-view class=\"common\" style=\"padding-bottom: 30px;\">\n            <view class=\"inner-content\"></view>\n          </scroll-view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.paddingBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingBottomActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-view test-view\" :style=\"{ paddingBottom: data.paddingBottom }\">\n              <view style=\"flex-grow: 1;background-color: cyan;\"><text class=\"cyan-text\">view</text></view>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.paddingBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingBottomActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-text test-text\" :style=\"{ paddingBottom: data.paddingBottom }\">当前为text组件当前为text组件</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.paddingBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingBottomActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ paddingBottom: data.paddingBottom }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.paddingBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingBottomActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-view test-view-flatten\" :style=\"{ paddingBottom: data.paddingBottom }\" flatten>\n              <view style=\"flex-grow: 1;background-color: cyan;\"><text class=\"cyan-text\">view</text></view>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.paddingBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingBottomActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-text test-text-flatten\" :style=\"{ paddingBottom: data.paddingBottom }\" flatten>当前为text组件当前为text组件</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.paddingBottom}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingBottomActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ paddingBottom: data.paddingBottom }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"paddingBottomEnum\" title=\"padding-bottom 枚举值\" @change=\"radioChangePaddingBottom\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.paddingBottom\" title=\"padding-bottom 自定义值\" type=\"text\" @confirm=\"inputChangePaddingBottom\"></input-data>\n      </view>\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    paddingBottom: '25px',\n    paddingBottomActual: '',\n    paddingBottomActualText: '',\n    paddingBottomActualImage: '',\n    paddingBottomActualFlat: '',\n    paddingBottomActualTextFlat: '',\n    paddingBottomActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const paddingBottomEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '0px' },\n    { value: 3, name: '40px' },\n    { value: 4, name: '0%' },\n    { value: 5, name: '20%' }\n  ]\n\n  const getPropertyValues = () => {\n    data.paddingBottomActual = viewRef.value?.style.getPropertyValue('padding-bottom') ?? ''\n    data.paddingBottomActualFlat = viewRefFlat.value?.style.getPropertyValue('padding-bottom') ?? ''\n    data.paddingBottomActualText = textRef.value?.style.getPropertyValue('padding-bottom') ?? ''\n    data.paddingBottomActualTextFlat = textRefFlat.value?.style.getPropertyValue('padding-bottom') ?? ''\n    data.paddingBottomActualImage = imageRef.value?.style.getPropertyValue('padding-bottom') ?? ''\n    data.paddingBottomActualImageFlat = imageRefFlat.value?.style.getPropertyValue('padding-bottom') ?? ''\n  }\n\n\n  const changePaddingBottom = (value: string) => {\n    data.paddingBottom = value\n    viewRef.value?.style.setProperty('padding-bottom', value)\n    viewRefFlat.value?.style.setProperty('padding-bottom', value)\n    textRef.value?.style.setProperty('padding-bottom', value)\n    textRefFlat.value?.style.setProperty('padding-bottom', value)\n    imageRef.value?.style.setProperty('padding-bottom', value)\n    imageRefFlat.value?.style.setProperty('padding-bottom', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangePaddingBottom = (index: number) => {\n    const selectedItem = paddingBottomEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changePaddingBottom(selectedItem.name)\n    }\n  }\n\n  const inputChangePaddingBottom = (value: string) => {\n    changePaddingBottom(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangePaddingBottom,\n    data\n  })\n</script>\n\n<style>\n  .common {\n    flex:1;\n    margin:0 10px;\n    height: 100px;\n    background-color: gray;\n  }\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n  .inner-content {\n    flex-grow: 1;\n    background-color: cyan;\n  }\n\n  .cyan-text {\n    color: #1a1a1a;\n  }\n\n  .common-view {\n    height: 80px;\n    background-color: gray;\n  }\n\n  .common-text {\n    /* 为了加强视觉效果 */\n    min-height: 40px;\n    background-color: gray;\n  }\n\n  .common-image {\n    width: 80px;\n    height: 80px;\n    background-color: gray;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 80px;\n    background-color: lightgray;\n  }\n\n  .native-view-container-large {\n    width: 120px;\n    height: 120px;\n    background-color: #e0e0e0;\n    border: 2px solid #999;\n    margin: 0 10px;\n    flex-direction: column;\n    justify-content: flex-end;\n  }\n\n  .native-view-padding-large {\n    width: 100%;\n    background-color: cyan;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"padding-left":{"name":"## padding-left\n","description":"\nCSS 属性 padding-left 是指一个元素在内边距区域（padding area）中左边的宽度。内边距（padding）是指一个元素的内容和边框之间的区域。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\npadding-left: <length> | <percentage>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-left)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.padding.padding-left)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/padding/padding-left.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/padding/padding-left.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/padding/padding-left\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/padding/padding-left\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>padding-left: 25px</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"padding-left: 25px;\">\n            <view class=\"inner-content\"></view>\n          </view>\n          <view class=\"common\" style=\"padding-left: 25px;\" flatten>\n            <view class=\"inner-content\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>padding-left: 10%</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"padding-left: 10%;\">\n            <view class=\"inner-content\"></view>\n          </view>\n          <view class=\"common\" style=\"padding-left: 10%;\" flatten>\n            <view class=\"inner-content\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n      </view>\n\n      <view>\n        <text class=\"uni-subtitle-text\">padding-left: 10% 和 padding-left: 30px</text>\n        <view class=\"demo-box\">\n          <scroll-view class=\"common\" style=\"padding-left: 10%;\">\n            <view class=\"inner-content\"></view>\n          </scroll-view>\n          <scroll-view class=\"common\" style=\"padding-left: 30px;\">\n            <view class=\"inner-content\"></view>\n          </scroll-view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.paddingLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingLeftActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ paddingLeft: data.paddingLeft }\">\n              <view style=\"flex-grow: 1;background-color: cyan;\"><text class=\"cyan-text\">view</text></view>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.paddingLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingLeftActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-dynamic test-text\" :style=\"{ paddingLeft: data.paddingLeft }\">text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.paddingLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingLeftActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ paddingLeft: data.paddingLeft }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.paddingLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingLeftActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ paddingLeft: data.paddingLeft }\" flatten>\n              <view style=\"flex-grow: 1;background-color: cyan;\"><text class=\"cyan-text\">view</text></view>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.paddingLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingLeftActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-dynamic test-text-flatten\" :style=\"{ paddingLeft: data.paddingLeft }\" flatten>text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.paddingLeft}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingLeftActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ paddingLeft: data.paddingLeft }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"paddingLeftEnum\" title=\"padding-left 枚举值\" @change=\"radioChangePaddingLeft\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.paddingLeft\" title=\"padding-left 自定义值\" type=\"text\" @confirm=\"inputChangePaddingLeft\"></input-data>\n      </view>\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    paddingLeft: '25px',\n    paddingLeftActual: '',\n    paddingLeftActualText: '',\n    paddingLeftActualImage: '',\n    paddingLeftActualFlat: '',\n    paddingLeftActualTextFlat: '',\n    paddingLeftActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const paddingLeftEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '0px' },\n    { value: 3, name: '20px' },\n    { value: 4, name: '0%' },\n    { value: 5, name: '10%' }\n  ]\n\n  const getPropertyValues = () => {\n    data.paddingLeftActual = viewRef.value?.style.getPropertyValue('padding-left') ?? ''\n    data.paddingLeftActualFlat = viewRefFlat.value?.style.getPropertyValue('padding-left') ?? ''\n    data.paddingLeftActualText = textRef.value?.style.getPropertyValue('padding-left') ?? ''\n    data.paddingLeftActualTextFlat = textRefFlat.value?.style.getPropertyValue('padding-left') ?? ''\n    data.paddingLeftActualImage = imageRef.value?.style.getPropertyValue('padding-left') ?? ''\n    data.paddingLeftActualImageFlat = imageRefFlat.value?.style.getPropertyValue('padding-left') ?? ''\n  }\n\n\n  const changePaddingLeft = (value: string) => {\n    data.paddingLeft = value\n    viewRef.value?.style.setProperty('padding-left', value)\n    viewRefFlat.value?.style.setProperty('padding-left', value)\n    textRef.value?.style.setProperty('padding-left', value)\n    textRefFlat.value?.style.setProperty('padding-left', value)\n    imageRef.value?.style.setProperty('padding-left', value)\n    imageRefFlat.value?.style.setProperty('padding-left', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangePaddingLeft = (index: number) => {\n    const selectedItem = paddingLeftEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changePaddingLeft(selectedItem.name)\n    }\n  }\n\n  const inputChangePaddingLeft = (value: string) => {\n    changePaddingLeft(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangePaddingLeft,\n    data\n  })\n</script>\n\n<style>\n  .common {\n    flex:1;\n    margin:0 10px;\n    height: 100px;\n    background-color: gray;\n  }\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n  .inner-content {\n    flex-grow: 1;\n    background-color: cyan;\n  }\n\n  .cyan-text {\n    color: #1a1a1a;\n  }\n\n  .common-dynamic {\n    height: 80px;\n    background-color: gray;\n  }\n\n  .common-image {\n    width: 80px;\n    height: 80px;\n    background-color: gray;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 80px;\n    background-color: lightgray;\n  }\n\n  .native-view-container-large {\n    width: 120px;\n    height: 120px;\n    background-color: #e0e0e0;\n    border: 2px solid #999;\n    margin: 0 10px;\n    align-items: flex-start;\n  }\n\n  .native-view-padding-large {\n    height: 100%;\n    background-color: cyan;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"padding-right":{"name":"## padding-right\n","description":"\nCSS 属性 padding-right 是指一个元素在内边距区域（padding area）中右边的宽度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\npadding-right: <length> | <percentage>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-right)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.padding.padding-right)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/padding/padding-right.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/padding/padding-right.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/padding/padding-right\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/padding/padding-right\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>padding-right: 25px</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"padding-right: 25px;\">\n            <view class=\"inner-content\"></view>\n          </view>\n          <view class=\"common\" style=\"padding-right: 25px;\" flatten>\n            <view class=\"inner-content\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>padding-right: 10%</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"padding-right: 10%;\">\n            <view class=\"inner-content\"></view>\n          </view>\n          <view class=\"common\" style=\"padding-right: 10%;\" flatten>\n            <view class=\"inner-content\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n      </view>\n\n      <view>\n        <text class=\"uni-subtitle-text\">padding-right: 10% 和 padding-right: 30px</text>\n        <view class=\"demo-box\">\n          <scroll-view class=\"common\" style=\"padding-right: 10%;\">\n            <view class=\"inner-content\"></view>\n          </scroll-view>\n          <scroll-view class=\"common\" style=\"padding-right: 30px;\">\n            <view class=\"inner-content\"></view>\n          </scroll-view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.paddingRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingRightActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-view test-view\" :style=\"{ paddingRight: data.paddingRight }\">\n              <view style=\"flex-grow: 1;background-color: cyan;\"><text class=\"cyan-text\">view</text></view>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.paddingRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingRightActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-text test-text\" :style=\"{ paddingRight: data.paddingRight }\">当前为text组件</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.paddingRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingRightActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ paddingRight: data.paddingRight }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.paddingRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingRightActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-view test-view-flatten\" :style=\"{ paddingRight: data.paddingRight }\" flatten>\n              <view style=\"flex-grow: 1;background-color: cyan;\"><text class=\"cyan-text\">view</text></view>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.paddingRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingRightActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-text test-text-flatten\" :style=\"{ paddingRight: data.paddingRight }\" flatten>当前为text组件</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.paddingRight}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingRightActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ paddingRight: data.paddingRight }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"paddingRightEnum\" title=\"padding-right 枚举值\" @change=\"radioChangePaddingRight\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.paddingRight\" title=\"padding-right 自定义值\" type=\"text\" @confirm=\"inputChangePaddingRight\"></input-data>\n      </view>\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    paddingRight: '25px',\n    paddingRightActual: '',\n    paddingRightActualText: '',\n    paddingRightActualImage: '',\n    paddingRightActualFlat: '',\n    paddingRightActualTextFlat: '',\n    paddingRightActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const paddingRightEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '0px' },\n    { value: 3, name: '20px' },\n    { value: 4, name: '0%' },\n    { value: 5, name: '10%' }\n  ]\n\n  const getPropertyValues = () => {\n    data.paddingRightActual = viewRef.value?.style.getPropertyValue('padding-right') ?? ''\n    data.paddingRightActualFlat = viewRefFlat.value?.style.getPropertyValue('padding-right') ?? ''\n    data.paddingRightActualText = textRef.value?.style.getPropertyValue('padding-right') ?? ''\n    data.paddingRightActualTextFlat = textRefFlat.value?.style.getPropertyValue('padding-right') ?? ''\n    data.paddingRightActualImage = imageRef.value?.style.getPropertyValue('padding-right') ?? ''\n    data.paddingRightActualImageFlat = imageRefFlat.value?.style.getPropertyValue('padding-right') ?? ''\n  }\n\n\n  const changePaddingRight = (value: string) => {\n    data.paddingRight = value\n    viewRef.value?.style.setProperty('padding-right', value)\n    viewRefFlat.value?.style.setProperty('padding-right', value)\n    textRef.value?.style.setProperty('padding-right', value)\n    textRefFlat.value?.style.setProperty('padding-right', value)\n    imageRef.value?.style.setProperty('padding-right', value)\n    imageRefFlat.value?.style.setProperty('padding-right', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangePaddingRight = (index: number) => {\n    const selectedItem = paddingRightEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changePaddingRight(selectedItem.name)\n    }\n  }\n\n  const inputChangePaddingRight = (value: string) => {\n    changePaddingRight(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangePaddingRight,\n    data\n  })\n</script>\n\n<style>\n  .common {\n    flex:1;\n    margin:0 10px;\n    height: 100px;\n    background-color: gray;\n  }\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n  .inner-content {\n    flex-grow: 1;\n    background-color: cyan;\n  }\n\n  .cyan-text {\n    color: #1a1a1a;\n  }\n\n  .common-view {\n    height: 80px;\n    background-color: gray;\n  }\n\n  .common-text {\n    height: 80px;\n    background-color: gray;\n    /* 为了加强视觉效果 */\n    max-width: 100px;\n  }\n\n  .common-image {\n    width: 80px;\n    height: 80px;\n    background-color: gray;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 100px;\n    background-color: lightgray;\n  }\n\n  .native-view-container-large {\n    width: 120px;\n    height: 120px;\n    background-color: #e0e0e0;\n    border: 2px solid #999;\n    margin: 0 10px;\n    flex-direction: row;\n    justify-content: flex-end;\n  }\n\n  .native-view-padding-large {\n    height: 100%;\n    background-color: cyan;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"padding-top":{"name":"## padding-top\n","description":"\nCSS 属性 padding-top 是指一个元素在内边距区域（padding area）中上方的高度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\npadding-top: <length> | <percentage>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-top)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.padding.padding-top)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/padding/padding-top.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/padding/padding-top.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/padding/padding-top\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/padding/padding-top\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n      <view>\n        <text>padding-top: 25px</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"padding-top: 25px;\">\n            <view class=\"inner-content\"></view>\n          </view>\n          <view class=\"common\" style=\"padding-top: 25px;\" flatten>\n            <view class=\"inner-content\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view>\n        <text>padding-top: 10%</text>\n        <view class=\"demo-box\">\n          <view class=\"common\" style=\"padding-top: 10%;\">\n            <view class=\"inner-content\"></view>\n          </view>\n          <view class=\"common\" style=\"padding-top: 10%;\" flatten>\n            <view class=\"inner-content\"></view>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">scroll-view 组件</text>\n      </view>\n\n      <view>\n        <text class=\"uni-subtitle-text\">padding-top: 10% 和 padding-top: 30px</text>\n        <view class=\"demo-box\">\n          <scroll-view class=\"common\" style=\"padding-top: 10%;\">\n            <view class=\"inner-content\"></view>\n          </scroll-view>\n          <scroll-view class=\"common\" style=\"padding-top: 30px;\">\n            <view class=\"inner-content\"></view>\n          </scroll-view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <!-- 普通版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.paddingTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingTopActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ paddingTop: data.paddingTop }\">\n              <view style=\"flex-grow: 1;background-color: cyan;\"><text class=\"cyan-text\">view</text></view>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.paddingTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingTopActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common-dynamic test-text\" :style=\"{ paddingTop: data.paddingTop }\">text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.paddingTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingTopActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRef\" class=\"common-image test-image\" :style=\"{ paddingTop: data.paddingTop }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <!-- 拍平版本 -->\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.paddingTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingTopActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefFlat\" class=\"common-dynamic test-view-flatten\" :style=\"{ paddingTop: data.paddingTop }\" flatten>\n              <view style=\"flex-grow: 1;background-color: cyan;\"><text class=\"cyan-text\">view</text></view>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.paddingTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingTopActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common-dynamic test-text-flatten\" :style=\"{ paddingTop: data.paddingTop }\" flatten>text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.paddingTop}}</text>\n          <text class=\"uni-info\">获取值: {{data.paddingTopActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefFlat\" class=\"common-image test-image-flatten\" :style=\"{ paddingTop: data.paddingTop }\" flatten src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"paddingTopEnum\" title=\"padding-top 枚举值\" @change=\"radioChangePaddingTop\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.paddingTop\" title=\"padding-top 自定义值\" type=\"text\" @confirm=\"inputChangePaddingTop\"></input-data>\n      </view>\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    paddingTop: '25px',\n    paddingTopActual: '',\n    paddingTopActualText: '',\n    paddingTopActualImage: '',\n    paddingTopActualFlat: '',\n    paddingTopActualTextFlat: '',\n    paddingTopActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  const paddingTopEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '0px' },\n    { value: 3, name: '20px' },\n    { value: 4, name: '0%' },\n    { value: 5, name: '10%' }\n  ]\n\n  const getPropertyValues = () => {\n    data.paddingTopActual = viewRef.value?.style.getPropertyValue('padding-top') ?? ''\n    data.paddingTopActualFlat = viewRefFlat.value?.style.getPropertyValue('padding-top') ?? ''\n    data.paddingTopActualText = textRef.value?.style.getPropertyValue('padding-top') ?? ''\n    data.paddingTopActualTextFlat = textRefFlat.value?.style.getPropertyValue('padding-top') ?? ''\n    data.paddingTopActualImage = imageRef.value?.style.getPropertyValue('padding-top') ?? ''\n    data.paddingTopActualImageFlat = imageRefFlat.value?.style.getPropertyValue('padding-top') ?? ''\n  }\n\n\n  const changePaddingTop = (value: string) => {\n    data.paddingTop = value\n    viewRef.value?.style.setProperty('padding-top', value)\n    viewRefFlat.value?.style.setProperty('padding-top', value)\n    textRef.value?.style.setProperty('padding-top', value)\n    textRefFlat.value?.style.setProperty('padding-top', value)\n    imageRef.value?.style.setProperty('padding-top', value)\n    imageRefFlat.value?.style.setProperty('padding-top', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangePaddingTop = (index: number) => {\n    const selectedItem = paddingTopEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changePaddingTop(selectedItem.name)\n    }\n  }\n\n  const inputChangePaddingTop = (value: string) => {\n    changePaddingTop(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangePaddingTop,\n    data\n  })\n</script>\n\n<style>\n  .common {\n    flex:1;\n    margin:0 10px;\n    height: 100px;\n    background-color: gray;\n  }\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n  .inner-content {\n    flex-grow: 1;\n    background-color: cyan;\n  }\n\n  .cyan-text {\n    color: #1a1a1a;\n  }\n\n  .common-dynamic {\n    height: 80px;\n    background-color: gray;\n  }\n\n  .common-image {\n    width: 80px;\n    height: 80px;\n    background-color: gray;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 80px;\n    background-color: lightgray;\n  }\n\n  .native-view-container-large {\n    width: 120px;\n    height: 120px;\n    background-color: #e0e0e0;\n    border: 2px solid #999;\n    margin: 0 10px;\n    align-items: flex-start;\n  }\n\n  .native-view-padding-large {\n    width: 100%;\n    background-color: cyan;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"pointer-events":{"name":"## pointer-events\n","description":"\npointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\npointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit;\n```\n","values":"\n### pointer-events 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 与pointer-events属性未指定时的表现效果相同，对于 SVG 内容，该值与visiblePainted效果相同 |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素永远不会成为鼠标事件的target (en-US)。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。 |\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/pointer-events)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.pointer-events)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/pointer-events/pointer-events.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/pointer-events/pointer-events.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/pointer-events/pointer-events\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/pointer-events/pointer-events\n\n>示例\n```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\r\n    <view class=\"pointer-page uni-theme-root\">\n      <page-intro content=\"本页演示 pointer-events：通过开关控制父 view、遮罩层、text、image 的 pointer-events（auto/none），观察点击是否穿透或响应；点击可修改 view/text/image 宽度，用于验证事件是否命中目标。\"></page-intro>\r\n      <boolean-data :defaultValue=\"true\" title=\"控制父视图pointer-events打开时可以点击\"\n        @change=\"onChange1\"></boolean-data>\n      <view class=\"container\" :style=\"{ 'pointer-events': pointerEvents1 }\">\r\n        <text class=\"text\">点击修改宽度</text>\r\n        <view class=\"base-style transition-width\" id=\"widthOrHeight\" @click=\"changeWidthOrHeight\"></view>\r\n      </view>\r\n      <boolean-data :defaultValue=\"true\" title=\"控制遮罩层pointer-events关闭时可以点击\"\n        @change=\"onChange2\"></boolean-data>\n      <view class=\"container\">\r\n        <text class=\"text\">点击修改宽度(递增)</text>\r\n        <view class=\"width-progress transition-width\" id=\"widthProgress\" @click=\"changeWidthProgress\"></view>\r\n        <view class=\"mask\" :style=\"{ 'pointer-events': pointerEvents2 }\"></view>\r\n      </view>\r\n      <boolean-data :defaultValue=\"true\" title=\"控制text组件pointer-events打开时可以点击\"\n        @change=\"onChange3\"></boolean-data>\n      <view class=\"container\" :style=\"{ 'pointer-events': pointerEvents3 }\">\r\n        <text class=\"text\">点击修改宽度</text>\r\n        <text class=\"text-pointer transition-width\" id=\"textPointer\" @click=\"changeTextWidth\">测试文本</text>\r\n      </view>\r\n      <boolean-data :defaultValue=\"true\" title=\"控制image组件pointer-events打开时可以点击\"\n        @change=\"onChange4\"></boolean-data>\n      <view class=\"container\" :style=\"{ 'pointer-events': pointerEvents4 }\">\r\n        <text class=\"text\">点击修改宽度</text>\r\n        <image class=\"image-pointer transition-width\" id=\"imagePointer\" @click=\"changeImageWidth\" src=\"/static/test-image/logo.png\"></image>\r\n      </view>\r\n    </view>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n\r\n  let isTranstionWidthOrHeight = false\r\n  let widthOrHeight: UniElement | null = null\r\n  let widthProgress: UniElement | null = null\r\n  let textPointer: UniElement | null = null\r\n  let imagePointer: UniElement | null = null\r\n  let progressWidth = 200\r\n  let textWidth = 200\r\n  let imageWidth = 200\r\n  let isTextWidth = false\r\n  let isImageWidth = false\r\n  const pointerEvents1 = ref('auto')\r\n  const pointerEvents2 = ref('auto')\r\n  const pointerEvents3 = ref('auto')\r\n  const pointerEvents4 = ref('auto')\r\n\r\n  onReady(() => {\r\n    widthOrHeight = uni.getElementById(\"widthOrHeight\")\r\n    widthProgress = uni.getElementById(\"widthProgress\")\r\n    textPointer = uni.getElementById(\"textPointer\")\r\n    imagePointer = uni.getElementById(\"imagePointer\")\r\n  })\r\n\r\n  const changeWidthOrHeight = () => {\r\n    widthOrHeight?.style?.setProperty(\"width\", isTranstionWidthOrHeight\r\n      ? '200px'\r\n      : '300px')\r\n    isTranstionWidthOrHeight = !isTranstionWidthOrHeight\r\n  }\r\n\r\n  const changeWidthProgress = () => {\r\n    progressWidth += 20\r\n    widthProgress?.style?.setProperty(\"width\", progressWidth + 'px')\r\n  }\r\n\r\n  const onChange1 = (value : boolean) => {\n    pointerEvents1.value = value ? 'auto' : 'none'\n  }\n\n  const onChange2 = (value : boolean) => {\n    pointerEvents2.value = value ? 'auto' : 'none'\n  }\r\n\r\n  const changeTextWidth = () => {\r\n    textPointer?.style?.setProperty(\"width\", isTextWidth\r\n      ? '200px'\r\n      : '300px')\r\n    isTextWidth = !isTextWidth\r\n  }\r\n\r\n  const changeImageWidth = () => {\r\n    imagePointer?.style?.setProperty(\"width\", isImageWidth\r\n      ? '200px'\r\n      : '300px')\r\n    isImageWidth = !isImageWidth\r\n  }\r\n\r\n  const onChange3 = (value : boolean) => {\n    pointerEvents3.value = value ? 'auto' : 'none'\n  }\n\n  const onChange4 = (value : boolean) => {\n    pointerEvents4.value = value ? 'auto' : 'none'\n  }\n</script>\r\n\r\n<style>\n  .container1 {\r\n    margin: 7px 0px 7px 7px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n  }\r\n\r\n  .container {\n    margin: 7px;\n    background-color: var(--list-background-color, #ffffff);\n  }\r\n\r\n  .text {\n    margin-top: 10px;\n    margin-bottom: 16px;\n    color: var(--text-color, #333333);\n  }\n\n  .switch-label {\n    color: var(--text-color, #333333);\n  }\r\n\r\n  .base-style {\r\n    width: 200px;\r\n    height: 200px;\r\n    background-color: brown;\r\n  }\r\n\r\n  .width-progress {\r\n    width: 200px;\r\n    height: 200px;\r\n    background-color: brown;\r\n  }\r\n\r\n  .transition-width {\r\n    transition-property: width;\r\n    transition-duration: 1s;\r\n  }\r\n\r\n  .mask {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 200px;\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n  }\r\n\r\n  .text-pointer {\r\n    width: 200px;\r\n    height: 200px;\r\n    background-color: brown;\r\n    font-size: 16px;\r\n    color: white;\r\n  }\r\n\r\n  .image-pointer {\r\n    width: 200px;\r\n    height: 200px;\r\n    background-color: brown;\r\n  }\r\n</style>\r\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"position":{"name":"## position\n","description":"\nposition 属性用于指定元素在页面中的定位方式。与 top、right、bottom、left 等属性决定该元素的最终位置。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nposition: static | relative | absolute | sticky | fixed;\n```\n","values":"\n### position 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| relative | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当前元素将参与父节点布局，根据 top、right、bottom、left 等属性相对于自身偏移。 |\n| absolute | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当前元素将不参与父节点布局，布局时不会为该元素创建任何空间，在父元素的内容区域中进行绝对布局，根据 top、right、bottom、left 等属性决定其位置。 |\n| fixed | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当前元素将不参与父节点布局，将被视为页面根节点的子元素进行绝对布局，根据 top、right、bottom、left 等属性决定其位置。 |\n| static | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。 |\n| sticky | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。<br/>      该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见 Github issue on W3C CSSWG）。 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | relative |\n\n **注意**：W3C 默认值为：static","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/position)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.position)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/position.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/position.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/position\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/position\n\n>示例\n```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n    <view style=\"flex-grow: 1\">\r\n      <view class=\"common-box\">\r\n        <view>\r\n          <view class=\"title-container\">\r\n            <text class=\"uni-title-text uni-common-mt\">position: fixed</text>\r\n          </view>\r\n          <scroll-view class=\"test-scroll-view\">\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"common fixed\" style=\"position: fixed\">\r\n              <text class=\"text\">fixed</text>\r\n            </view>\r\n            <view class=\"common fixed\" style=\"position: fixed\" flatten>\r\n              <text class=\"text\">fixed(拍平)</text>\r\n            </view>\r\n            <view class=\"test-block blue\"></view>\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"test-block green\"></view>\r\n            <view class=\"test-block blue\"></view>\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"test-block green\"></view>\r\n            <view class=\"test-block blue\"></view>\r\n          </scroll-view>\r\n        </view>\r\n        <view>\r\n          <view class=\"title-container\">\r\n            <text class=\"uni-subtitle-text\">(四方向组合: top + left + bottom + right)</text>\r\n          </view>\r\n          <scroll-view class=\"test-scroll-view\">\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"common combo-all-sides fixed-combo\" style=\"position: fixed\">\r\n              <text class=\"text\">fixed 四方向</text>\r\n            </view>\r\n            <view class=\"common combo-all-sides fixed-combo\" style=\"position: fixed\" flatten>\r\n              <text class=\"text\">fixed 四方向(拍平)</text>\r\n            </view>\r\n            <view class=\"test-block blue\"></view>\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"test-block green\"></view>\r\n            <view class=\"test-block blue\"></view>\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"test-block green\"></view>\r\n            <view class=\"test-block blue\"></view>\r\n          </scroll-view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"common-box\">\r\n        <view>\r\n          <view class=\"title-container\">\r\n            <text class=\"uni-title-text uni-common-mt\">position: absolute</text>\r\n          </view>\r\n          <scroll-view class=\"test-scroll-view\">\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"common\" style=\"position: absolute\">\r\n              <text class=\"text\">absolute</text>\r\n            </view>\r\n            <view class=\"common\" style=\"position: absolute\" flatten>\r\n              <text class=\"text\">absolute(拍平)</text>\r\n            </view>\r\n            <view class=\"test-block blue\"></view>\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"test-block green\"></view>\r\n            <view class=\"test-block blue\"></view>\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"test-block green\"></view>\r\n            <view class=\"test-block blue\"></view>\r\n          </scroll-view>\r\n        </view>\r\n        <view>\r\n          <view class=\"title-container\">\r\n            <text class=\"uni-subtitle-text\">(四方向组合: top + left + bottom + right)</text>\r\n          </view>\r\n          <scroll-view class=\"test-scroll-view\">\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"common combo-all-sides-container\" style=\"position: absolute\">\r\n              <text class=\"text\">absolute 四方向</text>\r\n            </view>\r\n            <view class=\"common combo-all-sides-container\" style=\"position: absolute\" flatten>\r\n              <text class=\"text\">absolute 四方向(拍平)</text>\r\n            </view>\r\n            <view class=\"test-block blue\"></view>\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"test-block green\"></view>\r\n            <view class=\"test-block blue\"></view>\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"test-block green\"></view>\r\n            <view class=\"test-block blue\"></view>\r\n          </scroll-view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"common-box\">\r\n        <view>\r\n          <view class=\"title-container\">\r\n            <text class=\"uni-title-text uni-common-mt\">position: relative</text>\r\n          </view>\r\n          <scroll-view class=\"test-scroll-view\">\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"common\" style=\"position: relative\">\r\n              <text class=\"text\">relative</text>\r\n            </view>\r\n            <view class=\"common\" style=\"position: relative\" flatten>\r\n              <text class=\"text\">relative(拍平)</text>\r\n            </view>\r\n            <view class=\"test-block blue\"></view>\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"test-block green\"></view>\r\n            <view class=\"test-block blue\"></view>\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"test-block green\"></view>\r\n            <view class=\"test-block blue\"></view>\r\n          </scroll-view>\r\n        </view>\r\n        <view>\r\n          <view class=\"title-container\">\r\n            <text class=\"uni-subtitle-text uni-common-mt\">(四方向组合: top + left + bottom + right)</text>\r\n          </view>\r\n          <scroll-view class=\"test-scroll-view\">\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"common combo-all-sides-container\" style=\"position: relative\">\r\n              <text class=\"text\">relative 四方向</text>\r\n            </view>\r\n            <view class=\"common combo-all-sides-container\" style=\"position: relative\" flatten>\r\n              <text class=\"text\">relative 四方向(拍平)</text>\r\n            </view>\r\n            <view class=\"test-block blue\"></view>\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"test-block green\"></view>\r\n            <view class=\"test-block blue\"></view>\r\n            <view class=\"test-block red\"></view>\r\n            <view class=\"test-block green\"></view>\r\n            <view class=\"test-block blue\"></view>\r\n          </scroll-view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\r\n        <text class=\"uni-subtitle-text\">position: relative 和 position: absolute</text>\r\n        <view class=\"position-test-box\">\r\n          <scroll-view class=\"scroll-view-common\" style=\"position: relative; top: 20px; left: 20px; background-color: cyan;\">\r\n            <text class=\"cyan-text\">relative</text>\n          </scroll-view>\r\n          <scroll-view class=\"scroll-view-common\" style=\"position: absolute; top: 65px; left: 65px; background-color: green;\">\r\n            <text>absolute</text>\r\n          </scroll-view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt\">\r\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\r\n\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.position}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.positionActual}}</text>\r\n          <view class=\"test-box\">\r\n            <view class=\"test-block-small red\"></view>\r\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" style=\"top: 10px; left: 10px;\" :style=\"{ position: data.position }\">\r\n              <text style=\"font-size: 10px;\">view</text>\r\n            </view>\r\n            <view class=\"test-block-small blue\"></view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.position}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.positionActualText}}</text>\r\n          <view class=\"test-box\">\r\n            <text class=\"test-block-small red test-block-small-text\">红</text>\r\n            <text ref=\"textRef\" class=\"common-dynamic common-text-dynamic test-text\" style=\"top: 10px; left: 10px;\" :style=\"{ position: data.position }\">text</text>\r\n            <text class=\"test-block-small blue test-block-small-text\">蓝</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.position}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.positionActualImage}}</text>\r\n          <view class=\"test-box\">\r\n            <image class=\"common-image-static\" src=\"/static/test-image/logo.png\"></image>\r\n            <image ref=\"imageRef\" class=\"common-dynamic test-image\" style=\"top: 10px; left: 10px;\" :style=\"{ position: data.position }\" src=\"/static/test-image/logo.png\"></image>\r\n            <image class=\"common-image-static\" src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt uni-common-mb\">\r\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\r\n        <enum-data :items=\"positionEnum\" title=\"position 枚举值\" @change=\"radioChangePosition\" :compact=\"true\"></enum-data>\r\n        <input-data :defaultValue=\"data.position\" title=\"position 自定义值\" type=\"text\" @confirm=\"inputChangePosition\"></input-data>\r\n      </view>\r\n\r\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text>native-view组件: position: relative 和 position: absolute</text>\n        <view class=\"position-test-box\">\n          <test-native-view class=\"scroll-view-common\" style=\"position: relative; top: 20px; left: 20px; background-color: cyan;\"></test-native-view>\n          <test-native-view class=\"scroll-view-common\" style=\"position: absolute; top: 65px; left: 65px; background-color: green;\"></test-native-view>\n        </view>\n      </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n  const positionEnum : ItemType[] = [\r\n    { value: 0, name: '' },\r\n    { value: 1, name: 'static' },\r\n    { value: 2, name: 'relative' },\r\n    { value: 3, name: 'absolute' },\r\n    { value: 4, name: 'fixed' }\r\n  ]\r\n\r\n  const data = reactive({\r\n    position: 'relative',\r\n    positionActual: '',\r\n    positionActualText: '',\r\n    positionActualImage: ''\r\n  })\r\n  const viewRef = ref(null as UniElement | null)\r\n  const textRef = ref(null as UniTextElement | null)\r\n  const imageRef = ref(null as UniImageElement | null)\r\n\r\n  const getPropertyValues = () => {\r\n    data.positionActual = viewRef.value?.style.getPropertyValue('position') ?? ''\r\n    data.positionActualText = textRef.value?.style.getPropertyValue('position') ?? ''\r\n    data.positionActualImage = imageRef.value?.style.getPropertyValue('position') ?? ''\r\n  }\r\n\r\n\r\n  const changePosition = (value : string) => {\r\n    data.position = value\r\n    viewRef.value?.style.setProperty('position', value)\r\n    textRef.value?.style.setProperty('position', value)\r\n    imageRef.value?.style.setProperty('position', value)\r\n    // 使用 nextTick 确保样式已应用后再获取值\r\n    nextTick(() => {\r\n      getPropertyValues()\r\n    })\r\n  }\r\n\r\n  const radioChangePosition = (index : number) => {\r\n    const selectedItem = positionEnum.find((item) : boolean => item.value === index)\r\n    if (selectedItem != null) {\r\n      changePosition(selectedItem.name)\r\n    }\r\n  }\r\n\r\n  const inputChangePosition = (value : string) => {\r\n    changePosition(value)\r\n  }\r\n\r\n  onReady(() => {\r\n    getPropertyValues()\r\n  })\r\n\r\n  defineExpose({\r\n    radioChangePosition,\r\n    data\r\n  })\r\n</script>\r\n\r\n<style>\r\n  .common-box {\r\n    flex-direction: row;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .title-container {\r\n    width: 180px;\r\n    height: 45px;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .common {\r\n    width: 80px;\r\n    height: 50px;\r\n    background-color: green;\r\n    top: 60px;\r\n    left: 30px;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  .fixed {\r\n    /* #ifdef WEB*/\r\n    top: calc(var(--uni-safe-area-inset-top) + 60px);\r\n    left: calc(var(--uni-safe-area-inset-left) + 30px);\r\n    /* #endif */\r\n  }\r\n\r\n  .text {\r\n    width: 100%;\r\n    font-size: 12px;\r\n  }\r\n\r\n  .test-block {\r\n    width: 50px;\r\n    height: 50px;\r\n  }\r\n\r\n  .test-block-small {\r\n    width: 40px;\r\n    height: 40px;\r\n  }\r\n\r\n  .test-block-small-text {\r\n    font-size: 10px;\r\n  }\r\n\r\n  .red {\r\n    background-color: red;\r\n  }\r\n\r\n  .blue {\r\n    background-color: blue;\r\n  }\r\n\r\n  .green {\r\n    background-color: green;\r\n  }\r\n\r\n  .test-scroll-view {\r\n    width: 180px;\r\n    height: 200px;\r\n    background-color: gray;\r\n  }\r\n\r\n  .combo-all-sides {\r\n    top: 60px;\r\n    left: 45%;\r\n    bottom: 40px;\r\n    right: 40px;\r\n  }\r\n\r\n  .fixed-combo {\r\n    /* #ifdef WEB*/\r\n    top: calc(var(--uni-safe-area-inset-top) + 60px);\r\n    left: calc(var(--uni-safe-area-inset-left) + 45%);\r\n    bottom: calc(var(--uni-safe-area-inset-bottom) + 40px);\r\n    right: calc(var(--uni-safe-area-inset-right) + 40px);\r\n    /* #endif */\r\n  }\r\n\r\n  .combo-all-sides-container {\r\n    top: 60px;\r\n    left: 30px;\r\n    bottom: 40px;\r\n    right: 30px;\r\n  }\r\n\r\n  .common-dynamic {\r\n    width: 40px;\r\n    height: 40px;\r\n    background-color: green;\r\n  }\r\n\r\n  .common-text-dynamic {\r\n    background-color: green;\r\n    color: white;\r\n    font-size: 10px;\r\n    padding: 5px;\r\n  }\r\n\r\n  .common-image-static {\r\n    width: 40px;\r\n    height: 40px;\r\n    background-color: rgba(255, 0, 0, 0.3);\r\n  }\r\n\r\n  .test-container {\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .test-item {\r\n    flex: 1;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .test-box {\r\n    width: 100%;\r\n    height: 120px;\r\n    background-color: gray;\r\n    position: relative;\r\n  }\r\n\r\n  .position-test-box {\r\n    position: relative;\r\n    width: 200px;\r\n    height: 150px;\r\n    background-color: #f5f5f5;\r\n    border: 1px solid #ddd;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .scroll-view-common {\n    width: 80px;\r\n    height: 60px;\r\n  }\n\n  .cyan-text {\n    color: #1a1a1a;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"right":{"name":"## right\n","description":"\nright CSS 属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移，非定位元素设置此属性无效。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nright: <length> | <percentage> | auto;\n```\n","values":"\n### right 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 这个关键字表示：<br/>    <br/>      对于绝对定位元素，元素将忽略此属性而以 left 属性为准，如果此时设置 width: auto，将基于内容需要的宽度设置宽度；如果 left 也为 auto 的话，元素的水平位置就是它假如作为静态（即 static）元素时该在的位置。<br/>      对于相对定位元素，元素相对正常位置的偏移量将基于 left 属性；如果 left 也为 auto 的话，元素将不会有偏移。 |\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/right)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.position.right)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/right.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/right.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/right\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/right\n\n>示例\n```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\r\n    <view class=\"css-page uni-theme-root\" style=\"flex-grow: 1;\">\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">right: 20px (距离右边 20px) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"right: 20px;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"right: 20px;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">right: 20rpx (距离右边 20rpx) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"right: 20rpx;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"right: 20rpx;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">right: 20% (距离右边 20%) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"right: 20%;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"right: 20%;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">right: auto (自动，默认左边对齐) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"right: auto;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"right: auto;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\r\n\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-subtitle-text\">right: 10% 和 right: 30px</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <scroll-view class=\"common\" style=\"right: 10%;\"></scroll-view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <scroll-view class=\"common\" style=\"right: 30px;\"></scroll-view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt\">\r\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\r\n\r\n      <!-- 普通版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.right}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.rightActual}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRef\" class=\"common test-view\" :style=\"{ right: data.right }\">\r\n              <text class=\"common-text\">view</text>\r\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.right}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.rightActualText}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRef\" class=\"common common-text test-text\" :style=\"{ right: data.right }\">text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.right}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.rightActualImage}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRef\" class=\"common test-image\" :style=\"{ right: data.right }\" src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <!-- 拍平版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.right}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.rightActualFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRefFlat\" class=\"common test-view-flatten\" :style=\"{ right: data.right }\" flatten>\r\n              <text class=\"common-text\">view</text>\r\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.right}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.rightActualTextFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRefFlat\" class=\"common common-text test-text-flatten\" :style=\"{ right: data.right }\" flatten>text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.right}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.rightActualImageFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRefFlat\" class=\"common test-image-flatten\" :style=\"{ right: data.right }\" flatten src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt uni-common-mb\">\r\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\r\n        <enum-data :items=\"rightEnum\" title=\"right 枚举值\" @change=\"radioChangeRight\" :compact=\"true\"></enum-data>\r\n        <input-data :defaultValue=\"data.right\" title=\"right 自定义值\" type=\"text\" @confirm=\"inputChangeRight\"></input-data>\r\n      </view>\r\n\r\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text class=\"theme-label\">native-view组件: right: 10% 和 right: 30px</text>\n        <view class=\"test-container\">\n          <view class=\"example-box\">\n            <test-native-view class=\"common-native\" style=\"right: 10%;\"></test-native-view>\n          </view>\n          <view class=\"example-box\">\r\n            <test-native-view class=\"common-native\" style=\"right: 30px;\"></test-native-view>\r\n          </view>\r\n        </view>\n      </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n  const rightEnum : ItemType[] = [\r\n    { value: 0, name: '' },\r\n    { value: 1, name: '0' },\r\n    { value: 2, name: '0px' },\r\n    { value: 3, name: '20px' },\r\n    { value: 4, name: '40rpx' },\r\n    { value: 5, name: '0%' },\r\n    { value: 6, name: '50%' },\r\n    { value: 7, name: 'auto' }\r\n  ]\r\n\r\n  const data = reactive({\r\n    right: '10px',\r\n    rightActual: '',\r\n    rightActualText: '',\r\n    rightActualImage: '',\r\n    rightActualFlat: '',\r\n    rightActualTextFlat: '',\r\n    rightActualImageFlat: ''\r\n  })\r\n  const viewRef = ref(null as UniElement | null)\r\n  const textRef = ref(null as UniTextElement | null)\r\n  const imageRef = ref(null as UniImageElement | null)\r\n  const viewRefFlat = ref(null as UniElement | null)\r\n  const textRefFlat = ref(null as UniTextElement | null)\r\n  const imageRefFlat = ref(null as UniImageElement | null)\r\n\r\n  const getPropertyValues = () => {\r\n    data.rightActual = viewRef.value?.style.getPropertyValue('right') ?? ''\r\n    data.rightActualFlat = viewRefFlat.value?.style.getPropertyValue('right') ?? ''\r\n    data.rightActualText = textRef.value?.style.getPropertyValue('right') ?? ''\r\n    data.rightActualTextFlat = textRefFlat.value?.style.getPropertyValue('right') ?? ''\r\n    data.rightActualImage = imageRef.value?.style.getPropertyValue('right') ?? ''\r\n    data.rightActualImageFlat = imageRefFlat.value?.style.getPropertyValue('right') ?? ''\r\n  }\r\n\r\n\r\n  const changeRight = (value : string) => {\r\n    data.right = value\r\n    viewRef.value?.style.setProperty('right', value)\r\n    viewRefFlat.value?.style.setProperty('right', value)\r\n    textRef.value?.style.setProperty('right', value)\r\n    textRefFlat.value?.style.setProperty('right', value)\r\n    imageRef.value?.style.setProperty('right', value)\r\n    imageRefFlat.value?.style.setProperty('right', value)\r\n    // 使用 nextTick 确保样式已应用后再获取值\r\n    nextTick(() => {\r\n      getPropertyValues()\r\n    })\r\n  }\r\n\r\n  const radioChangeRight = (index : number) => {\r\n    const selectedItem = rightEnum.find((item) : boolean => item.value === index)\r\n    if (selectedItem != null) {\r\n      changeRight(selectedItem.name)\r\n    }\r\n  }\r\n\r\n  const inputChangeRight = (value : string) => {\r\n    changeRight(value)\r\n  }\r\n\r\n  onReady(() => {\r\n    getPropertyValues()\r\n  })\r\n\r\n  defineExpose({\r\n    radioChangeRight,\r\n    data\r\n  })\r\n</script>\r\n\r\n<style>\n  .theme-label {\n    color: var(--text-color, #333333);\n  }\n\n  .example-box {\r\n    position: relative;\r\n    flex: 1;\r\n    height: 60px;\r\n    background-color: #f5f5f5;\r\n    border: 1px solid #ddd;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .common {\r\n    position: absolute;\r\n    width: 60px;\r\n    height: 60px;\r\n    background-color: cyan;\r\n  }\r\n\r\n  .common-text {\n    width: 50px;\n    font-size: 12px;\n    color: #1a1a1a;\n  }\r\n\r\n  .test-container {\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .test-item {\r\n    flex: 1;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .test-box {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 60px;\r\n    background-color: #e0e0e0;\r\n  }\n\n  .common-native {\r\n    position: absolute;\r\n    width: 60px;\r\n    height: 60px;\r\n    background-color: #00FFFF;\r\n  }\r\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"text-align":{"name":"## text-align\n","description":"\ntext-align 属性设置元素中文本内容的水平对齐方式。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\ntext-align: start | end | left | right | center | justify | match-parent;\n```\n","values":"\n### text-align 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 行内内容向左侧边对齐。 |\n| center | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 行内内容居中。 |\n| right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 行内内容向右侧边对齐。 |\n| justify | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"8.0\",\"x\",\"5.25\",\"x\",\"5.25\",\"x\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 文字向两侧对齐，对最后一行无效。 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue-app | left |\n| uvue-web | left |\n\n **注意**：W3C 默认值为：start","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)\n- [input](/component/input.md)\n- [textarea](/component/textarea.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/text-align)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.text-align)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/text-align.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/text-align.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/text-align\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/text-align\n\n>示例\n```vue\n<template>\n\t<view style=\"flex-grow: 1;\">\n\t\t<view class=\"box\">\n\t\t\t<text class=\"common\" style=\"text-align: left;\">text-align: left</text>\n\t\t\t<text class=\"common\" style=\"text-align: center;\">text-align: center</text>\n\t\t\t<text class=\"common2\" style=\"text-align: center;\">text-align: center</text>\n\t\t\t<text class=\"common\" style=\"text-align: right;\">text-align: right</text>\n\t\t\t<text class=\"common\" style=\"text-align: justify;\">text-align: justify hello uni-app x</text>\n\t\t</view>\n    <text class=\"uni-title-text\">拍平版本</text>\n\t\t<view class=\"box\">\n\t\t\t<text class=\"common\" style=\"text-align: left;\" flatten>text-align: left</text>\n\t\t\t<text class=\"common\" style=\"text-align: center;\" flatten>text-align: center</text>\n\t\t\t<text class=\"common2\" style=\"text-align: center;\" flatten>text-align: center</text>\n\t\t\t<text class=\"common\" style=\"text-align: right;\" flatten>text-align: right</text>\n\t\t\t<text class=\"common\" style=\"text-align: justify;\" flatten>text-align: justify hello uni-app x</text>\n\t\t</view>\n\n\t\t<view class=\"uni-common-mt\">\n\t\t\t<text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n\t\t</view>\n\n\t\t<view class=\"common-box\">\n\t\t\t<!-- 普通版本 -->\n\t\t\t<view class=\"uni-common-mt\">\n\t\t\t\t<text class=\"uni-title-text\">text-align</text>\n\t\t\t\t<text class=\"uni-info\">设置值: {{data.textAlign}}</text>\n\t\t\t\t<text class=\"uni-info\">获取值: {{data.textAlignActual}}</text>\n\t\t\t\t<view class=\"test-box\">\n\t\t\t\t\t<text ref=\"textRef\" class=\"common-text\" :style=\"{ textAlign: data.textAlign }\">当前 text-align: {{data.textAlign}}</text>\n\t\t\t\t</view>\n\t\t\t</view>\n\n\t\t\t<!-- 拍平版本 -->\n\t\t\t<view class=\"uni-common-mt\">\n\t\t\t\t<text class=\"uni-title-text\">拍平</text>\n\t\t\t\t<text class=\"uni-info\">设置值: {{data.textAlign}}</text>\n\t\t\t\t<text class=\"uni-info\">获取值: {{data.textAlignActualFlat}}</text>\n\t\t\t\t<view class=\"test-box\">\n\t\t\t\t\t<text ref=\"textRefFlat\" class=\"common-text\" :style=\"{ textAlign: data.textAlign }\" flatten>当前 text-align: {{data.textAlign}}</text>\n\t\t\t\t</view>\n\t\t\t</view>\n\t\t</view>\n\n\t\t<view class=\"uni-common-mt uni-common-mb\">\n\t\t\t\t<text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n\t\t\t\t<enum-data :items=\"textAlignEnum\" title=\"text-align 枚举值\" @change=\"radioChangeTextAlign\" :compact=\"true\"></enum-data>\n\t\t\t\t<input-data :defaultValue=\"data.textAlign\" title=\"text-align 自定义值\" type=\"text\" @confirm=\"inputChangeTextAlign\"></input-data>\n\t\t</view>\n\t</view>\n</template>\n\n<script setup lang=\"uts\">\n\timport { ItemType } from '@/components/enum-data/enum-data-types'\n\n\tconst textAlignEnum: ItemType[] = [\n\t\t{ value: 0, name: '' },\n\t\t{ value: 1, name: 'left' },\n\t\t{ value: 2, name: 'center' },\n\t\t{ value: 3, name: 'right' },\n\t\t{ value: 4, name: 'justify' }\n\t]\n\n\tconst data = reactive({\n\t\ttextAlign: 'left',\n\t\ttextAlignActual: '',\n\t\ttextAlignActualFlat: ''\n\t})\n\tconst textRef = ref(null as UniTextElement | null)\n\tconst textRefFlat = ref(null as UniTextElement | null)\n\n\tconst getPropertyValues = () => {\n\t\tdata.textAlignActual = textRef.value?.style.getPropertyValue('text-align') ?? ''\n\t\tdata.textAlignActualFlat = textRefFlat.value?.style.getPropertyValue('text-align') ?? ''\n\t}\n\n\n\tconst changeTextAlign = (value: string) => {\n\t\tdata.textAlign = value\n\t\ttextRef.value?.style.setProperty('text-align', value)\n\t\ttextRefFlat.value?.style.setProperty('text-align', value)\n\t\t// 使用 nextTick 确保样式已应用后再获取值\n\t\tnextTick(() => {\n\t\t\tgetPropertyValues()\n\t\t})\n\t}\n\n\tconst radioChangeTextAlign = (index: number) => {\n\t\tconst selectedItem = textAlignEnum.find((item): boolean => item.value === index)\n\t\tif (selectedItem != null) {\n\t\t\tchangeTextAlign(selectedItem.name)\n\t\t}\n\t}\n\n\tconst inputChangeTextAlign = (value: string) => {\n\t\tchangeTextAlign(value)\n\t}\n\n\tonReady(() => {\n\t\tgetPropertyValues()\n\t})\n\n\tdefineExpose({\n\t\tradioChangeTextAlign,\n\t\tdata\n\t})\n</script>\n\n<style>\n\t.common {\n\t\twidth: 250px;\n\t\tfont-size: 20px;\n    background-color: lightgray;\n\t}\n\n  .common2 {\n    min-width: 250px;\n    font-size: 20px;\n    background-color: lightgray;\n  }\n\n  .common-text{\n    width: 110px;\n    font-size: 14px;\n    background-color: lightgray;\n  }\n\n  .box{\n    height: 200px;\n    background-color: gray;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .common-box{\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 80px;\n    background-color: gray;\n    justify-content: center;\n    align-items: center;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"text-decoration":{"name":"## text-decoration\n","description":"\ntext-decoration 属性用于设置元素中文本的修饰线外观，是 text-decoration-line、text-decoration-color、text-decoration-style、text-decoration-thickness 属性的缩写。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | x | x | x |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\ntext-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>;\n```\n","values":"\n### text-decoration 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| dashed | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 虚线。 |\n| dotted | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 点划线。 |\n| double | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 双实线。 |\n| line-through | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 贯穿文本中间的线。 |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 不画线。 |\n| overline | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在文本的上方的线。 |\n| solid | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 实线。 |\n| underline | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 下滑线。 |\n| wavy | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 波浪线。 |\n| text-decoration-line | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置使用的装饰类型，例如 underline 或者 line-through。 |\n| text-decoration-color | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置装饰的颜色。 |\n| text-decoration-style | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置装饰的线条的颜色，例如 solid、wavy 或者 dashed。 |\n| text-decoration-thickness | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置用于装饰的线条粗细。 |\n","defaultValue":"","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/text-decoration)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.text-decoration)\n","example":"","restrictions":"\n### 值限制\n- enum\n- color\n- length\n"},"text-decoration-color":{"name":"## text-decoration-color\n","description":"\ntext-decoration-color 属性用于设置元素中文本的修饰线颜色。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | 5.11 | x | 5.0 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\ntext-decoration-color: <color>;\n```\n","values":"","defaultValue":"","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/text-decoration-color)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.text-decoration-color)\n","example":"","restrictions":"\n### 值限制\n- color\n"},"text-decoration-line":{"name":"## text-decoration-line\n","description":"\ntext-decoration-line 属性用于设置元素中文本的修饰线类型。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\ntext-decoration-line: none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error;\n```\n","values":"\n### text-decoration-line 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| underline | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在文本的下方有一条修饰线。 |\n| line-through | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 有一条贯穿文本中间的修饰线。 |\n| overline | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在文本的上方有一条修饰线。 |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表示没有文本修饰效果。 |\n","defaultValue":"### 默认值 @default-value \n `none`","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/text-decoration-line)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.text-decoration-line)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/text-decoration-line.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/text-decoration-line.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/text-decoration-line\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/text-decoration-line\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <view class=\"content\">\n        <text style=\"text-decoration-line: underline;\">text-decoration-line: underline 下划线 底部易重叠字符：,.9pQqyzgj;\\{}[]</text>\n        <text style=\"text-decoration-line: line-through;\">text-decoration-line: line-through 删除线 较多文字测试换行和裁剪效果</text>\n      </view>\n      <view class=\"content\">\n        <text style=\"text-decoration-line: underline;\" flatten>text-decoration-line: underline flatten</text>\n        <text style=\"text-decoration-line: line-through;\" flatten>text-decoration-line: line-through flatten</text>\n      </view>\n      <view style=\"background-color: gray;justify-content: center;align-items: center;margin-bottom: 16px;\">\n        <text class=\"common\" style=\"text-decoration-line: underline;color: blue;\" flatten>text-decoration-line: underline 自适应宽高且拍平</text>\n        <text class=\"common\" style=\"text-decoration-line: line-through;color: blue;\" flatten>text-decoration-line: line-through 自适应宽高且拍平</text>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"common-box\">\n        <!-- 普通版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">text-decoration-line</text>\n          <text class=\"uni-info\">设置值: {{data.textDecorationLine}}</text>\n          <text class=\"uni-info\">获取值: {{data.textDecorationLineActual}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"common test-text\" :style=\"{ textDecorationLine: data.textDecorationLine }\">当前 text-decoration-line: {{data.textDecorationLine}}</text>\n          </view>\n        </view>\n\n        <!-- 拍平版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">拍平</text>\n          <text class=\"uni-info\">设置值: {{data.textDecorationLine}}</text>\n          <text class=\"uni-info\">获取值: {{data.textDecorationLineActualFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"common test-text-flatten\" :style=\"{ textDecorationLine: data.textDecorationLine }\" flatten>当前 text-decoration-line: {{data.textDecorationLine}}</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n          <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n          <enum-data :items=\"textDecorationLineEnum\" title=\"text-decoration-line 枚举值\" @change=\"radioChangeTextDecorationLine\" :compact=\"true\"></enum-data>\n          <input-data :defaultValue=\"data.textDecorationLine\" title=\"text-decoration-line 自定义值\" type=\"text\" @confirm=\"inputChangeTextDecorationLine\"></input-data>\n      </view>\n    </view>\n\n\t\t<!-- #ifndef APP-ANDROID || (APP-HARMONY && !VUE3-VAPOR) || (APP-IOS && !VUE3-VAPOR) -->\n    <!-- 临时注释，后续App支持再放开 -->\n\t\t<!-- <view class=\"content\">\n\t\t  <text class=\"common\" style=\"text-decoration-line: underline;color: blue; text-decoration-color: red; text-overflow: ellipsis;width: 200px;white-space: nowrap;\">下划线颜色和ellipsis组合</text>\n\t\t  <text class=\"common\" style=\"text-decoration-line: line-through;color: blue; text-decoration-color: blue; text-overflow: ellipsis;width: 200px;white-space: nowrap;\">删除线颜色和ellipsis组合</text>\n\t\t</view> -->\n\t\t<!-- #endif -->\n\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n\timport { ItemType } from '@/components/enum-data/enum-data-types'\n\n\tconst textDecorationLineEnum: ItemType[] = [\n\t\t{ value: 0, name: '' },\n\t\t{ value: 1, name: 'none' },\n\t\t{ value: 2, name: 'underline' },\n\t\t{ value: 3, name: 'line-through' }\n\t]\n\n\tconst data = reactive({\n\t\ttextDecorationLine: 'none',\n\t\ttextDecorationLineActual: '',\n\t\ttextDecorationLineActualFlat: ''\n\t})\n\tconst textRef = ref(null as UniTextElement | null)\n\tconst textRefFlat = ref(null as UniTextElement | null)\n\n\tconst getPropertyValues = () => {\n\t\tdata.textDecorationLineActual = textRef.value?.style.getPropertyValue('text-decoration-line') ?? ''\n\t\tdata.textDecorationLineActualFlat = textRefFlat.value?.style.getPropertyValue('text-decoration-line') ?? ''\n\t}\n\n\n\tconst changeTextDecorationLine = (value: string) => {\n\t\tdata.textDecorationLine = value\n\t\ttextRef.value?.style.setProperty('text-decoration-line', value)\n\t\ttextRefFlat.value?.style.setProperty('text-decoration-line', value)\n\t\t// 使用 nextTick 确保样式已应用后再获取值\n\t\tnextTick(() => {\n\t\t\tgetPropertyValues()\n\t\t})\n\t}\n\n\tconst radioChangeTextDecorationLine = (index: number) => {\n\t\tconst selectedItem = textDecorationLineEnum.find((item): boolean => item.value === index)\n\t\tif (selectedItem != null) {\n\t\t\tchangeTextDecorationLine(selectedItem.name)\n\t\t}\n\t}\n\n\tconst inputChangeTextDecorationLine = (value: string) => {\n\t\tchangeTextDecorationLine(value)\n\t}\n\n\tonReady(() => {\n\t\tgetPropertyValues()\n\t})\n\n\tdefineExpose({\n\t\tradioChangeTextDecorationLine,\n\t\tdata\n\t})\n</script>\n\n<style>\n\t.common {\n\t\tfont-size: 20px;\n\t}\n  .content {\n    width: 200px;\n    height: 100px;\n    background-color: gray;\n    justify-content: center;\n    align-items: center;\n    margin-bottom: 16px;\n  }\n\n  .common-box{\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 80px;\n    background-color: gray;\n    justify-content: center;\n    align-items: center;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"text-decoration-style":{"name":"## text-decoration-style\n","description":"\ntext-decoration-style 属性用于设置元素中文本的修饰线样式，线的样式会应用到所有被 text-decoration-line 设定的线，不能为其中的每条线设置不同的样式。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | x | x | x |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\ntext-decoration-style: solid | double | dotted | dashed | wavy;\n```\n","values":"\n### text-decoration-style 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| solid | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 实线。 |\n| dashed | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 虚线。 |\n| dotted | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 点划线。 |\n| wavy | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 波浪线。 |\n","defaultValue":"","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/text-decoration-style)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.text-decoration-style)\n","example":"","restrictions":"\n### 值限制\n- enum\n"},"text-decoration-thickness":{"name":"## text-decoration-thickness\n","description":"\ntext-decoration-thickness 属性用于设置元素中文本的修饰线的粗细。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | x | x | x |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\ntext-decoration-thickness: auto | from-font | <length> | <percentage> ;\n```\n","values":"\n### text-decoration-thickness 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 自动为文本装饰线选择合适的粗细。 |\n| from-font | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 如果字体文件中包含了首选的粗细值，则使用字体文件的粗细值。如果字体文件中没有包含首选的粗细值，则效果和设置为 auto 一样。 |\n","defaultValue":"","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/text-decoration-thickness)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.text-decoration-thickness)\n","example":"","restrictions":"\n### 值限制\n- length\n"},"text-overflow":{"name":"## text-overflow\n","description":"\ntext-overflow CSS 属性用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\ntext-overflow: [ clip | ellipsis | <string> ]{1,2};\n```\n","values":"\n### text-overflow 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| clip | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 默认值。这个关键字会在内容区域的极限处截断文本，因此可能会在单词的中间发生截断。如果你的目标浏览器支持 text-overflow: ''，为了能在两个单词过渡处截断，你可以使用一个空字符串值（''）作为 text-overflow 属性的值。 |\n| ellipsis | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 这个关键字会用一个省略号（'…'、U+2026 HORIZONTAL ELLIPSIS）来表示被截断的文本。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小以至于连省略号都容纳不下，那么这个省略号也会被截断。 |\n","defaultValue":"### 默认值 @default-value \n `clip`","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/text-overflow)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.text-overflow)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/text-overflow.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/text-overflow.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/text-overflow\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/text-overflow\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <view style=\"padding: 0 10px; background-color: gray;justify-content: center;\">\n        <view class=\"margin-bottom-10\">\n          <text class=\"font-weight-bold\">text-overflow:clip white-space:nowrap</text>\n          <text class=\"font-size-20\" style=\"text-overflow: clip;white-space: nowrap;\">{{data.multiLineText}}</text>\n          <text style=\"color:#dbd9d9;\">拍平版本</text>\n          <text class=\"font-size-20\" style=\"text-overflow: clip;white-space: nowrap;\" flatten>{{data.multiLineText}}</text>\n        </view>\n        <view class=\"margin-bottom-10\">\n          <text class=\"font-weight-bold\">text-overflow:ellipsis white-space:nowrap</text>\n          <text class=\"font-size-20\" style=\"text-overflow: ellipsis;white-space: nowrap;\">{{data.singleLineText}}</text>\n          <text style=\"color:#dbd9d9;\">拍平版本</text>\n          <text class=\"font-size-20\" style=\"text-overflow: ellipsis;white-space: nowrap;\" flatten>{{data.singleLineText}}</text>\n          <text class=\"font-size-20\" style=\"text-overflow: ellipsis;white-space: nowrap;\">{{data.multiLineText}}</text>\n          <text style=\"color:#dbd9d9;\">拍平版本</text>\n          <text class=\"font-size-20\" style=\"text-overflow: ellipsis;white-space: nowrap;\" flatten>{{data.multiLineText}}</text>\n        </view>\n        <view class=\"margin-bottom-10\">\n          <text class=\"font-weight-bold\">white-space:normal</text>\n          <text class=\"font-size-20\" style=\"white-space: normal;\">{{data.multiLineText}}</text>\n          <text style=\"color:#dbd9d9;\">拍平版本</text>\n          <text class=\"font-size-20\" style=\"white-space: normal;\" flatten>{{data.multiLineText}}</text>\n        </view>\n        <view class=\"margin-bottom-10\" style=\"overflow: visible;\">\n          <text class=\"font-weight-bold\">white-space: nowrap</text>\n          <text class=\"font-size-20\" style=\"white-space: nowrap;align-self: flex-start;\">{{data.multiLineText}}</text>\n          <text style=\"color:#dbd9d9;\">拍平版本</text>\n          <text class=\"font-size-20\" style=\"white-space: nowrap;align-self: flex-start;\" flatten>{{data.multiLineText}}</text>\n        </view>\n        <view class=\"margin-bottom-10\">\n          <text class=\"font-weight-bold\">任意宽度截断（100px、200px、300px）</text>\n          <text class=\"font-size-20\" style=\"text-overflow: ellipsis;white-space: nowrap;width: 100px;\">{{data.multiLineText}}</text>\n          <text style=\"color:#dbd9d9;\">拍平版本</text>\n          <text class=\"font-size-20\" style=\"text-overflow: ellipsis;white-space: nowrap;width: 100px;\" flatten>{{data.multiLineText}}</text>\n          <text class=\"font-size-20\" style=\"text-overflow: ellipsis;white-space: nowrap;width: 200px;\">{{data.multiLineText}}</text>\n          <text style=\"color:#dbd9d9;\">拍平版本</text>\n          <text class=\"font-size-20\" style=\"text-overflow: ellipsis;white-space: nowrap;width: 200px;\" flatten>{{data.multiLineText}}</text>\n          <text class=\"font-size-20\" style=\"text-overflow: ellipsis;white-space: nowrap;width: 300px;\">{{data.multiLineText}}</text>\n          <text style=\"color:#dbd9d9;\">拍平版本</text>\n          <text class=\"font-size-20\" style=\"text-overflow: ellipsis;white-space: nowrap;width: 300px;\" flatten>{{data.multiLineText}}</text>\n        </view>\n        <view class=\"margin-bottom-10\">\n          <text class=\"font-weight-bold\">2行 text-overflow:ellipsis</text>\n          <!-- #ifdef !VUE3-VAPOR && APP -->\n          <text class=\"font-size-20\" style=\"text-overflow: ellipsis; lines: 2;width: 100px;\">{{data.multiLineText}}</text>\n          <!-- #endif -->\n          <!-- #ifdef VUE3-VAPOR || WEB || MP -->\n          <text class=\"font-size-20\" style=\"text-overflow: ellipsis; width: 100px;\" :max-lines=\"2\">{{data.multiLineText}}</text>\n          <!-- #endif -->\n        </view>\n\n\n        <view class=\"margin-bottom-10 uni-common-mt\">\n          <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n        </view>\n\n        <view class=\"common-box\">\n          <!-- 普通版本 -->\n          <view class=\"uni-common-mt\">\n            <text class=\"uni-title-text\">text-overflow</text>\n            <text class=\"uni-info\">设置值: {{data.textOverflow}}</text>\n            <text class=\"uni-info\">获取值: {{data.textOverflowActual}}</text>\n            <view class=\"test-box\">\n              <text ref=\"textRef\" class=\"font-size-14 test-text\" :style=\"{ textOverflow: data.textOverflow, whiteSpace: 'nowrap', width: '150px' }\">{{data.multiLineText}}</text>\n            </view>\n          </view>\n\n          <!-- 拍平版本 -->\n          <view class=\"uni-common-mt\">\n            <text class=\"uni-title-text\">拍平</text>\n            <text class=\"uni-info\">设置值: {{data.textOverflow}}</text>\n            <text class=\"uni-info\">获取值: {{data.textOverflowActualFlat}}</text>\n            <view class=\"test-box\">\n              <text ref=\"textRefFlat\" class=\"font-size-14 test-text-flatten\" :style=\"{ textOverflow: data.textOverflow, whiteSpace: 'nowrap', width: '150px' }\" flatten>{{data.multiLineText}}</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"uni-common-mt uni-common-mb\">\n            <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n            <enum-data :items=\"textOverflowEnum\" title=\"text-overflow 枚举值\" @change=\"radioChangeTextOverflow\" :compact=\"true\"></enum-data>\n            <input-data :defaultValue=\"data.textOverflow\" title=\"text-overflow 自定义值\" type=\"text\" @confirm=\"inputChangeTextOverflow\"></input-data>\n        </view>\n      </view>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    multiLineText: 'HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言',\n    singleLineText: 'uts，大一统语言（单行文本）',\n    textOverflow: 'clip',\n    textOverflowActual: '',\n    textOverflowActualFlat: ''\n  })\n\n  const textOverflowEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'clip' },\n    { value: 2, name: 'ellipsis' }\n  ]\n\n  const textRef = ref(null as UniTextElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n\n  const getPropertyValues = () => {\n    data.textOverflowActual = textRef.value?.style.getPropertyValue('text-overflow') ?? ''\n    data.textOverflowActualFlat = textRefFlat.value?.style.getPropertyValue('text-overflow') ?? ''\n  }\n\n\n  const changeTextOverflow = (value: string) => {\n    data.textOverflow = value\n    textRef.value?.style.setProperty('text-overflow', value)\n    textRefFlat.value?.style.setProperty('text-overflow', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeTextOverflow = (index: number) => {\n    const selectedItem = textOverflowEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeTextOverflow(selectedItem.name)\n    }\n  }\n\n  const inputChangeTextOverflow = (value: string) => {\n    changeTextOverflow(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeTextOverflow,\n    data\n  })\n</script>\n\n<style>\n  .font-size-20 {\n    font-size: 20px;\n  }\n  .font-size-14{\n    font-size: 14px;\n  }\n\n  .font-weight-bold {\n    font-weight: bold;\n  }\n\n  .margin-bottom-10 {\n    margin-bottom: 10px;\n  }\n\n  .common-box{\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 160px;\n    height: 80px;\n    background-color: #cccccc;\n    justify-content: center;\n    align-items: center;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"text-shadow":{"name":"## text-shadow\n","description":"\ntext-shadow 为文字添加阴影。可以为文字与 decoration 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 4.61 | 4.61 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\ntext-shadow: none | [ <color>? && <length>{2,3} ]#;\n```\n","values":"\n### text-shadow 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.61\",\"4.61\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | No shadow. |\n","defaultValue":"### 默认值 @default-value \n `none`","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/text-shadow)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.text-shadow)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/text-shadow.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/text-shadow.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/text-shadow\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/text-shadow\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view class=\"container\">\n      <text class=\"text\" style=\"text-shadow: 1px 1px 2px pink;\">text-shadow: 1px 1px 2px pink</text>\n      <!-- <text class=\"text\" style=\"text-shadow: #fc0 1px 0 10px;\">text-shadow: #fc0 1px 0 10px</text> -->\n      <text class=\"text\" style=\"text-shadow: 5px 5px #558abb;\">text-shadow: 5px 5px #558abb</text>\n      <text class=\"text\" style=\"text-shadow: cyan 2px 5px;\">text-shadow: cyan 2px 5px</text>\n      <text class=\"text\" style=\"text-shadow: 5px 10px;\">text-shadow: 5px 10px</text>\n      <text class=\"text\" style=\"text-shadow: 1px 2px 4px rgb(34, 202, 43);\">text-shadow: 1px 2px 4px rgb(34, 202, 43)</text>\n      <text class=\"text\" style=\"text-shadow: 2px 4px rgba(202, 207, 17, 0.5);\">text-shadow: 2px 4px rgba(202, 207, 17, 0.5)</text>\n      <text class=\"text\" style=\"text-shadow: 1rpx 2rpx 4rpx #00f8;\">text-shadow: 1rpx 2rpx 4rpx #00f8</text>\n      <text class=\"text\" style=\"text-shadow: 2px 4px #0000ff80;\">text-shadow: 2px 4px #0000ff80</text>\n\n      <text class=\"uni-title-text\">【拍平版本】</text>\n      <text class=\"text\" style=\"text-shadow: 1px 1px 2px pink;\" flatten>text-shadow: 1px 1px 2px pink</text>\n      <!-- <text class=\"text\" style=\"text-shadow: #fc0 1px 0 10px;\" flatten>text-shadow: #fc0 1px 0 10px</text> -->\n      <text class=\"text\" style=\"text-shadow: 5px 5px #558abb;\" flatten>text-shadow: 5px 5px #558abb</text>\n      <text class=\"text\" style=\"text-shadow: cyan 2px 5px;\" flatten>text-shadow: cyan 2px 5px</text>\n      <text class=\"text\" style=\"text-shadow: 5px 10px;\" flatten>text-shadow: 5px 10px</text>\n      <text class=\"text\" style=\"text-shadow: 1px 2px 4px rgb(34, 202, 43);\" flatten>text-shadow: 1px 2px 4px rgb(34, 202, 43)</text>\n      <text class=\"text\" style=\"text-shadow: 2px 4px rgba(202, 207, 17, 0.5);\" flatten>text-shadow: 2px 4px rgba(202, 207, 17, 0.5)</text>\n      <text class=\"text\" style=\"text-shadow: 1rpx 2rpx 4rpx #00f8;\" flatten>text-shadow: 1rpx 2rpx 4rpx #00f8</text>\n      <text class=\"text\" style=\"text-shadow: 2px 4px #0000ff80;\" flatten>text-shadow: 2px 4px #0000ff80</text>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"common-box\">\n        <!-- 普通版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">text-shadow</text>\n          <text class=\"uni-info\">设置值: {{data.textShadow}}</text>\n          <text class=\"uni-info info-wrap\">获取值: {{data.textShadowActual}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRef\" class=\"text test-text\" :style=\"{ textShadow: data.textShadow }\">当前 text-shadow: {{data.textShadow}}</text>\n          </view>\n        </view>\n\n        <!-- 拍平版本 -->\n        <view class=\"uni-common-mt\">\n          <text class=\"uni-title-text\">拍平</text>\n          <text class=\"uni-info\">设置值: {{data.textShadow}}</text>\n          <text class=\"uni-info info-wrap\">获取值: {{data.textShadowActualFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefFlat\" class=\"text test-text-flatten\" :style=\"{ textShadow: data.textShadow }\" flatten>当前 text-shadow: {{data.textShadow}}</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"textShadowEnum\" title=\"text-shadow 枚举值\" @change=\"radioChangeTextShadow\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.textShadow\" title=\"text-shadow 自定义值\" type=\"text\" @confirm=\"inputChangeTextShadow\"></input-data>\n      </view>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const textShadowEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '1px 1px 2px pink' },\n    // { value: 2, name: '#fc0 1px 0 10px' },\n    { value: 3, name: '5px 5px #558abb' },\n    { value: 4, name: 'cyan 2px 5px' },\n    { value: 5, name: '5px 10px' },\n    { value: 6, name: '1px 2px 4px rgb(34, 202, 43)' },\n    { value: 7, name: '2px 4px rgba(202, 207, 17, 0.5)' },\n    { value: 8, name: '4rpx 8rpx #0000ff80' },\n    { value: 9, name: '2rpx 4rpx 8rpx #00f8' }\n  ]\n\n  const data = reactive({\n    textShadow: '1px 1px 2px pink',\n    textShadowActual: '',\n    textShadowActualFlat: ''\n  })\n  const textRef = ref(null as UniTextElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n\n  const getPropertyValues = () => {\n    data.textShadowActual = textRef.value?.style.getPropertyValue('text-shadow') ?? ''\n    data.textShadowActualFlat = textRefFlat.value?.style.getPropertyValue('text-shadow') ?? ''\n  }\n\n\n  const changeTextShadow = (value: string) => {\n    data.textShadow = value\n    textRef.value?.style.setProperty('text-shadow', value)\n    textRefFlat.value?.style.setProperty('text-shadow', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeTextShadow = (index: number) => {\n    const selectedItem = textShadowEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeTextShadow(selectedItem.name)\n    }\n  }\n\n  const inputChangeTextShadow = (value: string) => {\n    changeTextShadow(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeTextShadow,\n    data\n  })\n</script>\n\n<style>\n  .container {\n    background-color: gray;\n    justify-content: center;\n  }\n\n  .text {\n    width: 100%;\n    height: 50px;\n    font-size: 20px;\n    text-align: center;\n  }\n\n  .common-box{\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 80px;\n    background-color: #cccccc;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .info-wrap {\n    width: 200px;\n    white-space: normal;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- color\n- length\n"},"top":{"name":"## top\n","description":"\ntop样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\ntop: <length> | <percentage> | auto;\n```\n","values":"\n### top 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 这个关键字表示：<br/>    <br/>      对于绝对定位元素，元素将忽略此属性已bottom属性为准，如果此时设置height: auto，将基于内容需要的高度设置高度；如果bottom也为auto的话，元素的垂直位置就是它假如作为静态 (即 static) 元素时该在的位置。<br/>      对于相对定位元素，元素相对正常位置的偏移量将基于bottom属性；如果bottom也为auto的话，元素将不会有偏移。 |\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/top)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.position.top)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/top.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/top.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/top\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/top\n\n>示例\n```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\r\n    <view class=\"css-page uni-theme-root\" style=\"flex-grow: 1;\">\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">top: 20px (距离顶部 20px) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"top: 20px;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"top: 20px;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">top: 20rpx (距离顶部 20rpx) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"top: 20rpx;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"top: 20rpx;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">top: 20% (距离顶部 20%) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"top: 20%;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"top: 20%;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text\">top: auto (自动，默认顶部对齐) - 右侧：拍平</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"top: auto;\"></view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <view class=\"common\" style=\"top: auto;\" flatten></view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-subtitle-text\">top: 10% 和 top: 30px</text>\r\n        <view class=\"test-container\">\r\n          <view class=\"example-box\">\r\n            <scroll-view class=\"common\" style=\"top: 10%;\"></scroll-view>\r\n          </view>\r\n          <view class=\"example-box\">\r\n            <scroll-view class=\"common\" style=\"top: 30px;\"></scroll-view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt\">\r\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\r\n\r\n      <!-- 普通版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.top}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.topActual}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRef\" class=\"common test-view\" :style=\"{ top: data.top }\">\r\n              <text class=\"common-text\">view</text>\r\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.top}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.topActualText}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRef\" class=\"common common-text test-text\" :style=\"{ top: data.top }\">text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.top}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.topActualImage}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRef\" class=\"common test-image\" :style=\"{ top: data.top }\" src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <!-- 拍平版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.top}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.topActualFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRefFlat\" class=\"common test-view-flatten\" :style=\"{ top: data.top }\" flatten>\r\n              <text class=\"common-text\">view</text>\r\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.top}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.topActualTextFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRefFlat\" class=\"common common-text test-text-flatten\" :style=\"{ top: data.top }\" flatten>text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\r\n          <text class=\"uni-info\">设置值: {{data.top}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.topActualImageFlat}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRefFlat\" class=\"common test-image-flatten\" :style=\"{ top: data.top }\" flatten src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt uni-common-mb\">\r\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\r\n        <enum-data :items=\"topEnum\" title=\"top 枚举值\" @change=\"radioChangeTop\" :compact=\"true\"></enum-data>\r\n        <input-data :defaultValue=\"data.top\" title=\"top 自定义值\" type=\"text\" @confirm=\"inputChangeTop\"></input-data>\r\n      </view>\r\n\r\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text class=\"theme-label\">native-view组件: top: 10% 和 top: 30px</text>\n        <view class=\"test-container\">\n          <view class=\"example-box\">\n            <test-native-view class=\"common-native\" style=\"top: 10%;\"></test-native-view>\n          </view>\n          <view class=\"example-box\">\r\n            <test-native-view class=\"common-native\" style=\"top: 30px;\"></test-native-view>\r\n          </view>\r\n        </view>\n      </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n  const topEnum : ItemType[] = [\r\n    { value: 0, name: '' },\r\n    { value: 1, name: '0' },\r\n    { value: 2, name: '0px' },\r\n    { value: 3, name: '10px' },\r\n    { value: 4, name: '20rpx' },\r\n    { value: 5, name: '0%' },\r\n    { value: 6, name: '50%' },\r\n    { value: 7, name: 'auto' }\r\n  ]\r\n\r\n  const data = reactive({\r\n    top: '10px',\r\n    topActual: '',\r\n    topActualText: '',\r\n    topActualImage: '',\r\n    topActualFlat: '',\r\n    topActualTextFlat: '',\r\n    topActualImageFlat: ''\r\n  })\r\n  const viewRef = ref(null as UniElement | null)\r\n  const textRef = ref(null as UniTextElement | null)\r\n  const imageRef = ref(null as UniImageElement | null)\r\n  const viewRefFlat = ref(null as UniElement | null)\r\n  const textRefFlat = ref(null as UniTextElement | null)\r\n  const imageRefFlat = ref(null as UniImageElement | null)\r\n\r\n  const getPropertyValues = () => {\r\n    data.topActual = viewRef.value?.style.getPropertyValue('top') ?? ''\r\n    data.topActualFlat = viewRefFlat.value?.style.getPropertyValue('top') ?? ''\r\n    data.topActualText = textRef.value?.style.getPropertyValue('top') ?? ''\r\n    data.topActualTextFlat = textRefFlat.value?.style.getPropertyValue('top') ?? ''\r\n    data.topActualImage = imageRef.value?.style.getPropertyValue('top') ?? ''\r\n    data.topActualImageFlat = imageRefFlat.value?.style.getPropertyValue('top') ?? ''\r\n  }\r\n\r\n\r\n  const changeTop = (value : string) => {\r\n    data.top = value\r\n    viewRef.value?.style.setProperty('top', value)\r\n    viewRefFlat.value?.style.setProperty('top', value)\r\n    textRef.value?.style.setProperty('top', value)\r\n    textRefFlat.value?.style.setProperty('top', value)\r\n    imageRef.value?.style.setProperty('top', value)\r\n    imageRefFlat.value?.style.setProperty('top', value)\r\n    // 使用 nextTick 确保样式已应用后再获取值\r\n    nextTick(() => {\r\n      getPropertyValues()\r\n    })\r\n  }\r\n\r\n  const radioChangeTop = (index : number) => {\r\n    const selectedItem = topEnum.find((item) : boolean => item.value === index)\r\n    if (selectedItem != null) {\r\n      changeTop(selectedItem.name)\r\n    }\r\n  }\r\n\r\n  const inputChangeTop = (value : string) => {\r\n    changeTop(value)\r\n  }\r\n\r\n  onReady(() => {\r\n    getPropertyValues()\r\n  })\r\n\r\n  defineExpose({\r\n    radioChangeTop,\r\n    data\r\n  })\r\n</script>\r\n\r\n<style>\n  .theme-label {\n    color: var(--text-color, #333333);\n  }\n\n  .example-box {\r\n    position: relative;\r\n    flex: 1;\r\n    height: 100px;\r\n    background-color: #f5f5f5;\r\n    border: 1px solid #ddd;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .common {\r\n    position: absolute;\r\n    width: 60px;\r\n    height: 60px;\r\n    background-color: cyan;\r\n  }\r\n\r\n  .common-text {\n    width: 50px;\n    font-size: 12px;\n    color: #1a1a1a;\n  }\r\n\r\n  .test-container {\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .test-item {\r\n    flex: 1;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .test-box {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100px;\r\n    background-color: #e0e0e0;\r\n  }\r\n\r\n  .common-native {\r\n    position: absolute;\r\n    width: 60px;\r\n    height: 60px;\r\n    background-color: #00FFFF;\r\n  }\r\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"transform":{"name":"## transform\n","description":"\nCSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\ntransform: none | <transform-list>;\n```\n","values":"\n### transform 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| rotate(<angle>) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 旋转元素以给定的角度（angle） |\n| rotateX(<angle>) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 绕 X 轴旋转元素以给定的角度（angle） |\n| rotateY(<angle>) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 绕 Y 轴旋转元素以给定的角度（angle） |\n| rotateZ(<angle>) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 绕 Z 轴旋转元素以给定的角度（angle） |\n| scale(<number> <number>) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 缩放元素的尺寸，水平和垂直方向分别使用给定的比例（number） |\n| scaleX(<number>) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 水平方向缩放元素的尺寸，使用给定的比例（number） |\n| scaleY(<number>) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 垂直方向缩放元素的尺寸，使用给定的比例（number） |\n| translate(<length/percentage> <length/percentage>) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 沿 X 和 Y 轴移动元素，水平和垂直方向分别使用给定的距离或百分比 |\n| translateX(<length/percentage>) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 沿 X 轴移动元素，使用给定的距离或百分比 |\n| translateY(<length/percentage>) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 沿 Y 轴移动元素，使用给定的距离或百分比 |\n","defaultValue":"","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transform)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.transform)\n","example":"","restrictions":"\n### 值限制\n- enum\n"},"transform-origin":{"name":"## transform-origin\n","description":"\ntransform-origin CSS 属性让你更改一个元素变形的原点。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\ntransform-origin: [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?;\n```\n","values":"\n### transform-origin 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| top | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 相对于元素的顶部边缘进行变形 |\n| left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 相对于元素的左侧边缘进行变形 |\n| right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 相对于元素的右侧边缘进行变形 |\n| bottom | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 相对于元素的底部边缘进行变形 |\n| center | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 相对于元素的中心点进行变形 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue-app | 50% 50% |\n| uvue-web | 50% 50% 0 |\n\n **注意**：W3C 默认值为：50% 50% 0","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transform-origin)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.transform.transform-origin)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/transform/transform-origin.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/transform/transform-origin.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/transform/transform-origin\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/transform/transform-origin\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view>\n      <view ref=\"transformView\" class=\"view\" @click=\"changetransform\"></view>\n\n      <view class=\"text-container\">\n        <text class=\"uni-title-text\">text 组件 transform-origin ：</text>\n        <text class=\"uni-subtitle-text\">点击下方 text 组件，不同 transform-origin 值（60px 30px、100% 0%、10px 10px）对 translate、scale、rotate 变换的影响</text>\n        <text ref=\"textTransformView\" class=\"text-view cyan-text\" @click=\"changeTextTransform\">点击 text 测试 transform-origin</text>\n      </view>\n\n      <view class=\"image-container\">\n        <text class=\"uni-title-text\">image 组件 transform-origin ：</text>\n        <text class=\"uni-subtitle-text\">点击下方 image 组件，不同 transform-origin 值（60px 60px、100% 0%、10px 10px）对 translate、scale、rotate 变换的影响</text>\n        <image ref=\"imageTransformView\" class=\"image-view\" @click=\"changeImageTransform\" src=\"/static/test-image/logo.png\"></image>\n      </view>\n\n      <view class=\"scroll-view-container\">\n        <text class=\"uni-title-text\">scroll-view 组件 transform-origin ：</text>\n        <text class=\"uni-subtitle-text\">点击下方 scroll-view 组件，不同 transform-origin 值（60px 60px、100% 0%、10px 10px）对 translate、scale、rotate 变换的影响</text>\n        <view class=\"scroll-view-item\">\n          <scroll-view ref=\"scrollViewTransformView\" class=\"scroll-view-base transform\" @click=\"changeScrollViewTransform\">\n            <text class=\"cyan-text\">点击 scroll-view 测试 transform-origin</text>\n          </scroll-view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.transformOrigin}}</text>\n          <text class=\"uni-info\">获取值: {{data.transformOriginActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefDynamic\" class=\"common-image\" :style=\"{ transformOrigin: data.transformOrigin, transform: 'rotate(45deg)' }\">\n              <text style=\"font-size: 12px;\">view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.transformOrigin}}</text>\n          <text class=\"uni-info\">获取值: {{data.transformOriginActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefDynamic\" class=\"common-text\" :style=\"{ transformOrigin: data.transformOrigin, transform: 'rotate(45deg)' }\">text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.transformOrigin}}</text>\n          <text class=\"uni-info\">获取值: {{data.transformOriginActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefDynamic\" class=\"common-image\" :style=\"{ transformOrigin: data.transformOrigin, transform: 'rotate(45deg)' }\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.transformOrigin}}</text>\n          <text class=\"uni-info\">获取值: {{data.transformOriginActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefDynamicFlat\" class=\"common-image\" :style=\"{ transformOrigin: data.transformOrigin, transform: 'rotate(45deg)' }\" flatten>\n              <text style=\"font-size: 12px;\" flatten>view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.transformOrigin}}</text>\n          <text class=\"uni-info\">获取值: {{data.transformOriginActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefDynamicFlat\" class=\"common-text\" :style=\"{ transformOrigin: data.transformOrigin, transform: 'rotate(45deg)' }\" flatten>text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.transformOrigin}}</text>\n          <text class=\"uni-info\">获取值: {{data.transformOriginActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefDynamicFlat\" class=\"common-image\" :style=\"{ transformOrigin: data.transformOrigin, transform: 'rotate(45deg)' }\" src=\"/static/test-image/logo.png\" flatten></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"transformOriginEnum\" title=\"transform-origin 枚举值\" @change=\"radioChangeTransformOrigin\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.transformOrigin\" title=\"transform-origin 自定义值\" type=\"text\" @confirm=\"inputChangeTransformOrigin\"></input-data>\n      </view>\n\n      <!-- #ifndef MP-ALIPAY -->\n        <view class=\"scroll-view-container\">\n          <text class=\"uni-title-text\">native-view 组件 transform-origin ：</text>\n          <text class=\"uni-subtitle-text\">点击下方 native-view 组件，不同 transform-origin 值（60px 60px、100% 0%、10px 10px）对 translate、scale、rotate 变换的影响</text>\n          <view class=\"scroll-view-item\">\n            <test-native-view ref=\"nativeViewTransformView\" class=\"scroll-view-base transform-native\" @click=\"changeNativeViewTransform\"></test-native-view>\n          </view>\n        </view>\n      <!-- #endif -->\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const transformView = ref(null as UniElement | null)\n  const textTransformView = ref(null as UniElement | null)\n  const imageTransformView = ref(null as UniElement | null)\n  const scrollViewTransformView = ref(null as UniElement | null)\n  const nativeViewTransformView = ref<ComponentPublicInstance|null>(null)\n  const count = ref(0)\n  const textCount = ref(0)\n  const imageCount = ref(0)\n  const scrollViewCount = ref(0)\n  const nativeViewCount = ref(0)\n\n\n  const changetransform = () => {\n    const element = transformView.value\n\n    if (count.value == 0) {\n      element?.style.setProperty(\"transform-origin\", \"60px 60px\")\n      element?.style.setProperty(\"transform\", \"scale(1)\")\n\n      nextTick(() => {\n        const originActual = element?.style.getPropertyValue(\"transform-origin\")\n        const transformActual = element?.style.getPropertyValue(\"transform\")\n      })\n    }\n    else if (count.value == 1) {\n      element?.style.setProperty(\"transform-origin\", \"100% 0%\")\n      element?.style.setProperty(\"transform\", \"rotate(-20deg)\")\n\n      nextTick(() => {\n        const originActual = element?.style.getPropertyValue(\"transform-origin\")\n        const transformActual = element?.style.getPropertyValue(\"transform\")\n      })\n    }\n\n    count.value++\n  }\n\n  const changeTextTransform = () => {\n    const element = textTransformView.value\n\n    if (textCount.value == 0) {\n      element?.style.setProperty(\"transform-origin\", \"60px 30px\")\n      element?.style.setProperty(\"transform\", \"translate(50px, 50px) scale(1.5)\")\n\n      nextTick(() => {\n        const originActual = element?.style.getPropertyValue(\"transform-origin\")\n        const transformActual = element?.style.getPropertyValue(\"transform\")\n      })\n    }\n    else if (textCount.value == 1) {\n      element?.style.setProperty(\"transform-origin\", \"100% 0%\")\n      element?.style.setProperty(\"transform\", \"rotate(-20deg)\")\n\n      nextTick(() => {\n        const originActual = element?.style.getPropertyValue(\"transform-origin\")\n        const transformActual = element?.style.getPropertyValue(\"transform\")\n      })\n    }\n    else {\n      element?.style.setProperty(\"transform-origin\", \"10px 10px\")\n      element?.style.setProperty(\"transform\", \"scale(1)\")\n\n      nextTick(() => {\n        const originActual = element?.style.getPropertyValue(\"transform-origin\")\n        const transformActual = element?.style.getPropertyValue(\"transform\")\n      })\n      textCount.value = -1\n    }\n\n    textCount.value++\n  }\n\n  const changeImageTransform = () => {\n    const element = imageTransformView.value\n\n    if (imageCount.value == 0) {\n      element?.style.setProperty(\"transform-origin\", \"60px 60px\")\n      element?.style.setProperty(\"transform\", \"translate(50px, 50px) scale(2)\")\n\n      nextTick(() => {\n        const originActual = element?.style.getPropertyValue(\"transform-origin\")\n        const transformActual = element?.style.getPropertyValue(\"transform\")\n      })\n    }\n    else if (imageCount.value == 1) {\n      element?.style.setProperty(\"transform-origin\", \"100% 0%\")\n      element?.style.setProperty(\"transform\", \"rotate(-20deg)\")\n\n      nextTick(() => {\n        const originActual = element?.style.getPropertyValue(\"transform-origin\")\n        const transformActual = element?.style.getPropertyValue(\"transform\")\n      })\n    }\n    else {\n      element?.style.setProperty(\"transform-origin\", \"10px 10px\")\n      element?.style.setProperty(\"transform\", \"scale(1)\")\n\n      nextTick(() => {\n        const originActual = element?.style.getPropertyValue(\"transform-origin\")\n        const transformActual = element?.style.getPropertyValue(\"transform\")\n      })\n      imageCount.value = -1\n    }\n\n    imageCount.value++\n  }\n\n  const changeScrollViewTransform = () => {\n    const element = scrollViewTransformView.value\n\n    if (scrollViewCount.value == 0) {\n      element?.style.setProperty(\"transform-origin\", \"60px 60px\")\n      element?.style.setProperty(\"transform\", \"translate(50px, 50px) scale(1.5)\")\n\n      nextTick(() => {\n        const originActual = element?.style.getPropertyValue(\"transform-origin\")\n        const transformActual = element?.style.getPropertyValue(\"transform\")\n      })\n    }\n    else if (scrollViewCount.value == 1) {\n      element?.style.setProperty(\"transform-origin\", \"100% 0%\")\n      element?.style.setProperty(\"transform\", \"rotate(-20deg)\")\n\n      nextTick(() => {\n        const originActual = element?.style.getPropertyValue(\"transform-origin\")\n        const transformActual = element?.style.getPropertyValue(\"transform\")\n      })\n    }\n    else {\n      element?.style.setProperty(\"transform-origin\", \"10px 10px\")\n      element?.style.setProperty(\"transform\", \"scale(1)\")\n\n      nextTick(() => {\n        const originActual = element?.style.getPropertyValue(\"transform-origin\")\n        const transformActual = element?.style.getPropertyValue(\"transform\")\n      })\n      scrollViewCount.value = -1\n    }\n\n    scrollViewCount.value++\n  }\n\n  const changeNativeViewTransform = () => {\n    const element = nativeViewTransformView.value?.$el\n\n    if (nativeViewCount.value == 0) {\n      element?.style.setProperty(\"transform-origin\", \"60px 60px\")\n      element?.style.setProperty(\"transform\", \"translate(50px, 50px) scale(1.5)\")\n\n      nextTick(() => {\n        const originActual = element?.style.getPropertyValue(\"transform-origin\")\n        const transformActual = element?.style.getPropertyValue(\"transform\")\n      })\n    }\n    else if (nativeViewCount.value == 1) {\n      element?.style.setProperty(\"transform-origin\", \"100% 0%\")\n      element?.style.setProperty(\"transform\", \"rotate(-20deg)\")\n\n      nextTick(() => {\n        const originActual = element?.style.getPropertyValue(\"transform-origin\")\n        const transformActual = element?.style.getPropertyValue(\"transform\")\n      })\n    }\n    else {\n      element?.style.setProperty(\"transform-origin\", \"10px 10px\")\n      element?.style.setProperty(\"transform\", \"scale(1)\")\n\n      nextTick(() => {\n        const originActual = element?.style.getPropertyValue(\"transform-origin\")\n        const transformActual = element?.style.getPropertyValue(\"transform\")\n      })\n      nativeViewCount.value = -1\n    }\n\n    nativeViewCount.value++\n  }\n\n  const data = reactive({\n    transformOrigin: '50% 50%',\n    transformOriginActual: '',\n    transformOriginActualText: '',\n    transformOriginActualImage: '',\n    transformOriginActualFlat: '',\n    transformOriginActualTextFlat: '',\n    transformOriginActualImageFlat: ''\n  })\n  const viewRefDynamic = ref(null as UniElement | null)\n  const textRefDynamic = ref(null as UniTextElement | null)\n  const imageRefDynamic = ref(null as UniImageElement | null)\n  const viewRefDynamicFlat = ref(null as UniElement | null)\n  const textRefDynamicFlat = ref(null as UniTextElement | null)\n  const imageRefDynamicFlat = ref(null as UniImageElement | null)\n\n  const transformOriginEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '50% 50%' },\n    { value: 2, name: '0% 0%' },\n    { value: 3, name: '100% 0%' },\n    { value: 4, name: '0% 100%' },\n    { value: 5, name: '100% 100%' },\n    { value: 6, name: '10px 10px' },\n    { value: 7, name: '60px 60px' }\n  ]\n\n  const getPropertyValues = () => {\n    data.transformOriginActual = viewRefDynamic.value?.style.getPropertyValue('transform-origin') ?? ''\n    data.transformOriginActualFlat = viewRefDynamicFlat.value?.style.getPropertyValue('transform-origin') ?? ''\n    data.transformOriginActualText = textRefDynamic.value?.style.getPropertyValue('transform-origin') ?? ''\n    data.transformOriginActualTextFlat = textRefDynamicFlat.value?.style.getPropertyValue('transform-origin') ?? ''\n    data.transformOriginActualImage = imageRefDynamic.value?.style.getPropertyValue('transform-origin') ?? ''\n    data.transformOriginActualImageFlat = imageRefDynamicFlat.value?.style.getPropertyValue('transform-origin') ?? ''\n  }\n\n  const changeTransformOrigin = (value: string) => {\n    data.transformOrigin = value\n    viewRefDynamic.value?.style.setProperty('transform-origin', value)\n    viewRefDynamicFlat.value?.style.setProperty('transform-origin', value)\n    textRefDynamic.value?.style.setProperty('transform-origin', value)\n    textRefDynamicFlat.value?.style.setProperty('transform-origin', value)\n    imageRefDynamic.value?.style.setProperty('transform-origin', value)\n    imageRefDynamicFlat.value?.style.setProperty('transform-origin', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeTransformOrigin = (index: number) => {\n    const selectedItem = transformOriginEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeTransformOrigin(selectedItem.name)\n    }\n  }\n\n  const inputChangeTransformOrigin = (value: string) => {\n    changeTransformOrigin(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeTransformOrigin,\n    data\n  })\n</script>\n\n<style>\n  .view {\n    width: 100px;\n    height: 100px;\n    transform-origin: 10px 10px;\n    background-color: aqua;\n    transform: translate(50px, 50px) scale(2);\n    border-width: 1px;\n    border-color: black;\n    border-style: solid;\n  }\n\n  .text-view {\n    width: 200px;\n    height: 70px;\n    padding: 10px;\n    margin: 20px;\n    font-size: 16px;\n    transform-origin: 10px 10px;\n    background-color: aqua;\n    transform: scale(1);\n    border-width: 1px;\n    border-color: black;\n    border-style: solid;\n    text-align: center;\n  }\n\n  .image-view {\n    width: 100px;\n    height: 100px;\n    margin: 20px;\n    transform-origin: 10px 10px;\n    transform: scale(1);\n    border-width: 1px;\n    border-color: black;\n    border-style: solid;\n  }\n\n  .text-container {\n    width: 400px;\n    height: 280px;\n    margin-top: 200px;\n  }\n\n  .image-container {\n    width: 400px;\n    height: 300px;\n  }\n\n  .scroll-view-container {\n    width: 400px;\n    height: 300px;\n    margin-top: 20px;\n  }\n\n  .common-text {\n    width: 50px;\n    height: 50px;\n    background-color: green;\n    font-size: 12px;\n    color: white;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: green;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 120px;\n    background-color: gray;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    justify-content: space-around;\n    margin-top: 10px;\n    width: 100%;\n  }\n\n  .scroll-view-item {\n    position: relative;\n    width: 100%;\n    height:200px;\n    margin: 10px 0;\n  }\n\n  .scroll-view-base {\n    width: 200px;\n    height: 70px;\n    padding: 10px;\n    margin: 20px;\n    font-size: 16px;\n    transform-origin: 10px 10px;\n    background-color: aqua;\n    transform: scale(1);\n    border-width: 1px;\n    border-color: black;\n    border-style: solid;\n    text-align: center;\n    position: relative;\n  }\n\n  .transform-native {\n    background-color: #00FFFF80;\n  }\n\n  .cyan-text {\n    color: #1a1a1a;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n- enum\n"},"transition":{"name":"## transition\n","description":"\ntransition CSS 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性 (en-US)。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\ntransition: <single-transition>#;\n```\n","values":"\n### transition 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| all | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.13\",\"4.13\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 每一个能够进行过渡动画的属性都会进行过渡动画。 |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.13\",\"4.13\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 没有属性会进行过渡动画。 |\n","defaultValue":"","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.transition)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/transition/transition.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/transition/transition.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/transition/transition\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/transition/transition\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\n  <view class=\"transition-page uni-theme-root\">\n    <view class=\"container\">\n      <text class=\"text\">点击修改宽度</text>\n      <view class=\"base-style transition-width\" id=\"widthOrHeight\" @click=\"changeWidthOrHeight\"></view>\n    </view>\n    <view class=\"container\">\n      <text class=\"text\">点击修改宽度(递增)</text>\n      <view class=\"width-progress transition-width\" id=\"widthProgress\" @click=\"changeWidthProgress\"></view>\n    </view>\n    <view class=\"container\">\n      <text class=\"text\">点击修改宽度(通过style设置transition)</text>\n      <view class=\"base-style\" style=\"transition-property: width; transition-duration: 1s;\" id=\"widthOrHeightStyle\"\n        @click=\"changeWidthOrHeightStyle\"></view>\n    </view>\n\n    <view class=\"container\">\n      <text class=\"text\">点击修改Margin</text>\n      <view class=\"base-style transition-margin\" id=\"styleMargin\" @click=\"changeMargin\"></view>\n    </view>\n    <view class=\"container\">\n      <text class=\"text\">点击修改Padding</text>\n      <view class=\"base-style transition-padding\" id=\"stylePadding\" @click=\"changePadding\">\n        <view style=\"background-color: black; height: 50px; width: 50px\"></view>\n      </view>\n    </view>\n    <view class=\"container\">\n      <text class=\"text\">点击修改background-color和opacity</text>\n      <view class=\"base-style transition-background\" id=\"styleBackground\" @click=\"changeBackground\"></view>\n    </view>\n    <view class=\"container\">\n      <text class=\"text\">点击修改background-color（rgba）</text>\n      <view style=\"flex: 1;\">\n        <view class=\"base-style transition-background\" id=\"styleBackground2\" @click=\"changeBackground2\"></view>\n      </view>\n    </view>\n    <view class=\"container\">\n      <text class=\"text\">点击修改opacity渐隐渐现</text>\n      <view class=\"base-style transition-opacity\" id=\"styleOpacity\" @click=\"changeStyleOpacity\"></view>\n    </view>\n    <view class=\"container\">\n      <text class=\"text\">动态修改background-color和duration</text>\n      <view class=\"base-style\" id=\"propertyStyleBackground\" @click=\"propertyChangeBackground\"></view>\n    </view>\n    <view class=\"container\">\n      <text class=\"text\">点击修改Transform</text>\n      <view class=\"base-style transition-transform\" id=\"styleTransform\" @click=\"changeTransform\"></view>\n    </view>\n    <view class=\"container\">\n      <text class=\"text\">点击修改TransformTranslate</text>\n      <view class=\"base-style transition-transform\" id=\"transformTranslate\" @click=\"changeTransformTranslate\"></view>\n    </view>\n    <view class=\"container\">\n      <text class=\"text\">点击修改Transform和宽</text>\n      <view class=\"base-style transition-transform-width\" id=\"styleTransformWithWidth\"\n        @click=\"changeTransformWithWidth\"></view>\n    </view>\n    <view class=\"container\" @click=\"changeTransformWithOrigin\">\n      <text class=\"text\">点击修改Transform（含transform-origin）</text>\n      <view class=\"base-style transition-transform\" style=\"transform-origin: 0 0;\" id=\"styleTransformWithOrigin\"></view>\n    </view>\n\n    <view class=\"container\">\n      <text class=\"text\">点击修改Border</text>\n      <view class=\"base-style transition-border\" id=\"styleBorder\" @click=\"changeBorder\"></view>\n    </view>\n    <view class=\"container\">\n      <text class=\"text\">点击修改Position</text>\n      <view class=\"base-style transition-position\" id=\"stylePosition\" @click=\"changestylePosition\"></view>\n    </view>\n    <view class=\"container\">\n      <text class=\"text\">点击修改bottom</text>\n      <view>\n        <view class=\"base-style transition-bottom\" id=\"styleBottom\" @click=\"changeStyleBottom\"></view>\n      </view>\n    </view>\n    <view class=\"container\">\n      <text class=\"text\">点击修改Scale\n      </text>\n      <view class=\"base-style transition-transform\" id=\"styleChangScale\" @click=\"changestyleScale\"></view>\n    </view>\n    <view class=\"container\">\n      <text class=\"text\">点击修改scale和opacity(cubic-bezier回弹)</text>\n      <view class=\"base-style transition-scale-opacity\" id=\"styleScaleOpacity\" @click=\"changeScaleOpacity\"></view>\n    </view>\n    <view class=\"container\">\n      <text class=\"text\">仅指定transition-duration背影有动画为正常</text>\n      <view style=\"width: 100%;height: 50px;\" :style=\"changestyleTransitionDuration\"\n        @click=\"doChangeTransitionDuration\">\n      </view>\n    </view>\n\n    <view class=\"container\">\n      <text class=\"text\">transition-property: all/none 演示</text>\n      <view class=\"base-style transition-all\" id=\"styleTransitionAll\" @click=\"changeTransitionAll\"></view>\n    </view>\n\n    <view class=\"container\">\n      <text class=\"text\">在组件内滑动测试是否闪动</text>\n      <view class=\"base-style transition-transform\" id=\"styleTransformTranslateScale\" @touchmove=\"handleTouchMove\"\n        @touchstart=\"handleTouchStart\" @touchend=\"handleTouchEnd\">\n        这是一段文字\n      </view>\n    </view>\n\n    <view class=\"container\">\n      <text class=\"text\">测试在style中同时修改transform和width</text>\n      <view style=\"width:100%;height: 100%;\">\n        <view class=\"base-style transition-transform-width\" :style=\"{transform:`translateX(${lineLeft}px)`,width:`${lineWidth}px`}\" @click=\"changeTransform61\">\n        </view>\n      </view>\n    </view>\n\n    <view class=\"container\">\n      <text class=\"text\">测试在style中同时修改transform的translateX/Y的百分比</text>\n      <view style=\"width:100%;height: 100%;\">\n        <view class=\"base-style transition-transform-translate\" :style=\"{transform:`translateX(${translatePercent}) translateY(${translatePercent})`}\" @click=\"changeTransform27520\">\n        </view>\n      </view>\n    </view>\n\n    <view class=\"container\">\n      <text class=\"text\">点击修改宽度(值为auto有无动画交替出现)</text>\n      <view class=\"base-style transition-width\" id=\"widthOrHeightAuto\" @click=\"changeWidthOrHeightAuto\"></view>\n    </view>\n\n    <view class=\"container\">\n      <view class=\"text\">重复修改width</view>\n      <view class=\"base-style transition-width\" id=\"changeWidthInEnd\" style=\"transition-duration: 0.5s;\" @transitionend=\"onChangeWidthEnd\" @click=\"changeWidthInEndFun\"></view>\n    </view>\n\n    <view style=\"margin-top: 20px; margin-left: 7px;\">\n      <text class=\"transition-heading\">text 组件 transition </text>\n    </view>\n\n    <view class=\"container\">\n      <text class=\"text\">text 点击修改 transform (rotate)</text>\n      <text class=\"text-base-style transition-transform\" id=\"textTransform\" @click=\"changeTextTransform\">文字内容</text>\n    </view>\n\n    <view class=\"container\">\n      <text class=\"text\">text 点击修改 opacity</text>\n      <text class=\"text-base-style transition-opacity\" id=\"textOpacity\" @click=\"changeTextOpacity\">文字内容</text>\n    </view>\n\n    <view class=\"container\">\n      <text class=\"text\">text 点击修改 background-color</text>\n      <text class=\"text-base-style transition-background\" id=\"textBackground\" @click=\"changeTextBackground\">文字内容</text>\n    </view>\n\n    <view style=\"margin-top: 20px; margin-left: 7px;\">\n      <text class=\"transition-heading\">image 组件 transition </text>\n    </view>\n\n    <view class=\"container\">\n      <text class=\"text\">image 点击修改 transform (rotate)</text>\n      <image class=\"image-base-style transition-transform\" id=\"imageTransform\" @click=\"changeImageTransform\" src=\"/static/test-image/logo.png\"></image>\n    </view>\n\n    <view class=\"container\">\n      <text class=\"text\">image 点击修改 opacity</text>\n      <image class=\"image-base-style transition-opacity\" id=\"imageOpacity\" @click=\"changeImageOpacity\" src=\"/static/test-image/logo.png\"></image>\n    </view>\n\n    <view class=\"container\">\n      <text class=\"text\">image 点击修改 transform (scale)</text>\n      <image class=\"image-base-style transition-transform\" id=\"imageScale\" @click=\"changeImageScale\" src=\"/static/test-image/logo.png\"></image>\n    </view>\n\n    <view class=\"container\">\n      <text class=\"text\">设置box-shadow之后验证border和background-color效果</text>\n      <view class=\"base-style transition-border-background\" id=\"borderAndBackgroundColor\" @click=\"changeBorderAndBackgroundColor\"></view>\n    </view>\n\n    <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\n    <text class=\"text\">点击 scroll-view 查看 transition 效果</text>\n\n    <view class=\"demo-box\">\n      <scroll-view ref=\"scrollView1\" class=\"base-style\" style=\"transition: width 1s;\" @click=\"changeScrollViewWidth1\">\n        <text class=\"colored-box-text\">transition: width 1s</text>\n      </scroll-view>\n      <scroll-view ref=\"scrollView2\" class=\"base-style\" style=\"transition: width 2s ease-in-out;\" @click=\"changeScrollViewWidth2\">\n        <text class=\"colored-box-text\">transition: width 2s ease-in-out</text>\n      </scroll-view>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n    </view>\n\n    <view class=\"test-container\">\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">view 组件</text>\n        <text class=\"uni-info\">设置值: {{data.transitionValue}}</text>\n        <text class=\"uni-info\">获取值: {{data.transitionActual}}</text>\n        <view class=\"test-box\">\n          <view ref=\"viewRefTransition\" class=\"common-image\" :style=\"{ transition: data.transitionValue }\" @click=\"triggerTransitionView\">\n            <text class=\"colored-box-text\" style=\"font-size: 12px;\">点击view</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">text 组件</text>\n        <text class=\"uni-info\">设置值 sdf: {{data.transitionValue}}</text>\n        <text class=\"uni-info\">获取值: {{data.transitionActualText}}</text>\n        <view class=\"test-box\">\n          <text ref=\"textRefTransition\" class=\"common-text\" :style=\"{ transition: data.transitionValue }\" @click=\"triggerTransitionText\">点击text</text>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">image 组件</text>\n        <text class=\"uni-info\">设置值: {{data.transitionValue}}</text>\n        <text class=\"uni-info\">获取值: {{data.transitionActualImage}}</text>\n        <view class=\"test-box\">\n          <image ref=\"imageRefTransition\" class=\"common-image\" :style=\"{ transition: data.transitionValue }\" @click=\"triggerTransitionImage\" src=\"/static/test-image/logo.png\"></image>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"test-container\">\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">view 组件拍平</text>\n        <text class=\"uni-info\">设置值: {{data.transitionValue}}</text>\n        <text class=\"uni-info\">获取值: {{data.transitionActualFlat}}</text>\n        <view class=\"test-box\">\n          <view ref=\"viewRefTransitionFlat\" class=\"common-image\" :style=\"{ transition: data.transitionValue }\" @click=\"triggerTransitionView\" flatten>\n            <text class=\"colored-box-text\" style=\"font-size: 12px;\">点击view</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">text 组件拍平</text>\n        <text class=\"uni-info\">设置值: {{data.transitionValue}}</text>\n        <text class=\"uni-info\">获取值: {{data.transitionActualTextFlat}}</text>\n        <view class=\"test-box\">\n          <text ref=\"textRefTransitionFlat\" class=\"common-text\" :style=\"{ transition: data.transitionValue }\" @click=\"triggerTransitionText\" flatten>点击text</text>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">image 组件拍平</text>\n        <text class=\"uni-info\">设置值: {{data.transitionValue}}</text>\n        <text class=\"uni-info\">获取值: {{data.transitionActualImageFlat}}</text>\n        <view class=\"test-box\">\n          <image ref=\"imageRefTransitionFlat\" class=\"common-image\" :style=\"{ transition: data.transitionValue }\" @click=\"triggerTransitionImage\" src=\"/static/test-image/logo.png\" flatten></image>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt uni-common-mb\">\n      <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n      <enum-data :items=\"transitionEnum\" title=\"transition 枚举值\" @change=\"radioChangeTransition\" :compact=\"true\"></enum-data>\n      <input-data :defaultValue=\"data.transitionValue\" title=\"transition 自定义值\" type=\"text\" @confirm=\"inputChangeTransition\"></input-data>\n    </view>\n\n    <!-- #ifndef MP-ALIPAY -->\n      <text class=\"uni-title-text uni-common-mt uni-common-mb\">native-view 组件</text>\n      <text class=\"text\">点击 native-view 查看 transition 效果</text>\n      <view class=\"demo-box\">\n        <test-native-view ref=\"nativeView1\" class=\"base-style\" style=\"transition: width 1s;\" @click=\"changeNativeViewWidth1\"></test-native-view>\n        <test-native-view ref=\"nativeView2\" class=\"base-style\" style=\"transition: width 2s ease-in-out;\" @click=\"changeNativeViewWidth2\"></test-native-view>\n      </view>\n    <!-- #endif -->\n\n\t\t<view style=\"margin: 7px; height: 60px;\">\n\t\t\t<navigator url=\"/pages/CSS/transition/transition-transform\" hover-class=\"none\">\n\t\t\t\t<button type=\"primary\">\n\t\t\t\t\ttransform 多个属性示例\n\t\t\t\t</button>\n\t\t\t</navigator>\n\t\t</view>\n  </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  let isTranstionWidthOrHeight = false\n  let isTranstionWidthAuto = false\n  let widthOrHeightAuto: UniElement | null = null\n  let widthOrHeight: UniElement | null = null\n  let widthProgress: UniElement | null = null\n  let isTranstionWidthOrHeightStyle = false\n  let widthOrHeightStyle: UniElement | null = null\n  let progressWidth = 200\n  let isScrollViewWidth1 = false\n  let isScrollViewWidth2 = false\n  const scrollView1 = ref(null as UniElement | null)\n  const scrollView2 = ref(null as UniElement | null)\n  let isNativeViewWidth1 = false\n  let isNativeViewWidth2 = false\n  const nativeView1 = ref<ComponentPublicInstance|null>(null)\n  const nativeView2 = ref<ComponentPublicInstance|null>(null)\n  let isTranstionChangeMargin = false\n  let styleMargin: UniElement | null = null\n  let isTransitionStylePadding = false\n  let stylePadding: UniElement | null = null\n  let isTransitionstyleBackground = false\n  let isTransitionstyleBackground2 = false\n  let isTransitionstyleOpacity = false\n  let styleBackground: UniElement | null = null\n  let styleBackground2: UniElement | null = null\n  let styleOpacity: UniElement | null = null\n  let isTransitionStyleTransform = false\n  let styleTransform: UniElement | null = null\n  let isTransitionStyleTransformWithWidth = false\n  let styleTransformWithWidth: UniElement | null = null\n  let isTransitionstyleBorder = false\n  let styleBorder: UniElement | null = null\n  let isTransitionstylePosition = false\n  let stylePosition: UniElement | null = null\n  let isTransitionStyleBottom = false\n  let styleBottom: UniElement | null = null\n  let isSetTransition = false\n  let isTransitionpropertystyleBackground = false\n  let propertyStyleBackground: UniElement | null = null\n  let isTransitionStyleTransformWithOrigin = false\n  let styleTransformWithOrigin: UniElement | null = null\n  let styleTransformTranslate: UniElement | null = null\n  let isTransformTranslate = false\n  let styleTransformTranslateScale: UniElement | null = null\n  let startX = 0\n  let moveX = 0\n  let oldX = 0\n  const changestyleTransitionDuration = ref('background-color:brown;')\n  let styleTransitionAll: UniElement | null = null\n  let isTransitionAll = false\n  let isTransitionScaleOpacity = false\n  let styleScaleOpacity: UniElement | null = null\n  const lineLeft = ref(0)\n  const lineWidth = ref(200)\n  const translatePercent = ref('0%')\n  let changeWidthInEnd: UniElement | null = null\n  let changeWidthInEndCount = 0\n  let isTextTransform = false\n  let textTransform: UniElement | null = null\n  let isTextOpacity = false\n  let textOpacity: UniElement | null = null\n  let isTextBackground = false\n  let textBackground: UniElement | null = null\n  let isImageTransform = false\n  let imageTransform: UniElement | null = null\n  let isImageOpacity = false\n  let imageOpacity: UniElement | null = null\n  let isImageScale = false\n  let imageScale: UniElement | null = null\n  let isChangeBorderAndBackgroundColor = false\n  let elChangeBorderAndBackgroundColor: UniElement | null = null\n\t// 测试例辅助函数\n\tconst getChangeWidthInEndCount = ():number => {\n\t  return changeWidthInEndCount\n\t}\n\n  onReady(() => {\n    widthOrHeight = uni.getElementById(\"widthOrHeight\")\n    widthProgress = uni.getElementById(\"widthProgress\")\n    widthOrHeightStyle = uni.getElementById(\"widthOrHeightStyle\")\n    styleMargin = uni.getElementById(\"styleMargin\")\n    stylePadding = uni.getElementById(\"stylePadding\")\n    styleBackground = uni.getElementById(\"styleBackground\")\n    styleBackground2 = uni.getElementById(\"styleBackground2\")\n    styleOpacity = uni.getElementById(\"styleOpacity\")\n    styleTransform = uni.getElementById(\"styleTransform\")\n    styleBorder = uni.getElementById(\"styleBorder\")\n    stylePosition = uni.getElementById(\"stylePosition\")\n    styleBottom = uni.getElementById(\"styleBottom\")\n    propertyStyleBackground = uni.getElementById(\"propertyStyleBackground\")\n    styleTransformWithOrigin = uni.getElementById(\"styleTransformWithOrigin\")\n    styleTransformWithWidth = uni.getElementById(\"styleTransformWithWidth\")\n    styleTransformTranslate = uni.getElementById(\"transformTranslate\")\n    styleTransformTranslateScale = uni.getElementById(\"styleTransformTranslateScale\")\n    styleTransitionAll = uni.getElementById(\"styleTransitionAll\")\n    styleScaleOpacity = uni.getElementById(\"styleScaleOpacity\")\n    widthOrHeightAuto = uni.getElementById(\"widthOrHeightAuto\")\n    changeWidthInEnd = uni.getElementById(\"changeWidthInEnd\")\n    textTransform = uni.getElementById(\"textTransform\")\n    textOpacity = uni.getElementById(\"textOpacity\")\n    textBackground = uni.getElementById(\"textBackground\")\n    imageTransform = uni.getElementById(\"imageTransform\")\n    imageOpacity = uni.getElementById(\"imageOpacity\")\n    imageScale = uni.getElementById(\"imageScale\")\n    elChangeBorderAndBackgroundColor = uni.getElementById(\"borderAndBackgroundColor\")\n  })\n\n\n  const changeWidthOrHeight = () => {\n    widthOrHeight?.style?.setProperty(\"width\", isTranstionWidthOrHeight\n      ? '200px'\n      : '300px')\n    isTranstionWidthOrHeight = !isTranstionWidthOrHeight\n  }\n\n  const changeWidthOrHeightAuto = () => {\n    widthOrHeightAuto?.style?.setProperty(\"width\", isTranstionWidthAuto\n      ? '200px'\n      : 'auto')\n    isTranstionWidthAuto = !isTranstionWidthAuto\n  }\n\n  const changeWidthProgress = () => {\n    progressWidth += 20\n    widthProgress?.style?.setProperty(\"width\", progressWidth + 'px')\n  }\n\n  const changeWidthOrHeightStyle = () => {\n    widthOrHeightStyle?.style?.setProperty(\"width\", isTranstionWidthOrHeightStyle\n      ? '200px'\n      : '300px')\n    isTranstionWidthOrHeightStyle = !isTranstionWidthOrHeightStyle\n  }\n\n  const changeScrollViewWidth1 = () => {\n    scrollView1.value?.style.setProperty(\"width\", isScrollViewWidth1 ? '100px' : '150px')\n    isScrollViewWidth1 = !isScrollViewWidth1\n  }\n\n  const changeScrollViewWidth2 = () => {\n    scrollView2.value?.style.setProperty(\"width\", isScrollViewWidth2 ? '100px' : '150px')\n    isScrollViewWidth2 = !isScrollViewWidth2\n  }\n\n  const changeNativeViewWidth1 = () => {\n    nativeView1.value?.$el.style.setProperty(\"width\", isNativeViewWidth1 ? '100px' : '150px')\n    isNativeViewWidth1 = !isNativeViewWidth1\n  }\n\n  const changeNativeViewWidth2 = () => {\n    nativeView2.value?.$el.style.setProperty(\"width\", isNativeViewWidth2 ? '100px' : '150px')\n    isNativeViewWidth2 = !isNativeViewWidth2\n  }\n\n  const changeMargin = () => {\n    styleMargin?.style?.setProperty(\"margin-top\", isTranstionChangeMargin\n      ? '0px'\n      : '50px'\n    )\n    styleMargin?.style?.setProperty(\"margin-left\", isTranstionChangeMargin\n      ? '0px'\n      : '50px'\n    )\n    isTranstionChangeMargin = !isTranstionChangeMargin\n  }\n\n  const changePadding = () => {\n    stylePadding?.style?.setProperty(\"padding-top\", isTransitionStylePadding\n      ? '0px'\n      : '50px')\n    stylePadding?.style?.setProperty(\"padding-left\", isTransitionStylePadding\n      ? '0px'\n      : '50px')\n    isTransitionStylePadding = !isTransitionStylePadding\n  }\n\n  const changeBackground = () => {\n    styleBackground?.style?.setProperty(\"background-color\", isTransitionstyleBackground\n      ? 'brown'\n      : 'black'\n    )\n    styleBackground?.style?.setProperty(\"opacity\", isTransitionstyleBackground\n      ? '1'\n      : '0.5'\n    )\n    isTransitionstyleBackground = !isTransitionstyleBackground\n  }\n\n  const changeBackground2 = () => {\n    styleBackground2?.style?.setProperty(\"background-color\", isTransitionstyleBackground2\n      ? 'brown'\n      : 'rgba(0, 0, 0, 0.5)'\n    )\n    isTransitionstyleBackground2 = !isTransitionstyleBackground2\n  }\n\n  const changeStyleOpacity = () => {\n    styleOpacity?.style?.setProperty(\"opacity\", isTransitionstyleOpacity\n      ? '1'\n      : '0'\n    )\n    isTransitionstyleOpacity = !isTransitionstyleOpacity\n  }\n\n  const propertyChangeBackground = () => {\n    if (!isSetTransition) {\n      propertyStyleBackground?.style?.setProperty(\"transition-property\", \"background-color\")\n      propertyStyleBackground?.style?.setProperty(\"transition-duration\", \"1000ms\")\n      isSetTransition = true\n    }\n    propertyStyleBackground?.style?.setProperty(\"background-color\", isTransitionpropertystyleBackground\n      ? 'brown'\n      : 'black'\n    )\n    isTransitionpropertystyleBackground = !isTransitionpropertystyleBackground\n  }\n\n  const changeTransform = () => {\n    styleTransform?.style?.setProperty(\"transform\", isTransitionStyleTransform\n      ? 'rotate(0deg)'\n      : 'rotate(370deg)'\n    )\n    isTransitionStyleTransform = !isTransitionStyleTransform\n  }\n\n  const changeTransformTranslate = () => {\n    const translate = isTransformTranslate ? `translate(0%,0%)` : `translate(100%,0%)`\n    styleTransformTranslate?.style?.setProperty('transform', translate)\n    isTransformTranslate = !isTransformTranslate\n  }\n\n  const changeTransformWithWidth = () => {\n    styleTransformWithWidth?.style?.setProperty(\"transform\", isTransitionStyleTransformWithWidth\n      ? 'rotate(0deg)'\n      : 'rotate(135deg)'\n    )\n    styleTransformWithWidth?.style?.setProperty(\"width\", isTransitionStyleTransformWithWidth\n      ? '200px'\n      : '100px'\n    )\n    isTransitionStyleTransformWithWidth = !isTransitionStyleTransformWithWidth\n  }\n\n  const changeTransformWithOrigin = () => {\n    styleTransformWithOrigin?.style?.setProperty(\"transform\", isTransitionStyleTransformWithOrigin\n      ? 'scaleX(1)'\n      : 'scaleX(0)'\n    )\n    isTransitionStyleTransformWithOrigin = !isTransitionStyleTransformWithOrigin\n  }\n\n  const changeBorder = () => {\n    styleBorder?.style?.setProperty(\"border-color\", isTransitionstyleBorder\n      ? 'brown'\n      : 'yellow'\n    )\n    isTransitionstyleBorder = !isTransitionstyleBorder\n  }\n\n  const changestylePosition = () => {\n    stylePosition?.style?.setProperty(\"left\", isTransitionstylePosition\n      ? '0px'\n      : '100px'\n    )\n    isTransitionstylePosition = !isTransitionstylePosition\n  }\n\n  const changeStyleBottom = () => {\n    styleBottom?.style?.setProperty(\"bottom\", isTransitionStyleBottom\n      ? '0px'\n      : '-60px'\n    )\n    isTransitionStyleBottom = !isTransitionStyleBottom\n  }\n\n  const getStyleBottom = (): string => {\n    return styleBottom?.style?.getPropertyValue('bottom') ?? ''\n  }\n\n  const changestyleScale = () => {\n    const el = uni.getElementById(\"styleChangScale\")\n    el?.style.setProperty(\"transition-duration\", \"0ms\")\n    el?.style.setProperty(\"transform\", \"translate(10px,10px) scale(1)\")\n    setTimeout(() => {\n      el?.style.setProperty(\"transition-duration\", \"200ms\")\n      el?.style.setProperty(\"transform\", \"translate(10px,10px) scale(0.5)\")\n    }, 200)\n  }\n\n  const changeScaleOpacity = () => {\n    styleScaleOpacity?.style?.setProperty(\"opacity\", isTransitionScaleOpacity\n      ? '1'\n      : '0.4'\n    )\n    styleScaleOpacity?.style?.setProperty(\"transform\", isTransitionScaleOpacity\n      ? 'scale(1)'\n      : 'scale(0.5)'\n    )\n    isTransitionScaleOpacity = !isTransitionScaleOpacity\n  }\n\n  const handleTouchStart = (e : UniTouchEvent) => {\n    startX = e.changedTouches[0].clientX\n  }\n\n  const handleTouchMove = (e : UniTouchEvent) => {\n    console.log(\"touchmove:\" + e.touches[0].clientX + \",\" + e.touches[0].clientY)\n    e.preventDefault()\n    e.stopPropagation()\n    const difX = e.changedTouches[0].clientX\n    moveX = difX - startX + oldX\n    styleTransformTranslateScale?.style?.setProperty('transition-duration', '0ms')\n    styleTransformTranslateScale?.style?.setProperty('transform', `translate(${moveX}px,0px) scale(0.5) rotate(90deg)`)\n  }\n\n  const handleTouchEnd = (_ : UniTouchEvent) => {\n    oldX = moveX\n  }\n\n  const doChangeTransitionDuration = () => {\n    console.log(\"doChangeTransitionDuration\")\n    changestyleTransitionDuration.value\n      = changestyleTransitionDuration.value == 'background-color:brown;' ? 'transition-duration: 2000ms;background-color: blue;' : 'background-color:brown;'\n  }\n\n  const changeTransitionAll = () => {\n    if (!isTransitionAll) {\n      // 设置为 all 时的效果\n      styleTransitionAll?.style?.setProperty(\"transition-property\", \"all\")\n      styleTransitionAll?.style?.setProperty(\"width\", \"300px\")\n      styleTransitionAll?.style?.setProperty(\"height\", \"300px\")\n      styleTransitionAll?.style?.setProperty(\"background-color\", \"blue\")\n      styleTransitionAll?.style?.setProperty(\"transform\", \"rotate(45deg)\")\n    } else {\n      // 设置为 none 时的效果\n      styleTransitionAll?.style?.setProperty(\"transition-property\", \"none\")\n      styleTransitionAll?.style?.setProperty(\"width\", \"200px\")\n      styleTransitionAll?.style?.setProperty(\"height\", \"200px\")\n      styleTransitionAll?.style?.setProperty(\"background-color\", \"brown\")\n      styleTransitionAll?.style?.setProperty(\"transform\", \"rotate(0deg)\")\n    }\n    isTransitionAll = !isTransitionAll\n  }\n\n  const changeTransform61 = () => {\n    if (lineLeft.value == 0) {\n      lineLeft.value = 70\n      lineWidth.value = 300\n    } else {\n      lineLeft.value = 0\n      lineWidth.value = 200\n    }\n  }\n\n  const changeTransform27520 = () => {\n    if (translatePercent.value === '0%') {\n      translatePercent.value = '50%'\n    } else {\n      translatePercent.value = '0%'\n    }\n  }\n\n  const onChangeWidthEnd = (event : UniEvent) => {\n    changeWidthInEnd?.style.setProperty(\"width\",\"300px\")\n    changeWidthInEndCount++\n  }\n\n  const changeWidthInEndFun = () => {\n    changeWidthInEnd?.style.setProperty(\"width\",\"300px\")\n  }\n\n  const changeTextTransform = () => {\n    textTransform?.style?.setProperty(\"transform\", isTextTransform\n      ? 'rotate(0deg)'\n      : 'rotate(45deg)'\n    )\n    isTextTransform = !isTextTransform\n  }\n\n  const changeTextOpacity = () => {\n    textOpacity?.style?.setProperty(\"opacity\", isTextOpacity\n      ? '1'\n      : '0.5'\n    )\n    isTextOpacity = !isTextOpacity\n  }\n\n  const changeTextBackground = () => {\n    textBackground?.style?.setProperty(\"background-color\", isTextBackground\n      ? 'transparent'\n      : 'yellow'\n    )\n    isTextBackground = !isTextBackground\n  }\n\n  const changeImageTransform = () => {\n    imageTransform?.style?.setProperty(\"transform\", isImageTransform\n      ? 'rotate(0deg)'\n      : 'rotate(45deg)'\n    )\n    isImageTransform = !isImageTransform\n  }\n\n  const changeImageOpacity = () => {\n    imageOpacity?.style?.setProperty(\"opacity\", isImageOpacity\n      ? '1'\n      : '0.5'\n    )\n    isImageOpacity = !isImageOpacity\n  }\n\n  const changeImageScale = () => {\n    imageScale?.style?.setProperty(\"transform\", isImageScale\n      ? 'scale(1)'\n      : 'scale(1.5)'\n    )\n    isImageScale = !isImageScale\n  }\n\n  function changeBorderAndBackgroundColor() {\n    elChangeBorderAndBackgroundColor?.style?.setProperty(\"background-color\",!isChangeBorderAndBackgroundColor?\"pink\":\"brown\")\n    elChangeBorderAndBackgroundColor?.style?.setProperty(\"border-color\",!isChangeBorderAndBackgroundColor?\"yellow\":\"blue\")\n    isChangeBorderAndBackgroundColor = !isChangeBorderAndBackgroundColor\n  }\n\n  type TransitionData = {\n    transitionValue: string\n    transitionActual: string\n    transitionActualText: string\n    transitionActualImage: string\n    transitionActualFlat: string\n    transitionActualTextFlat: string\n    transitionActualImageFlat: string\n  }\n  const data = reactive({\n    transitionValue: 'width 1s',\n    transitionActual: '',\n    transitionActualText: '',\n    transitionActualImage: '',\n    transitionActualFlat: '',\n    transitionActualTextFlat: '',\n    transitionActualImageFlat: ''\n  } as TransitionData)\n\n  const viewRefTransition = ref(null as UniElement | null)\n  const textRefTransition = ref(null as UniTextElement | null)\n  const imageRefTransition = ref(null as UniImageElement | null)\n  const viewRefTransitionFlat = ref(null as UniElement | null)\n  const textRefTransitionFlat = ref(null as UniTextElement | null)\n  const imageRefTransitionFlat = ref(null as UniImageElement | null)\n  const isExpandedTransition = ref(false)\n  const isExpandedTransitionText = ref(false)\n  const isExpandedTransitionImage = ref(false)\n\n  const transitionEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'width 2s' },\n    { value: 2, name: 'background-color 1s' },\n    { value: 3, name: 'transform 1s' },\n    { value: 4, name: 'all 1s' },\n    { value: 5, name: 'width 1s, background-color 1s' }\n  ]\n\n  const getPropertyValues = () => {\n    data.transitionActual = viewRefTransition.value?.style.getPropertyValue('transition') ?? ''\n    data.transitionActualFlat = viewRefTransitionFlat.value?.style.getPropertyValue('transition') ?? ''\n    data.transitionActualText = textRefTransition.value?.style.getPropertyValue('transition') ?? ''\n    data.transitionActualTextFlat = textRefTransitionFlat.value?.style.getPropertyValue('transition') ?? ''\n    data.transitionActualImage = imageRefTransition.value?.style.getPropertyValue('transition') ?? ''\n    data.transitionActualImageFlat = imageRefTransitionFlat.value?.style.getPropertyValue('transition') ?? ''\n  }\n\n  const changeTransition = (value: string) => {\n    data.transitionValue = value\n    viewRefTransition.value?.style.setProperty('transition', value)\n    viewRefTransitionFlat.value?.style.setProperty('transition', value)\n    textRefTransition.value?.style.setProperty('transition', value)\n    textRefTransitionFlat.value?.style.setProperty('transition', value)\n    imageRefTransition.value?.style.setProperty('transition', value)\n    imageRefTransitionFlat.value?.style.setProperty('transition', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeTransition = (index: number) => {\n    const selectedItem = transitionEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeTransition(selectedItem.name)\n    }\n  }\n\n  const inputChangeTransition = (value: string) => {\n    changeTransition(value)\n  }\n\n  const triggerTransitionView = () => {\n    const transition: string = data.transitionValue\n    isExpandedTransition.value = !isExpandedTransition.value\n\n    if (transition.includes('background-color')) {\n      const color = isExpandedTransition.value ? 'red' : 'green'\n      viewRefTransition.value?.style.setProperty('background-color', color)\n      viewRefTransitionFlat.value?.style.setProperty('background-color', color)\n    } else if (transition.includes('width')) {\n      const width = isExpandedTransition.value ? '100px' : '50px'\n      viewRefTransition.value?.style.setProperty('width', width)\n      viewRefTransitionFlat.value?.style.setProperty('width', width)\n    } else if (transition.includes('transform')) {\n      const transform = isExpandedTransition.value ? 'rotate(45deg)' : 'rotate(0deg)'\n      viewRefTransition.value?.style.setProperty('transform', transform)\n      viewRefTransitionFlat.value?.style.setProperty('transform', transform)\n    } else if (transition.includes('all')) {\n      const width = isExpandedTransition.value ? '100px' : '50px'\n      const color = isExpandedTransition.value ? 'red' : 'green'\n      viewRefTransition.value?.style.setProperty('width', width)\n      viewRefTransition.value?.style.setProperty('background-color', color)\n      viewRefTransitionFlat.value?.style.setProperty('width', width)\n      viewRefTransitionFlat.value?.style.setProperty('background-color', color)\n    }\n  }\n\n  const triggerTransitionText = () => {\n    const transition: string = data.transitionValue\n    isExpandedTransitionText.value = !isExpandedTransitionText.value\n\n    if (transition.includes('background-color')) {\n      const color = isExpandedTransitionText.value ? 'red' : 'green'\n      textRefTransition.value?.style.setProperty('background-color', color)\n      textRefTransitionFlat.value?.style.setProperty('background-color', color)\n    } else if (transition.includes('width')) {\n      const width = isExpandedTransitionText.value ? '100px' : '50px'\n      textRefTransition.value?.style.setProperty('width', width)\n      textRefTransitionFlat.value?.style.setProperty('width', width)\n    } else if (transition.includes('transform')) {\n      const transform = isExpandedTransitionText.value ? 'rotate(45deg)' : 'rotate(0deg)'\n      textRefTransition.value?.style.setProperty('transform', transform)\n      textRefTransitionFlat.value?.style.setProperty('transform', transform)\n    } else if (transition.includes('all')) {\n      const width = isExpandedTransitionText.value ? '100px' : '50px'\n      const color = isExpandedTransitionText.value ? 'red' : 'green'\n      textRefTransition.value?.style.setProperty('width', width)\n      textRefTransition.value?.style.setProperty('background-color', color)\n      textRefTransitionFlat.value?.style.setProperty('width', width)\n      textRefTransitionFlat.value?.style.setProperty('background-color', color)\n    }\n  }\n\n  const triggerTransitionImage = () => {\n    const transition: string = data.transitionValue\n    isExpandedTransitionImage.value = !isExpandedTransitionImage.value\n\n    if (transition.includes('background-color')) {\n      const color = isExpandedTransitionImage.value ? 'red' : 'green'\n      imageRefTransition.value?.style.setProperty('background-color', color)\n      imageRefTransitionFlat.value?.style.setProperty('background-color', color)\n    } else if (transition.includes('width')) {\n      const width = isExpandedTransitionImage.value ? '100px' : '50px'\n      imageRefTransition.value?.style.setProperty('width', width)\n      imageRefTransitionFlat.value?.style.setProperty('width', width)\n    } else if (transition.includes('transform')) {\n      const transform = isExpandedTransitionImage.value ? 'rotate(45deg)' : 'rotate(0deg)'\n      imageRefTransition.value?.style.setProperty('transform', transform)\n      imageRefTransitionFlat.value?.style.setProperty('transform', transform)\n    } else if (transition.includes('all')) {\n      const width = isExpandedTransitionImage.value ? '100px' : '50px'\n      const color = isExpandedTransitionImage.value ? 'red' : 'green'\n      imageRefTransition.value?.style.setProperty('width', width)\n      imageRefTransition.value?.style.setProperty('background-color', color)\n      imageRefTransitionFlat.value?.style.setProperty('width', width)\n      imageRefTransitionFlat.value?.style.setProperty('background-color', color)\n    }\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n\tdefineExpose({\n\t  changeWidthOrHeight,\n\t  changeWidthProgress,\n\t  changeMargin,\n\t  changePadding,\n\t  changeBackground,\n\t  changeBackground2,\n\t  changeStyleOpacity,\n\t  propertyChangeBackground,\n\t  changeTransform,\n\t  changeTransformTranslate,\n\t  changeTransformWithWidth,\n\t  changeTransformWithOrigin,\n\t  changeBorder,\n\t  changestylePosition,\n\t  changeStyleBottom,\n\t  changeTransitionAll,\n\t  changeWidthInEndFun,\n\t  getChangeWidthInEndCount,\n    getStyleBottom,\n    changeBorderAndBackgroundColor,\n\t  data\n\t})\n\n</script>\n\n<style>\n  .container {\n    margin: 7px;\n    background-color: var(--list-background-color, #ffffff);\n  }\n\n  .text {\n    margin-top: 10px;\n    margin-bottom: 16px;\n    color: var(--text-color, #333333);\n  }\n\n  .transition-heading {\n    font-size: 18px;\n    font-weight: bold;\n    color: var(--text-color, #333333);\n  }\n\n  .colored-box-text {\n    color: #ffffff;\n  }\n\n  .base-style {\n    width: 100px;\n    height: 100px;\n    background-color: brown;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    justify-content: space-around;\n    margin-top: 10px;\n  }\n\n  .width-progress {\n    width: 100px;\n    height: 100px;\n    border-radius: 100px;\n    background-color: brown;\n  }\n\n  .transform-bgColor {\n    transition-property: background-color;\n    transition-duration: 0.5s;\n  }\n\n  .transition-width {\n    transition-property: width;\n    transition-duration: 1s;\n  }\n\n  .transition-margin {\n    transition-property: margin-left, margin-top;\n    transition-duration: 1s;\n  }\n\n  .transition-padding {\n    transition-property: padding-left, padding-top;\n    transition-duration: 1s;\n  }\n\n  .transition-background {\n    transition-property: background-color, opacity;\n    transition-duration: 1s;\n  }\n\n  .transition-opacity {\n    transition-property: opacity;\n    transition-duration: 1s;\n  }\n\n  .transition-transform {\n    transform: translate(0%, 0%) scaleX(1) rotate(0deg);\n    transition-property: transform;\n    transition-duration: 1s;\n  }\n\n  .transition-scale-opacity {\n    opacity: 1;\n    transform: scale(1);\n    transition-property: transform, opacity;\n    transition-duration: 800ms;\n    transition-timing-function: cubic-bezier(0.2, 1.8, 0.3, 1);\n  }\n\n  .transition-border {\n    border-width: 5px;\n    border-color: brown;\n    border-style: solid;\n    transition-property: border-color;\n    transition-duration: 1s;\n  }\n\n  .transition-position {\n    left: 0px;\n    transition-property: left;\n    transition-duration: 1s;\n  }\n\n  .transition-bottom {\n    position: relative;\n    bottom: 0px;\n    transition-property: bottom;\n    transition-duration: 1s;\n  }\n\n  .transition-transform-width {\n    transform: rotate(0deg);\n    transition-property: transform, width;\n    transition-duration: 1s;\n  }\n\n  .transition-transform-translate {\n    transition-property: transform;\n    transition-duration: 1s;\n  }\n\n  .transition-all {\n    transition-property: all;\n    transition-duration: 1s;\n  }\n\n  .text-base-style {\n    width: 200px;\n    height: 50px;\n    padding: 10px;\n    font-size: 16px;\n    text-align: center;\n    background-color: lightblue;\n    color: #1a1a1a;\n  }\n\n  .image-base-style {\n    width: 100px;\n    height: 100px;\n  }\n  .transition-border-background {\n    box-shadow: 8px 8px 8px rgba(0, 255, 0, 1);\n    border-color: blue;\n    border-width: 3px;\n    border-style: solid;\n    transition-property: border-color, background-color;\n    transition-duration: 1s;\n  }\n\n  .common-text {\n    width: 50px;\n    height: 50px;\n    background-color: green;\n    font-size: 12px;\n    color: white;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: green;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 120px;\n    background-color: gray;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- time\n- enum\n"},"transition-delay":{"name":"## transition-delay\n","description":"\nCSS 的transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\ntransition-delay: <time>#;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0s`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition-delay)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.transition.transition-delay)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/transition/transition-delay.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/transition/transition-delay.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/transition/transition-delay\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/transition/transition-delay\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view>\n      <text class=\"uni-title-text\">view 组件 transition-delay：1s</text>\n      <view :class=\"classValue\"></view>\n      <view class=\"button-container\">\n        <button class=\"button-item\" @click=\"start\">start</button>\n        <button class=\"button-item\" @click=\"reset\">reset</button>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">text 组件 transition-delay：2s</text>\n      <text :class=\"textClassValue\">transition-delay: 2s</text>\n      <view class=\"button-container\">\n        <button class=\"button-item\" @click=\"textStart\">text start</button>\n        <button class=\"button-item\" @click=\"textReset\">text reset</button>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">image 组件 transition-delay：1s</text>\n      <image :class=\"imageClassValue\" src=\"/static/test-image/logo.png\"></image>\n      <view class=\"button-container\">\n        <button class=\"button-item\" @click=\"imageStart\">image start</button>\n        <button class=\"button-item\" @click=\"imageReset\">image reset</button>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件 transition-delay：1s</text>\n      <scroll-view :class=\"scrollViewClassValue\"></scroll-view>\n      <view class=\"button-container\">\n        <button class=\"button-item\" @click=\"scrollViewStart\">scroll-view start</button>\n        <button class=\"button-item\" @click=\"scrollViewReset\">scroll-view reset</button>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.transitionDelayDynamic}}</text>\n          <text class=\"uni-info\">获取值: {{data.transitionDelayActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefDynamic\" class=\"common-image test-view\" :style=\"{ transitionDelay: data.transitionDelayDynamic, transitionProperty: 'width', transitionDuration: '1s' }\" @click=\"triggerTransitionDynamic\">\n              <text style=\"font-size: 12px;\">点击view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.transitionDelayDynamic}}</text>\n          <text class=\"uni-info\">获取值: {{data.transitionDelayActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefDynamic\" class=\"common-text test-text\" :style=\"{ transitionDelay: data.transitionDelayDynamic, transitionProperty: 'width', transitionDuration: '1s' }\" @click=\"triggerTransitionTextDynamic\">点击text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.transitionDelayDynamic}}</text>\n          <text class=\"uni-info\">获取值: {{data.transitionDelayActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefDynamic\" class=\"common-image test-image\" :style=\"{ transitionDelay: data.transitionDelayDynamic, transitionProperty: 'width', transitionDuration: '1s' }\" @click=\"triggerTransitionImageDynamic\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"transitionDelayEnum\" title=\"transition-delay 枚举值\" @change=\"radioChangeTransitionDelay\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.transitionDelayDynamic\" title=\"transition-delay 自定义值\" type=\"text\" @confirm=\"inputChangeTransitionDelay\"></input-data>\n      </view>\n\n      <!-- #ifndef MP-ALIPAY -->\n        <text class=\"uni-title-text uni-common-mt uni-common-mb\">native-view 组件 transition-delay：1s</text>\n        <test-native-view :class=\"nativeViewClassValue\"></test-native-view>\n        <view class=\"button-container\">\n          <button class=\"button-item\" @click=\"nativeViewStart\">native-view start</button>\n          <button class=\"button-item\" @click=\"nativeViewReset\">native-view reset</button>\n        </view>\n      <!-- #endif -->\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n\n  const classValue = ref('box')\n  const textClassValue = ref('text-box')\n  const imageClassValue = ref('image-box')\n  const scrollViewClassValue = ref('scroll-view-box')\n  const nativeViewClassValue = ref('native-view-box')\n\n  const start = () => {\n    classValue.value = 'box ani'\n  }\n\n  const reset = () => {\n    classValue.value = 'box'\n  }\n\n  const textStart = () => {\n    textClassValue.value = 'text-box text-ani'\n  }\n\n  const textReset = () => {\n    textClassValue.value = 'text-box'\n  }\n\n  const imageStart = () => {\n    imageClassValue.value = 'image-box image-ani'\n  }\n\n  const imageReset = () => {\n    imageClassValue.value = 'image-box'\n  }\n\n  const scrollViewStart = () => {\n    scrollViewClassValue.value = 'scroll-view-box scroll-view-ani'\n  }\n\n  const scrollViewReset = () => {\n    scrollViewClassValue.value = 'scroll-view-box'\n  }\n\n  const nativeViewStart = () => {\n    nativeViewClassValue.value = 'native-view-box native-view-ani'\n  }\n\n  const nativeViewReset = () => {\n    nativeViewClassValue.value = 'native-view-box'\n  }\n\n  const jest_start = () => {\n    start()\n  }\n\n  const jest_reset = () => {\n    reset()\n  }\n\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    transitionDelayDynamic: '1s',\n    transitionDelayActual: '',\n    transitionDelayActualText: '',\n    transitionDelayActualImage: ''\n  })\n  const viewRefDynamic = ref(null as UniElement | null)\n  const textRefDynamic = ref(null as UniTextElement | null)\n  const imageRefDynamic = ref(null as UniImageElement | null)\n  const scrollViewRefDynamic = ref(null as UniElement | null)\n  const isExpandedDynamic = ref(false)\n  const isExpandedDynamicText = ref(false)\n  const isExpandedDynamicImage = ref(false)\n  const isExpandedDynamicScrollView = ref(false)\n\n  const transitionDelayEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0s' },\n    { value: 2, name: '0.5s' },\n    { value: 3, name: '1s' },\n    { value: 4, name: '2s' },\n  ]\n\n  const getPropertyValues = () => {\n    data.transitionDelayActual = viewRefDynamic.value?.style.getPropertyValue('transition-delay') ?? ''\n    data.transitionDelayActualText = textRefDynamic.value?.style.getPropertyValue('transition-delay') ?? ''\n    data.transitionDelayActualImage = imageRefDynamic.value?.style.getPropertyValue('transition-delay') ?? ''\n  }\n\n  const changeTransitionDelayDynamic = (value: string) => {\n    data.transitionDelayDynamic = value\n    viewRefDynamic.value?.style.setProperty('transition-delay', value)\n    textRefDynamic.value?.style.setProperty('transition-delay', value)\n    imageRefDynamic.value?.style.setProperty('transition-delay', value)\n    scrollViewRefDynamic.value?.style.setProperty('transition-delay', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeTransitionDelay = (index: number) => {\n    const selectedItem = transitionDelayEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeTransitionDelayDynamic(selectedItem.name)\n    }\n  }\n\n  const inputChangeTransitionDelay = (value: string) => {\n    changeTransitionDelayDynamic(value)\n  }\n\n  const triggerTransitionDynamic = () => {\n    isExpandedDynamic.value = !isExpandedDynamic.value\n    const width = isExpandedDynamic.value ? '100px' : '50px'\n    viewRefDynamic.value?.style.setProperty('width', width)\n  }\n\n  const triggerTransitionTextDynamic = () => {\n    isExpandedDynamicText.value = !isExpandedDynamicText.value\n    const width = isExpandedDynamicText.value ? '100px' : '50px'\n    textRefDynamic.value?.style.setProperty('width', width)\n  }\n\n  const triggerTransitionImageDynamic = () => {\n    isExpandedDynamicImage.value = !isExpandedDynamicImage.value\n    const width = isExpandedDynamicImage.value ? '100px' : '50px'\n    imageRefDynamic.value?.style.setProperty('width', width)\n  }\n\n  const triggerTransitionScrollViewDynamic = () => {\n    isExpandedDynamicScrollView.value = !isExpandedDynamicScrollView.value\n    const width = isExpandedDynamicScrollView.value ? '100px' : '50px'\n    scrollViewRefDynamic.value?.style.setProperty('width', width)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n    if (scrollViewRefDynamic.value != null) {\n      scrollViewRefDynamic.value.style.setProperty('transition-delay', data.transitionDelayDynamic)\n      scrollViewRefDynamic.value.style.setProperty('transition-property', 'width')\n      scrollViewRefDynamic.value.style.setProperty('transition-duration', '1s')\n    }\n  })\n\n  defineExpose({\n    jest_start,\n    jest_reset,\n    radioChangeTransitionDelay,\n    data\n  })\n\n</script>\n\n<style>\n  .box {\n    width: 200px;\n    height: 50px;\n    background-color: blue;\n  }\n\n  .ani {\n    transition-property: width;\n    transition-duration: 2s;\n    transition-delay: 1s;\n    width: 300px;\n  }\n\n  .text-box {\n    width: 200px;\n    height: 60px;\n    padding: 10px;\n    font-size: 16px;\n    background-color: lightblue;\n    text-align: center;\n  }\n\n  .text-ani {\n    transition-property: width;\n    transition-duration: 2s;\n    transition-delay: 2s;\n    width: 300px;\n  }\n\n  .image-box {\n    width: 100px;\n    height: 100px;\n  }\n\n  .image-ani {\n    transition-property: width, height;\n    transition-duration: 2s;\n    transition-delay: 1s;\n    width: 150px;\n    height: 150px;\n  }\n\n  .common-text {\n    width: 50px;\n    height: 50px;\n    background-color: green;\n    font-size: 12px;\n    color: white;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: green;\n  }\n\n  .scroll-view-box {\n    width: 200px;\n    height: 50px;\n    background-color: green;\n  }\n\n  .scroll-view-ani {\n    transition-property: width;\n    transition-duration: 2s;\n    transition-delay: 1s;\n    width: 300px;\n  }\n\n  .native-view-box {\n    width: 200px;\n    height: 50px;\n    background-color: green;\n  }\n\n  .native-view-ani {\n    transition-property: width;\n    transition-duration: 2s;\n    transition-delay: 1s;\n    width: 300px;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 80px;\n    background-color: gray;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    justify-content: space-around;\n    margin-top: 10px;\n  }\n\n\n  .button-container {\n    flex-direction: row;\n    margin-top: 10px;\n    padding-bottom: 15px;\n    border-bottom:#d3d3d3 solid 1px;\n  }\n\n  .button-item {\n    margin-right: 10px;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- time\n"},"transition-duration":{"name":"## transition-duration\n","description":"\ntransition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s，表示不出现过渡动画。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\ntransition-duration: <time>#;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0s`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition-duration)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.transition.transition-duration)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/transition/transition-duration.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/transition/transition-duration.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/transition/transition-duration\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/transition/transition-duration\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view>\n      <text class=\"uni-title-text\">view 组件 transition-duration：2s </text>\n      <view :class=\"classValue\"></view>\n      <view class=\"button-container\">\n        <button class=\"button-item\" @click=\"start\">start</button>\n        <button class=\"button-item\" @click=\"reset\">reset</button>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">text 组件 transition-duration: 2s</text>\n      <text :class=\"textClassValue\">transition-duration: 2s</text>\n      <view class=\"button-container\">\n        <button class=\"button-item\" @click=\"textStart\">text start</button>\n        <button class=\"button-item\" @click=\"textReset\">text reset</button>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">image 组件 transition-duration: 2s</text>\n      <image :class=\"imageClassValue\" src=\"/static/test-image/logo.png\"></image>\n      <view class=\"button-container\">\n        <button class=\"button-item\" @click=\"imageStart\">image start</button>\n        <button class=\"button-item\" @click=\"imageReset\">image reset</button>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件 transition-duration: 2s</text>\n      <scroll-view :class=\"scrollViewClassValue\"></scroll-view>\n      <view class=\"button-container\">\n        <button class=\"button-item\" @click=\"scrollViewStart\">scroll-view start</button>\n        <button class=\"button-item\" @click=\"scrollViewReset\">scroll-view reset</button>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.transitionDurationDynamic}}</text>\n          <text class=\"uni-info\">获取值: {{data.transitionDurationActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefDynamic\" class=\"common-image\" :style=\"{ transitionDuration: data.transitionDurationDynamic, transitionProperty: 'width' }\" @click=\"triggerTransitionDynamic\">\n              <text style=\"font-size: 12px;\">点击view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.transitionDurationDynamic}}</text>\n          <text class=\"uni-info\">获取值: {{data.transitionDurationActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefDynamic\" class=\"common-text\" :style=\"{ transitionDuration: data.transitionDurationDynamic, transitionProperty: 'width' }\" @click=\"triggerTransitionTextDynamic\">点击text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.transitionDurationDynamic}}</text>\n          <text class=\"uni-info\">获取值: {{data.transitionDurationActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefDynamic\" class=\"common-image\" :style=\"{ transitionDuration: data.transitionDurationDynamic, transitionProperty: 'width' }\" @click=\"triggerTransitionImageDynamic\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.transitionDurationDynamic}}</text>\n          <text class=\"uni-info\">获取值: {{data.transitionDurationActualFlat}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefDynamicFlat\" class=\"common-image\" :style=\"{ transitionDuration: data.transitionDurationDynamic, transitionProperty: 'width' }\" @click=\"triggerTransitionDynamic\" flatten>\n              <text style=\"font-size: 12px;\">点击view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.transitionDurationDynamic}}</text>\n          <text class=\"uni-info\">获取值: {{data.transitionDurationActualTextFlat}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefDynamicFlat\" class=\"common-text\" :style=\"{ transitionDuration: data.transitionDurationDynamic, transitionProperty: 'width' }\" @click=\"triggerTransitionTextDynamic\" flatten>点击text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件拍平</text>\n          <text class=\"uni-info\">设置值: {{data.transitionDurationDynamic}}</text>\n          <text class=\"uni-info\">获取值: {{data.transitionDurationActualImageFlat}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefDynamicFlat\" class=\"common-image\" :style=\"{ transitionDuration: data.transitionDurationDynamic, transitionProperty: 'width' }\" @click=\"triggerTransitionImageDynamic\" src=\"/static/test-image/logo.png\" flatten></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"transitionDurationEnum\" title=\"transition-duration 枚举值\" @change=\"radioChangeTransitionDuration\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.transitionDurationDynamic\" title=\"transition-duration 自定义值\" type=\"text\" @confirm=\"inputChangeTransitionDuration\"></input-data>\n      </view>\n\n      <!-- #ifndef MP-ALIPAY -->\n        <text class=\"uni-title-text uni-common-mt uni-common-mb\">native-view 组件 transition-duration: 2s</text>\n        <test-native-view :class=\"nativeViewClassValue\"></test-native-view>\n        <view class=\"button-container\">\n          <button class=\"button-item\" @click=\"nativeViewStart\">native-view start</button>\n          <button class=\"button-item\" @click=\"nativeViewReset\">native-view reset</button>\n        </view>\n      <!-- #endif -->\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  const classValue = ref('box')\n  const textClassValue = ref('text-box')\n  const imageClassValue = ref('image-box')\n  const scrollViewClassValue = ref('scroll-view-box')\n  const nativeViewClassValue = ref('native-view-box')\n\n  const start = () => {\n    classValue.value = 'box ani'\n  }\n\n  const reset = () => {\n    classValue.value = 'box'\n  }\n\n  const textStart = () => {\n    textClassValue.value = 'text-box text-ani'\n  }\n\n  const textReset = () => {\n    textClassValue.value = 'text-box'\n  }\n\n  const imageStart = () => {\n    imageClassValue.value = 'image-box image-ani'\n  }\n\n  const imageReset = () => {\n    imageClassValue.value = 'image-box'\n  }\n\n  const scrollViewStart = () => {\n    scrollViewClassValue.value = 'scroll-view-box scroll-view-ani'\n  }\n\n  const scrollViewReset = () => {\n    scrollViewClassValue.value = 'scroll-view-box'\n  }\n\n  const nativeViewStart = () => {\n    nativeViewClassValue.value = 'native-view-box native-view-ani'\n  }\n\n  const nativeViewReset = () => {\n    nativeViewClassValue.value = 'native-view-box'\n  }\n\n  const jest_start = () => {\n    start()\n    textStart()\n    imageStart()\n  }\n\n  const jest_reset = () => {\n    reset()\n    textReset()\n    imageReset()\n  }\n\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    transitionDurationDynamic: '2s',\n    transitionDurationActual: '',\n    transitionDurationActualText: '',\n    transitionDurationActualImage: '',\n    transitionDurationActualFlat: '',\n    transitionDurationActualTextFlat: '',\n    transitionDurationActualImageFlat: ''\n  })\n  const viewRefDynamic = ref(null as UniElement | null)\n  const textRefDynamic = ref(null as UniTextElement | null)\n  const imageRefDynamic = ref(null as UniImageElement | null)\n  const viewRefDynamicFlat = ref(null as UniElement | null)\n  const textRefDynamicFlat = ref(null as UniTextElement | null)\n  const imageRefDynamicFlat = ref(null as UniImageElement | null)\n  const scrollViewRefDynamic = ref(null as UniElement | null)\n  const isExpandedDynamic = ref(false)\n  const isExpandedDynamicText = ref(false)\n  const isExpandedDynamicImage = ref(false)\n  const isExpandedDynamicScrollView = ref(false)\n\n  const transitionDurationEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0s' },\n    { value: 2, name: '0.5s' },\n    { value: 3, name: '1s' },\n    { value: 4, name: '5s' },\n  ]\n\n  const getPropertyValues = () => {\n    data.transitionDurationActual = viewRefDynamic.value?.style.getPropertyValue('transition-duration') ?? ''\n    data.transitionDurationActualFlat = viewRefDynamicFlat.value?.style.getPropertyValue('transition-duration') ?? ''\n    data.transitionDurationActualText = textRefDynamic.value?.style.getPropertyValue('transition-duration') ?? ''\n    data.transitionDurationActualTextFlat = textRefDynamicFlat.value?.style.getPropertyValue('transition-duration') ?? ''\n    data.transitionDurationActualImage = imageRefDynamic.value?.style.getPropertyValue('transition-duration') ?? ''\n    data.transitionDurationActualImageFlat = imageRefDynamicFlat.value?.style.getPropertyValue('transition-duration') ?? ''\n  }\n\n\n  const changeTransitionDurationDynamic = (value: string) => {\n    data.transitionDurationDynamic = value\n    viewRefDynamic.value?.style.setProperty('transition-duration', value)\n    viewRefDynamicFlat.value?.style.setProperty('transition-duration', value)\n    textRefDynamic.value?.style.setProperty('transition-duration', value)\n    textRefDynamicFlat.value?.style.setProperty('transition-duration', value)\n    imageRefDynamic.value?.style.setProperty('transition-duration', value)\n    imageRefDynamicFlat.value?.style.setProperty('transition-duration', value)\n    scrollViewRefDynamic.value?.style.setProperty('transition-duration', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeTransitionDuration = (index: number) => {\n    const selectedItem = transitionDurationEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeTransitionDurationDynamic(selectedItem.name)\n    }\n  }\n\n  const inputChangeTransitionDuration = (value: string) => {\n    changeTransitionDurationDynamic(value)\n  }\n\n  const triggerTransitionDynamic = () => {\n    isExpandedDynamic.value = !isExpandedDynamic.value\n    const width = isExpandedDynamic.value ? '100px' : '50px'\n    viewRefDynamic.value?.style.setProperty('width', width)\n    viewRefDynamicFlat.value?.style.setProperty('width', width)\n  }\n\n  const triggerTransitionTextDynamic = () => {\n    isExpandedDynamicText.value = !isExpandedDynamicText.value\n    const width = isExpandedDynamicText.value ? '100px' : '50px'\n    textRefDynamic.value?.style.setProperty('width', width)\n    textRefDynamicFlat.value?.style.setProperty('width', width)\n  }\n\n  const triggerTransitionImageDynamic = () => {\n    isExpandedDynamicImage.value = !isExpandedDynamicImage.value\n    const width = isExpandedDynamicImage.value ? '100px' : '50px'\n    imageRefDynamic.value?.style.setProperty('width', width)\n    imageRefDynamicFlat.value?.style.setProperty('width', width)\n  }\n\n  const triggerTransitionScrollViewDynamic = () => {\n    isExpandedDynamicScrollView.value = !isExpandedDynamicScrollView.value\n    const width = isExpandedDynamicScrollView.value ? '100px' : '50px'\n    scrollViewRefDynamic.value?.style.setProperty('width', width)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n    if (scrollViewRefDynamic.value != null) {\n      scrollViewRefDynamic.value.style.setProperty('transition-duration', data.transitionDurationDynamic)\n      scrollViewRefDynamic.value.style.setProperty('transition-property', 'width')\n    }\n  })\n\n  defineExpose({\n    jest_start,\n    jest_reset,\n    data\n  })\n\n</script>\n\n<style>\n  .box {\n    width: 200px;\n    height: 50px;\n    background-color: blue;\n  }\n\n  .ani {\n    transition-duration: 2s;\n    width: 300px;\n  }\n\n  .text-box {\n    width: 200px;\n    height: 60px;\n    padding: 10px;\n    font-size: 16px;\n    background-color: lightblue;\n    text-align: center;\n  }\n\n  .text-ani {\n    transition-duration: 2s;\n    width: 300px;\n  }\n\n  .image-box {\n    width: 100px;\n    height: 100px;\n  }\n\n  .image-ani {\n    transition-duration: 2s;\n    width: 150px;\n    height: 150px;\n  }\n\n  .common-text {\n    width: 50px;\n    height: 50px;\n    background-color: green;\n    font-size: 12px;\n    color: white;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: green;\n  }\n\n  .scroll-view-box {\n    width: 200px;\n    height: 50px;\n    background-color: green;\n  }\n\n  .scroll-view-ani {\n    transition-duration: 2s;\n    width: 300px;\n  }\n\n  .native-view-box {\n    width: 200px;\n    height: 50px;\n    background-color: green;\n  }\n\n  .native-view-ani {\n    transition-property: width;\n    transition-duration: 2s;\n    width: 300px;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 80px;\n    background-color: gray;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    justify-content: space-around;\n    margin-top: 10px;\n  }\n\n  .button-container {\n    flex-direction: row;\n    margin-top: 10px;\n    padding-bottom: 15px;\n    border-bottom:#d3d3d3 solid 1px;\n  }\n\n  .button-item {\n    margin-right: 10px;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- time\n"},"transition-property":{"name":"## transition-property\n","description":"\ntransition-property 指定应用过渡属性的名称。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\ntransition-property: none | <single-transition-property>#;\n```\n","values":"\n### transition-property 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| all | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.13\",\"4.13\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 所有可被动画的属性都表现出过渡动画。 |\n| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.13\",\"4.13\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 没有过渡动画。 |\n| width | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制宽度属性的过渡效果 |\n| height | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制高度属性的过渡效果 |\n| margin | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\",\"5.07\"]],\"status\":\"SUPPORTED\"}' /> | 控制外边距属性的过渡效果 |\n| margin-top | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\",\"5.07\"]],\"status\":\"SUPPORTED\"}' /> | 控制上外边距属性的过渡效果 |\n| margin-bottom | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\",\"5.07\"]],\"status\":\"SUPPORTED\"}' /> | 控制下外边距属性的过渡效果 |\n| margin-left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\",\"5.07\"]],\"status\":\"SUPPORTED\"}' /> | 控制左外边距属性的过渡效果 |\n| margin-right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\",\"5.07\"]],\"status\":\"SUPPORTED\"}' /> | 控制右外边距属性的过渡效果 |\n| left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制左侧位置属性的过渡效果 |\n| right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制右侧位置属性的过渡效果 |\n| top | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制顶部位置属性的过渡效果 |\n| bottom | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制底部位置属性的过渡效果 |\n| padding | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\",\"5.07\"]],\"status\":\"SUPPORTED\"}' /> | 控制内边距属性的过渡效果 |\n| padding-left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\",\"5.07\"]],\"status\":\"SUPPORTED\"}' /> | 控制左内边距属性的过渡效果 |\n| padding-right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\",\"5.07\"]],\"status\":\"SUPPORTED\"}' /> | 控制右内边距属性的过渡效果 |\n| padding-top | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\",\"5.07\"]],\"status\":\"SUPPORTED\"}' /> | 控制上内边距属性的过渡效果 |\n| padding-bottom | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\",\"5.07\"]],\"status\":\"SUPPORTED\"}' /> | 控制下内边距属性的过渡效果 |\n| opacity | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制透明度属性的过渡效果 |\n| background-color | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制背景颜色属性的过渡效果 |\n| border-color | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制边框颜色属性的过渡效果 |\n| border-top-color | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制上边框颜色属性的过渡效果 |\n| border-bottom-color | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制下边框颜色属性的过渡效果 |\n| border-left-color | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制左边框颜色属性的过渡效果 |\n| border-right-color | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制右边框颜色属性的过渡效果 |\n| transform | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制变换属性的过渡效果 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue-app | all |\n| uvue-web | all |\n\n **注意**：W3C 默认值为：all","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition-property)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.transition.transition-property)\n","example":"","restrictions":"\n### 值限制\n- enum\n"},"transition-timing-function":{"name":"## transition-timing-function\n","description":"\nCSS 属性受到 transition effect的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个 transition 变化过程中，变化速度可以不断改变。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\ntransition-timing-function: <easing-function>#;\n```\n","values":"\n### transition-timing-function 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| ease | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 默认值。表示过渡效果开始缓慢，然后逐渐加速，最后减速结束。这是大多数情况下的推荐值，因为它创建了平滑的过渡效果。 |\n| ease-in | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 过渡开始时较慢，然后逐渐加速。这会在过渡初期创建一个缓慢的效果。 |\n| ease-out | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 过渡开始时较快，然后逐渐减速。这会在过渡末尾创建一个缓慢的效果。 |\n| ease-in-out | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 过渡开始时较慢，然后加速，最后减速。这是一个结合了ease-in和ease-out的时间函数，产生平滑的过渡效果。 |\n| linear | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 过渡效果是线性的，速度保持恒定，没有加速或减速。这会在整个过渡期间保持相同的速度。 |\n| cubic-bezier | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\",\"5.14\"]],\"status\":\"SUPPORTED\"}' /> | 用于自定义 CSS 过渡（transition）的时间函数的函数，它允许你精确地定义过渡效果的速度变化。 |\n","defaultValue":"### 默认值 @default-value \n `ease`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition-timing-function)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.transition.transition-timing-function)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/transition/transition-timing-function.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/transition/transition-timing-function.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/transition/transition-timing-function\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/transition/transition-timing-function\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view>\n      <text class=\"uni-title-text uni-common-mt\">view 组件 transition-timing-function：linear</text>\n      <view :class=\"classValue\"></view>\n      <view class=\"button-container\">\n        <button class=\"button-item\" @click=\"start\">start</button>\n        <button class=\"button-item\" @click=\"reset\">reset</button>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">text 组件 transition-timing-function：ease-in-out</text>\n      <text :class=\"textClassValue\">timing-function: ease-in-out</text>\n      <view class=\"button-container\">\n        <button class=\"button-item\" @click=\"textStart\">text start</button>\n        <button class=\"button-item\" @click=\"textReset\">text reset</button>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">image 组件 transition-timing-function：ease</text>\n      <image :class=\"imageClassValue\" src=\"/static/test-image/logo.png\"></image>\n      <view class=\"button-container\">\n        <button class=\"button-item\" @click=\"imageStart\">image start</button>\n        <button class=\"button-item\" @click=\"imageReset\">image reset</button>\n      </view>\n\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件 transition-timing-function：ease-in-out</text>\n      <scroll-view :class=\"scrollViewClassValue\"></scroll-view>\n      <view class=\"button-container\">\n        <button class=\"button-item\" @click=\"scrollViewStart\">scroll-view start</button>\n        <button class=\"button-item\" @click=\"scrollViewReset\">scroll-view reset</button>\n      </view>\n\n      <view class=\"uni-common-mt\">\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\n\n      <view class=\"test-container\">\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">view 组件</text>\n          <text class=\"uni-info\">设置值: {{data.transitionTimingFunctionDynamic}}</text>\n          <text class=\"uni-info\">获取值: {{data.transitionTimingFunctionActual}}</text>\n          <view class=\"test-box\">\n            <view ref=\"viewRefDynamic\" class=\"common-image test-view\" :style=\"{ transitionTimingFunction: data.transitionTimingFunctionDynamic, transitionProperty: 'width', transitionDuration: '2s' }\" @click=\"triggerTransitionDynamic\">\n              <text style=\"font-size: 12px;\">点击view</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">text 组件</text>\n          <text class=\"uni-info\">设置值: {{data.transitionTimingFunctionDynamic}}</text>\n          <text class=\"uni-info\">获取值: {{data.transitionTimingFunctionActualText}}</text>\n          <view class=\"test-box\">\n            <text ref=\"textRefDynamic\" class=\"common-text test-text\" :style=\"{ transitionTimingFunction: data.transitionTimingFunctionDynamic, transitionProperty: 'width', transitionDuration: '2s' }\" @click=\"triggerTransitionTextDynamic\">点击text</text>\n          </view>\n        </view>\n\n        <view class=\"test-item\">\n          <text class=\"uni-subtitle-text\">image 组件</text>\n          <text class=\"uni-info\">设置值: {{data.transitionTimingFunctionDynamic}}</text>\n          <text class=\"uni-info\">获取值: {{data.transitionTimingFunctionActualImage}}</text>\n          <view class=\"test-box\">\n            <image ref=\"imageRefDynamic\" class=\"common-image test-image\" :style=\"{ transitionTimingFunction: data.transitionTimingFunctionDynamic, transitionProperty: 'width', transitionDuration: '2s' }\" @click=\"triggerTransitionImageDynamic\" src=\"/static/test-image/logo.png\"></image>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"uni-common-mt uni-common-mb\">\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n        <enum-data :items=\"transitionTimingFunctionEnum\" title=\"transition-timing-function 枚举值\" @change=\"radioChangeTransitionTimingFunction\" :compact=\"true\"></enum-data>\n        <input-data :defaultValue=\"data.transitionTimingFunctionDynamic\" title=\"transition-timing-function 自定义值\" type=\"text\" @confirm=\"inputChangeTransitionTimingFunction\"></input-data>\n      </view>\n\n      <!-- #ifndef MP-ALIPAY -->\n        <text class=\"uni-title-text uni-common-mt uni-common-mb\">native-view 组件 transition-timing-function：ease-in-out</text>\n        <test-native-view :class=\"nativeViewClassValue\"></test-native-view>\n        <view class=\"button-container\">\n          <button class=\"button-item\" @click=\"nativeViewStart\">native-view start</button>\n          <button class=\"button-item\" @click=\"nativeViewReset\">native-view reset</button>\n        </view>\n      <!-- #endif -->\n\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n\n  const classValue = ref('box')\n  const textClassValue = ref('text-box')\n  const imageClassValue = ref('image-box')\n  const scrollViewClassValue = ref('scroll-view-box')\n  const nativeViewClassValue = ref('native-view-box')\n\n  const start = () => {\n    classValue.value = 'box ani'\n  }\n\n  const reset = () => {\n    classValue.value = 'box'\n  }\n\n  const textStart = () => {\n    textClassValue.value = 'text-box text-ani'\n  }\n\n  const textReset = () => {\n    textClassValue.value = 'text-box'\n  }\n\n  const imageStart = () => {\n    imageClassValue.value = 'image-box image-ani'\n  }\n\n  const imageReset = () => {\n    imageClassValue.value = 'image-box'\n  }\n\n  const scrollViewStart = () => {\n    scrollViewClassValue.value = 'scroll-view-box scroll-view-ani'\n  }\n\n  const scrollViewReset = () => {\n    scrollViewClassValue.value = 'scroll-view-box'\n  }\n\n  const nativeViewStart = () => {\n    nativeViewClassValue.value = 'native-view-box native-view-ani'\n  }\n\n  const nativeViewReset = () => {\n    nativeViewClassValue.value = 'native-view-box'\n  }\n\n  const jest_start = () => {\n    start()\n  }\n\n  const jest_reset = () => {\n    reset()\n  }\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const data = reactive({\n    transitionTimingFunctionDynamic: 'ease',\n    transitionTimingFunctionActual: '',\n    transitionTimingFunctionActualText: '',\n    transitionTimingFunctionActualImage: ''\n  })\n  const viewRefDynamic = ref(null as UniElement | null)\n  const textRefDynamic = ref(null as UniTextElement | null)\n  const imageRefDynamic = ref(null as UniImageElement | null)\n  const scrollViewRefDynamic = ref(null as UniElement | null)\n  const isExpandedDynamic = ref(false)\n  const isExpandedDynamicText = ref(false)\n  const isExpandedDynamicImage = ref(false)\n  const isExpandedDynamicScrollView = ref(false)\n\n  const transitionTimingFunctionEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'ease' },\n    { value: 2, name: 'ease-in' },\n    { value: 3, name: 'ease-out' },\n    { value: 4, name: 'ease-in-out' },\n    { value: 5, name: 'linear' },\n    { value: 6, name: 'cubic-bezier(0.42, 0, 0.58, 1)' },\n  ]\n\n  const getPropertyValues = () => {\n    data.transitionTimingFunctionActual = viewRefDynamic.value?.style.getPropertyValue('transition-timing-function') ?? ''\n    data.transitionTimingFunctionActualText = textRefDynamic.value?.style.getPropertyValue('transition-timing-function') ?? ''\n    data.transitionTimingFunctionActualImage = imageRefDynamic.value?.style.getPropertyValue('transition-timing-function') ?? ''\n  }\n\n\n  const changeTransitionTimingFunctionDynamic = (value: string) => {\n    data.transitionTimingFunctionDynamic = value\n    viewRefDynamic.value?.style.setProperty('transition-timing-function', value)\n    textRefDynamic.value?.style.setProperty('transition-timing-function', value)\n    imageRefDynamic.value?.style.setProperty('transition-timing-function', value)\n    scrollViewRefDynamic.value?.style.setProperty('transition-timing-function', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeTransitionTimingFunction = (index: number) => {\n    const selectedItem = transitionTimingFunctionEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeTransitionTimingFunctionDynamic(selectedItem.name)\n    }\n  }\n\n  const inputChangeTransitionTimingFunction = (value: string) => {\n    changeTransitionTimingFunctionDynamic(value)\n  }\n\n  const triggerTransitionDynamic = () => {\n    isExpandedDynamic.value = !isExpandedDynamic.value\n    const width = isExpandedDynamic.value ? '100px' : '50px'\n    viewRefDynamic.value?.style.setProperty('width', width)\n  }\n\n  const triggerTransitionTextDynamic = () => {\n    isExpandedDynamicText.value = !isExpandedDynamicText.value\n    const width = isExpandedDynamicText.value ? '100px' : '50px'\n    textRefDynamic.value?.style.setProperty('width', width)\n  }\n\n  const triggerTransitionImageDynamic = () => {\n    isExpandedDynamicImage.value = !isExpandedDynamicImage.value\n    const width = isExpandedDynamicImage.value ? '100px' : '50px'\n    imageRefDynamic.value?.style.setProperty('width', width)\n  }\n\n  const triggerTransitionScrollViewDynamic = () => {\n    isExpandedDynamicScrollView.value = !isExpandedDynamicScrollView.value\n    const width = isExpandedDynamicScrollView.value ? '100px' : '50px'\n    scrollViewRefDynamic.value?.style.setProperty('width', width)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n    if (scrollViewRefDynamic.value != null) {\n      scrollViewRefDynamic.value.style.setProperty('transition-timing-function', data.transitionTimingFunctionDynamic)\n      scrollViewRefDynamic.value.style.setProperty('transition-property', 'width')\n      scrollViewRefDynamic.value.style.setProperty('transition-duration', '2s')\n    }\n  })\n\n  defineExpose({\n    jest_start,\n    jest_reset,\n    radioChangeTransitionTimingFunction,\n    data\n  })\n</script>\n\n<style>\n  .box {\n    width: 200px;\n    height: 50px;\n    background-color: blue;\n  }\n\n  .ani {\n    transition-property: width;\n    transition-duration: 2s;\n    transition-timing-function: linear;\n    width: 300px;\n  }\n\n  .text-box {\n    width: 200px;\n    height: 60px;\n    padding: 10px;\n    font-size: 16px;\n    background-color: lightblue;\n    text-align: center;\n  }\n\n  .text-ani {\n    transition-property: width;\n    transition-duration: 2s;\n    transition-timing-function: ease-in-out;\n    width: 300px;\n  }\n\n  .image-box {\n    width: 100px;\n    height: 100px;\n  }\n\n  .image-ani {\n    transition-property: width, height;\n    transition-duration: 2s;\n    transition-timing-function: ease;\n    width: 150px;\n    height: 150px;\n  }\n\n  .common-text {\n    width: 50px;\n    height: 50px;\n    background-color: green;\n    font-size: 12px;\n    color: white;\n  }\n\n  .common-image {\n    width: 50px;\n    height: 50px;\n    background-color: green;\n  }\n\n  .scroll-view-box {\n    width: 200px;\n    height: 50px;\n    background-color: green;\n  }\n\n  .scroll-view-ani {\n    transition-property: width;\n    transition-duration: 2s;\n    transition-timing-function: ease-in-out;\n    width: 300px;\n  }\n\n  .native-view-box {\n    width: 200px;\n    height: 50px;\n    background-color: green;\n  }\n\n  .native-view-ani {\n    transition-property: width;\n    transition-duration: 2s;\n    transition-timing-function: ease-in-out;\n    width: 300px;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 80px;\n    background-color: gray;\n  }\n\n  .demo-box {\n    flex-direction: row;\n    justify-content: space-around;\n    margin-top: 10px;\n  }\n\n\n  .button-container {\n    flex-direction: row;\n    margin-top: 10px;\n    padding-bottom: 15px;\n    border-bottom:#d3d3d3 solid 1px;\n  }\n\n  .button-item {\n    margin-right: 10px;\n  }\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"visibility":{"name":"## visibility\n","description":"\nvisibility CSS 属性显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 \\<table> 中的行或列。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nvisibility: visible | hidden | collapse;\n```\n","values":"\n### visibility 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| visible | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素框可见。 |\n| hidden | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 元素框不可见（不绘制），但仍然影响常规的布局。如果将其子元素的 visibility 设置为 visible，则该子元素依然可见。元素无法获得焦点（例如通过 tab 索引进行键盘导航）。 |\n","defaultValue":"### 默认值 @default-value \n `visible`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/visibility)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.visibility)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/visibility.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/visibility.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/visibility\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/visibility\n\n>示例\n```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\r\n    <view class=\"css-page uni-theme-root\" style=\"flex-grow: 1;\">\n      <text class=\"uni-tips\">visibility: {{data.visibility}} ，说明：点击切换</text>\r\n      <view class=\"demo-box\">\r\n        <view @click=\"changeVisibility\">\r\n          <text class=\"theme-label\">view组件: {{data.visibility}}</text>\n          <view class=\"common\" :style=\"{'visibility': data.visibility}\"></view>\r\n        </view>\r\n        <view @click=\"changeVisibility\">\r\n          <text class=\"theme-label\">text组件: {{data.visibility}}</text>\n          <text class=\"common cyan-label\" :style=\"{'visibility': data.visibility}\">文本</text>\n        </view>\r\n        <view @click=\"changeVisibility\">\r\n          <text class=\"theme-label\">image组件: {{data.visibility}}</text>\n          <image class=\"common\" :style=\"{'visibility': data.visibility}\" src=\"/static/test-image/logo.png\"></image>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mb\">\r\n        <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\r\n        <view class=\"demo-box\">\r\n          <view>\r\n            <text class=\"theme-label\">scroll-view: visible</text>\n            <scroll-view class=\"common\" style=\"visibility: visible;\"></scroll-view>\r\n          </view>\r\n          <view>\r\n            <text class=\"theme-label\">scroll-view: hidden</text>\n            <scroll-view class=\"common\" style=\"visibility: hidden;\"></scroll-view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt\">\r\n        <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      </view>\r\n\r\n      <!-- 普通版本 -->\r\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.visibilityValue}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.visibilityActual}}</text>\r\n          <view class=\"test-box\">\r\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" :style=\"{ visibility: data.visibilityValue }\">\r\n              <text class=\"cyan-label\">view</text>\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.visibilityValue}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.visibilityActualText}}</text>\r\n          <view class=\"test-box\">\r\n            <text ref=\"textRef\" class=\"common-dynamic test-text\" :style=\"{ visibility: data.visibilityValue }\">text</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.visibilityValue}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.visibilityActualImage}}</text>\r\n          <view class=\"test-box\">\r\n            <image ref=\"imageRef\" class=\"common-dynamic test-image\" :style=\"{ visibility: data.visibilityValue }\" src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt uni-common-mb\">\r\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\r\n        <enum-data :items=\"visibilityEnum\" title=\"visibility 枚举值\" @change=\"radioChangeVisibility\" :compact=\"true\"></enum-data>\r\n        <input-data :defaultValue=\"data.visibilityValue\" title=\"visibility 自定义值\" type=\"text\" @confirm=\"inputChangeVisibility\"></input-data>\r\n      </view>\r\n\r\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\">\n        <text class=\"theme-label\">native-view 组件</text>\n        <view class=\"demo-box\">\n          <view>\n            <text class=\"theme-label\">native-view: visible</text>\n            <test-native-view class=\"common\" style=\"visibility: visible;\"></test-native-view>\n          </view>\r\n          <view>\r\n            <text class=\"theme-label\">native-view: hidden</text>\n            <test-native-view class=\"common\" style=\"visibility: hidden;\"></test-native-view>\r\n          </view>\r\n        </view>\n      </view>\n      <!-- #endif -->\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n  let flag = true\r\n  const data = reactive({\r\n    visibility: 'visible',\r\n    visibilityValue: 'visible',\r\n    visibilityActual: '',\r\n    visibilityActualText: '',\r\n    visibilityActualImage: ''\r\n  })\r\n\r\n\r\n  const changeVisibility = () => {\r\n    flag = !flag\r\n    if (flag) {\r\n      data.visibility = 'visible'\r\n    } else {\r\n      data.visibility = 'hidden'\r\n    }\r\n  }\r\n\r\n  const visibilityEnum : ItemType[] = [\r\n    { value: 0, name: '' },\r\n    { value: 1, name: 'visible' },\r\n    { value: 2, name: 'hidden' }\r\n  ]\r\n\r\n  const viewRef = ref(null as UniElement | null)\r\n  const textRef = ref(null as UniTextElement | null)\r\n  const imageRef = ref(null as UniImageElement | null)\r\n\r\n  const getPropertyValues = () => {\r\n    data.visibilityActual = viewRef.value?.style.getPropertyValue('visibility') ?? ''\r\n    data.visibilityActualText = textRef.value?.style.getPropertyValue('visibility') ?? ''\r\n    data.visibilityActualImage = imageRef.value?.style.getPropertyValue('visibility') ?? ''\r\n  }\r\n\r\n  const changeVisibilityProperty = (value : string) => {\r\n    data.visibilityValue = value\r\n    viewRef.value?.style.setProperty('visibility', value)\r\n    textRef.value?.style.setProperty('visibility', value)\r\n    imageRef.value?.style.setProperty('visibility', value)\r\n    // 使用 nextTick 确保样式已应用后再获取值\r\n    nextTick(() => {\r\n      getPropertyValues()\r\n    })\r\n  }\r\n\r\n  const radioChangeVisibility = (index : number) => {\r\n    const selectedItem = visibilityEnum.find((item) : boolean => item.value === index)\r\n    if (selectedItem != null) {\r\n      changeVisibilityProperty(selectedItem.name)\r\n    }\r\n  }\r\n\r\n  const inputChangeVisibility = (value : string) => {\r\n    changeVisibilityProperty(value)\r\n  }\r\n\r\n  onReady(() => {\r\n    getPropertyValues()\r\n  })\r\n\r\n  defineExpose({\r\n    radioChangeVisibility,\r\n    data\r\n  })\r\n</script>\r\n\r\n<style>\n  .theme-label {\n    color: var(--text-color, #333333);\n  }\n\n  .cyan-label {\n    color: #1a1a1a;\n  }\n\n  .common {\r\n    width: 100px;\r\n    height: 100px;\r\n    background-color: cyan;\r\n  }\r\n\r\n  .demo-box {\r\n    flex-direction: row;\r\n    margin-top: 10px;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .common-dynamic {\r\n    width: 100px;\r\n    height: 100px;\r\n    background-color: cyan;\r\n  }\r\n\r\n  .test-container {\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .test-item {\r\n    flex: 1;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .test-box {\r\n    width: 100%;\r\n    height: 100px;\r\n    background-color: gray;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"white-space":{"name":"## white-space\n","description":"\nwhite-space 属性用于设置如何处理元素中的空白字符（空格、换行符、制表符）以及文本是否自动换行。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 4.0 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nwhite-space: normal | pre | nowrap | pre-wrap | pre-line | break-spaces | [ <'white-space-collapse'> || <'text-wrap'> || <'white-space-trim'> ];\n```\n","values":"\n### white-space 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| normal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 换行符（\\n）当做空白符处理，连续的多个空白字符会合并为一个空格，文本遇到边界会自动换行，行末空白字符移除。 |\n| nowrap | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 换行符（\\n）当做空白符处理，连续的多个空白字符会合并为一个空格，文本遇到边界不会自动换行，行末空白字符移除。 |\n| pre | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.81\",\"4.81\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 换行符（\\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界不会自动换行，行末空白字符保留。 |\n| pre-wrap | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.81\",\"4.81\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 换行符（\\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界会自动换行，行末空白字符保留但“不占位置”。 |\n| pre-line | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.81\",\"4.81\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 换行符（\\n）保留并换行显示，连续的多个空白字符会合并为一个空格，文本遇到边界会自动换行，行末空白字符移除。 |\n| break-spaces | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.81\",\"4.81\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 换行符（\\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界会自动换行，行末空白字符换行处理。 |\n| keep | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.0\",\"5.0\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 不对空白字符处理，保持原始值。换行符（\\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界会自动换行，行末空白字符保留。 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue-app | keep |\n| uvue-web | pre-line |\n\n **注意**：W3C 默认值为：normal","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/white-space)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.white-space)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/white-space.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/white-space.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/white-space\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/white-space\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view style=\"flex-grow: 1;\">\n      <scroll-view style=\"padding: 10px 0px; background-color: gray;justify-content: center;\" direction=\"horizontal\">\n        <text class=\"text\" :style=\"{ whiteSpace: data.whiteSpace }\">{{data.multiLineText}}</text>\n      </scroll-view>\n      <text>拍平</text>\n      <scroll-view style=\"padding: 10px 0px; background-color: gray;justify-content: center;\" direction=\"horizontal\">\n        <text class=\"text\" :style=\"{ whiteSpace: data.whiteSpace }\" flatten>{{data.multiLineText}}</text>\n      </scroll-view>\n\n      <scroll-view style=\"flex: 1\">\n        <view class=\"content uni-common-mt\">\n          <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n        </view>\n\n        <view class=\"common-box\">\n          <!-- 普通版本 -->\n          <view class=\"uni-common-mt\">\n            <text class=\"uni-title-text\">white-space</text>\n            <text class=\"uni-info\">设置值: {{data.whiteSpace}}</text>\n            <text class=\"uni-info\">获取值: {{data.whiteSpaceActual}}</text>\n            <view class=\"test-box\">\n              <text ref=\"textRef\" class=\"text test-text\" :style=\"{ whiteSpace: data.whiteSpace }\">{{data.multiLineText}}</text>\n            </view>\n          </view>\n\n          <!-- 拍平版本 -->\n          <view class=\"uni-common-mt\">\n            <text class=\"uni-title-text\">拍平</text>\n            <text class=\"uni-info\">设置值: {{data.whiteSpace}}</text>\n            <text class=\"uni-info\">获取值: {{data.whiteSpaceActualFlat}}</text>\n            <view class=\"test-box\">\n              <text ref=\"textRefFlat\" class=\"text test-text-flatten\" :style=\"{ whiteSpace: data.whiteSpace }\" flatten>{{data.multiLineText}}</text>\n            </view>\n          </view>\n        </view>\n\n        <view class=\"uni-common-mt uni-common-mb\">\n            <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n            <enum-data :items=\"whiteSpaceEnum\" title=\"white-space 枚举值\" @change=\"radioChangeWhiteSpace\" :compact=\"true\"></enum-data>\n            <input-data :defaultValue=\"data.whiteSpace\" title=\"white-space 自定义值\" type=\"text\" @confirm=\"inputChangeWhiteSpace\"></input-data>\n        </view>\n      </scroll-view>\n    </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const whiteSpaceEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: 'normal' },\n    { value: 2, name: 'nowrap' },\n    { value: 3, name: 'pre' },\n    { value: 4, name: 'pre-wrap' },\n    { value: 5, name: 'pre-line' },\n    { value: 6, name: 'break-spaces' },\n    { value: 7, name: 'keep' }\n  ]\n\n  const data = reactive({\n    multiLineText: `HBuilderX，\n\t轻巧、\n\t\t极速，\n\t\t\t极客编辑器；\n\t\t\t\tuni-app x，\n\t\t\t\t\t终极跨平台方案；\n\t\t\t\tuts，\n\t\t\t大一统语言\n\nHBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言`,\n    whiteSpace: 'normal',\n    whiteSpaceActual: '',\n    whiteSpaceActualFlat: ''\n  })\n\n  const textRef = ref(null as UniTextElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n\n  const getPropertyValues = () => {\n    data.whiteSpaceActual = textRef.value?.style.getPropertyValue('white-space') ?? ''\n    data.whiteSpaceActualFlat = textRefFlat.value?.style.getPropertyValue('white-space') ?? ''\n  }\n\n\n  const changeWhiteSpace = (value: string) => {\n    data.whiteSpace = value\n    textRef.value?.style.setProperty('white-space', value)\n    textRefFlat.value?.style.setProperty('white-space', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeWhiteSpace = (index: number) => {\n    const selectedItem = whiteSpaceEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeWhiteSpace(selectedItem.name)\n    }\n  }\n\n  const inputChangeWhiteSpace = (value: string) => {\n    changeWhiteSpace(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n  })\n\n  defineExpose({\n    radioChangeWhiteSpace,\n    data\n  })\n</script>\n\n<style>\n  .text {\n    font-size: 16px;\n    /* 需要设置 align-self text组件才会自适应宽度 */\n    align-self: flex-start;\n  }\n\n  .common-box{\n    flex-direction: row;\n    justify-content: space-around;\n  }\n\n  .test-box {\n    width: 180px;\n    height: 200px;\n    background-color: gray;\n    justify-content: center;\n    align-items: center;\n  }\n\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- enum\n"},"width":{"name":"## width\n","description":"\nwidth 属性用于设置元素的宽度。width 默认设置内容区域的宽度，但如果 box-sizing 属性被设置为 border-box，就转而设置边框区域的宽度。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| 5.21 | 5.11 | 5.0 |\n","syntax":"\n### 语法\n```\nwidth: <viewport-length>{1,2};\n```\n","values":"\n### width 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 浏览器将会为指定的元素计算并选择一个宽度。 |\n| fit-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 取以下两种值中的较大值：<br/>    <br/>      固有的最小宽度<br/>      固有首选宽度（max-content）和可用宽度（available）两者中的较小值<br/>    <br/>    可表示为：min(max-content, max(min-content, \\<length-percentage>)) |\n| max-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 元素内容固有的（intrinsic）合适宽度。 |\n| min-content | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 元素内容固有的最小宽度。 |\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/width)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.width)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/width.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/width.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/width\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/width\n\n>示例\n```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\n  <view class=\"uni-theme-root\" style=\"flex-grow: 1;\">\n    <text class=\"uni-tips\">说明：左边是正常版本，右边是拍平版本</text>\n    <view>\n      <text>width: 100px</text>\n      <view class=\"demo-box\">\n        <view class=\"common\" style=\"width: 100px;\"></view>\n        <view class=\"common\" style=\"width: 100px;\" flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text>width: 200rpx</text>\n      <view class=\"demo-box\">\n        <view class=\"common\" style=\"width: 200rpx;\"></view>\n        <view class=\"common\" style=\"width: 200rpx;\" flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text>width: 30%</text>\n      <view class=\"demo-box\">\n        <view class=\"common\" style=\"width: 30%;\"></view>\n        <view class=\"common\" style=\"width: 30%;\" flatten></view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <text class=\"uni-title-text\">scroll-view 组件</text>\n    </view>\n\n    <view class=\"demo-box\">\n      <scroll-view style=\"width: 100px; height: 100px; background-color: cyan;\">\n        <text class=\"scroll-view-label\">width: 100px</text>\n      </scroll-view>\n      <scroll-view style=\"width: 200px; height: 100px; background-color: cyan;\">\n        <text class=\"scroll-view-label\">width: 200px</text>\n      </scroll-view>\n    </view>\n\n    <view class=\"uni-common-mt\">\n      <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n    </view>\n\n    <!-- 普通版本 -->\n    <view class=\"test-container\">\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">view 组件</text>\n        <text class=\"uni-info\">设置值: {{data.width}}</text>\n        <text class=\"uni-info\">获取值: {{data.widthActual}}</text>\n        <view class=\"test-box\">\n          <view ref=\"viewRef\" class=\"common test-view\" :style=\"{ width: data.width }\">\n            <text class=\"cyan-label\">view</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">text 组件</text>\n        <text class=\"uni-info\">设置值: {{data.width}}</text>\n        <text class=\"uni-info\">获取值: {{data.widthActualText}}</text>\n        <view class=\"test-box\">\n          <text ref=\"textRef\" class=\"common test-text\" :style=\"{ width: data.width }\">text</text>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">image 组件</text>\n        <text class=\"uni-info\">设置值: {{data.width}}</text>\n        <text class=\"uni-info\">获取值: {{data.widthActualImage}}</text>\n        <view class=\"test-box\">\n          <image ref=\"imageRef\" class=\"common test-image\" :style=\"{ width: data.width }\" src=\"/static/test-image/logo.png\"></image>\n        </view>\n      </view>\n    </view>\n\n    <!-- 拍平版本 -->\n    <view class=\"test-container\">\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">view 组件拍平</text>\n        <text class=\"uni-info\">设置值: {{data.width}}</text>\n        <text class=\"uni-info\">获取值: {{data.widthActualFlat}}</text>\n        <view class=\"test-box\">\n          <view ref=\"viewRefFlat\" class=\"common test-view-flatten\" :style=\"{ width: data.width }\" flatten>\n            <text class=\"cyan-label\">view</text>\n          </view>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">text 组件拍平</text>\n        <text class=\"uni-info\">设置值: {{data.width}}</text>\n        <text class=\"uni-info\">获取值: {{data.widthActualTextFlat}}</text>\n        <view class=\"test-box\">\n          <text ref=\"textRefFlat\" class=\"common test-text-flatten\" :style=\"{ width: data.width }\" flatten>text</text>\n        </view>\n      </view>\n\n      <view class=\"test-item\">\n        <text class=\"uni-subtitle-text\">image 组件拍平</text>\n        <text class=\"uni-info\">设置值: {{data.width}}</text>\n        <text class=\"uni-info\">获取值: {{data.widthActualImageFlat}}</text>\n        <view class=\"test-box\">\n          <image ref=\"imageRefFlat\" class=\"common test-image-flatten\" :style=\"{ width: data.width }\" flatten src=\"/static/test-image/logo.png\"></image>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mt uni-common-mb\">\n      <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\n      <enum-data :items=\"widthEnum\" title=\"width 枚举值\" @change=\"radioChangeWidth\" :compact=\"true\"></enum-data>\n      <input-data :defaultValue=\"data.width\" title=\"width 自定义值\" type=\"text\" @confirm=\"inputChangeWidth\"></input-data>\n    </view>\n\n    <view class=\"uni-common-mt uni-common-mb\">\n      <text class=\"uni-title-text\">默认宽高规则 (无宽高会不显示或使用默认值)</text>\n    </view>\n\n    <view>\n      <text>空 view - 无宽高，有背景色 (预期不显示)</text>\n      <text class=\"uni-info\">getPropertyValue: width={{emptyElementValues.emptyViewWidth}}, height={{emptyElementValues.emptyViewHeight}}</text>\n      <view class=\"demo-box\">\n        <view ref=\"emptyViewRef\" style=\"background-color: cyan;\"></view>\n        <view ref=\"emptyViewFlatRef\" style=\"background-color: cyan;\" flatten></view>\n      </view>\n    </view>\n\n    <view>\n      <text>空 text - 无文字、无宽高，有背景色</text>\n      <text class=\"uni-info\">getPropertyValue: width={{emptyElementValues.emptyTextWidth}}, height={{emptyElementValues.emptyTextHeight}}</text>\n      <view class=\"demo-box\">\n        <text ref=\"emptyTextRef\" style=\"background-color: cyan;\"></text>\n        <text ref=\"emptyTextFlatRef\" style=\"background-color: cyan;\" flatten></text>\n      </view>\n    </view>\n\n    <view>\n      <text>空 image - 无 src、无宽高，有背景色 (image 有默认宽高)</text>\n      <text class=\"uni-info\">getPropertyValue: width={{emptyElementValues.emptyImageWidth}}, height={{emptyElementValues.emptyImageHeight}}</text>\n      <view class=\"demo-box\">\n        <image ref=\"emptyImageRef\" style=\"background-color: cyan;\"></image>\n        <image ref=\"emptyImageFlatRef\" style=\"background-color: cyan;\" flatten></image>\n      </view>\n    </view>\n\n    <view>\n      <text>空 scroll-view - 无宽高，有背景色</text>\n      <text class=\"uni-info\">getPropertyValue: width={{emptyElementValues.emptyScrollViewWidth}}, height={{emptyElementValues.emptyScrollViewHeight}}</text>\n      <view class=\"demo-box\">\n        <scroll-view ref=\"emptyScrollViewRef\" style=\"background-color: cyan;\"></scroll-view>\n      </view>\n    </view>\n\n    <!-- #ifdef APP-ANDROID || APP-IOS || APP-HARMONY -->\n    <view class=\"uni-common-mb\">\n      <text>空 native-view - 无宽高，有背景色</text>\n      <text class=\"uni-info\">getPropertyValue: width={{emptyElementValues.emptyNativeViewWidth}}, height={{emptyElementValues.emptyNativeViewHeight}}</text>\n      <view class=\"demo-box\">\n        <native-view ref=\"emptyNativeViewRef\" style=\"background-color: cyan;\"></native-view>\n      </view>\n    </view>\n\n    <view class=\"uni-common-mb\">\n      <text>native-view组件: width: 100px 和 width: 200px</text>\n      <view class=\"demo-box-native\">\n        <view class=\"container-native\">\n          <native-view style=\"width: 100px; height: 100px;\"></native-view>\n        </view>\n        <view class=\"container-native\">\n          <native-view style=\"width: 200px; height: 100px;\"></native-view>\n        </view>\n      </view>\n    </view>\n    <!-- #endif -->\n\n    <!-- #ifdef WEB -->\n    <view class=\"container\">\n      <text>嵌套子元素 v-deep width: 150rpx</text>\n      <child-width-uvue></child-width-uvue>\n    </view>\n    <!-- #endif -->\n  </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\n  import childWidthUvue from \"./child-width.uvue\"\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n\n  const widthEnum: ItemType[] = [\n    { value: 0, name: '' },\n    { value: 1, name: '0' },\n    { value: 2, name: '0px' },\n    { value: 3, name: '50px' },\n    { value: 4, name: '0%' },\n    { value: 5, name: '50%' },\n    { value: 6, name: 'auto' }\n  ]\n\n  const data = reactive({\n    width: '100px',\n    widthActual: '',\n    widthActualText: '',\n    widthActualImage: '',\n    widthActualFlat: '',\n    widthActualTextFlat: '',\n    widthActualImageFlat: ''\n  })\n  const viewRef = ref(null as UniElement | null)\n  const textRef = ref(null as UniTextElement | null)\n  const imageRef = ref(null as UniImageElement | null)\n  const viewRefFlat = ref(null as UniElement | null)\n  const textRefFlat = ref(null as UniTextElement | null)\n  const imageRefFlat = ref(null as UniImageElement | null)\n\n  // 空元素 ref\n  const emptyViewRef = ref(null as UniElement | null)\n  const emptyViewFlatRef = ref(null as UniElement | null)\n  const emptyTextRef = ref(null as UniTextElement | null)\n  const emptyTextFlatRef = ref(null as UniTextElement | null)\n  const emptyImageRef = ref(null as UniImageElement | null)\n  const emptyImageFlatRef = ref(null as UniImageElement | null)\n  const emptyScrollViewRef = ref(null as UniElement | null)\n  const emptyNativeViewRef = ref(null as UniElement | null)\n\n  // 空元素宽高值\n  const emptyElementValues = reactive({\n    emptyViewWidth: '',\n    emptyViewHeight: '',\n    emptyTextWidth: '',\n    emptyTextHeight: '',\n    emptyImageWidth: '',\n    emptyImageHeight: '',\n    emptyScrollViewWidth: '',\n    emptyScrollViewHeight: '',\n    emptyNativeViewWidth: '',\n    emptyNativeViewHeight: ''\n  })\n\n  const getEmptyElementValues = () => {\n    nextTick(() => {\n      if (emptyViewRef.value != null) {\n        emptyElementValues.emptyViewWidth = emptyViewRef.value.style.getPropertyValue('width') ?? ''\n        emptyElementValues.emptyViewHeight = emptyViewRef.value.style.getPropertyValue('height') ?? ''\n      }\n      if (emptyTextRef.value != null) {\n        emptyElementValues.emptyTextWidth = emptyTextRef.value.style.getPropertyValue('width') ?? ''\n        emptyElementValues.emptyTextHeight = emptyTextRef.value.style.getPropertyValue('height') ?? ''\n      }\n      if (emptyImageRef.value != null) {\n        emptyElementValues.emptyImageWidth = emptyImageRef.value.style.getPropertyValue('width') ?? ''\n        emptyElementValues.emptyImageHeight = emptyImageRef.value.style.getPropertyValue('height') ?? ''\n      }\n      if (emptyScrollViewRef.value != null) {\n        emptyElementValues.emptyScrollViewWidth = emptyScrollViewRef.value.style.getPropertyValue('width') ?? ''\n        emptyElementValues.emptyScrollViewHeight = emptyScrollViewRef.value.style.getPropertyValue('height') ?? ''\n      }\n      if (emptyNativeViewRef.value != null) {\n        emptyElementValues.emptyNativeViewWidth = emptyNativeViewRef.value.style.getPropertyValue('width') ?? ''\n        emptyElementValues.emptyNativeViewHeight = emptyNativeViewRef.value.style.getPropertyValue('height') ?? ''\n      }\n    })\n  }\n\n  const getPropertyValues = () => {\n    data.widthActual = viewRef.value?.style.getPropertyValue('width') ?? ''\n    data.widthActualFlat = viewRefFlat.value?.style.getPropertyValue('width') ?? ''\n    data.widthActualText = textRef.value?.style.getPropertyValue('width') ?? ''\n    data.widthActualTextFlat = textRefFlat.value?.style.getPropertyValue('width') ?? ''\n    data.widthActualImage = imageRef.value?.style.getPropertyValue('width') ?? ''\n    data.widthActualImageFlat = imageRefFlat.value?.style.getPropertyValue('width') ?? ''\n  }\n\n\n  const changeWidth = (value: string) => {\n    data.width = value\n    viewRef.value?.style.setProperty('width', value)\n    viewRefFlat.value?.style.setProperty('width', value)\n    textRef.value?.style.setProperty('width', value)\n    textRefFlat.value?.style.setProperty('width', value)\n    imageRef.value?.style.setProperty('width', value)\n    imageRefFlat.value?.style.setProperty('width', value)\n    // 使用 nextTick 确保样式已应用后再获取值\n    nextTick(() => {\n      getPropertyValues()\n    })\n  }\n\n  const radioChangeWidth = (index: number) => {\n    const selectedItem = widthEnum.find((item): boolean => item.value === index)\n    if (selectedItem != null) {\n      changeWidth(selectedItem.name)\n    }\n  }\n\n  const inputChangeWidth = (value: string) => {\n    changeWidth(value)\n  }\n\n  onReady(() => {\n    getPropertyValues()\n    getEmptyElementValues()\n  })\n\n  defineExpose({\n    radioChangeWidth,\n    emptyElementValues,\n    data\n  })\n</script>\n\n<style>\n  .common {\n    height: 80px;\n    background-color: cyan;\n    color: #1a1a1a;\n  }\n  .demo-box {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n  }\n\n  .test-container {\n    flex-direction: row;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .test-item {\n    flex: 1;\n    margin: 0 5px;\n  }\n\n  .test-box {\n    width: 100%;\n    height: 80px;\n    background-color: gray;\n  }\n\n  .scroll-view-label {\n    font-size: 12px;\n    line-height: 100px;\n    text-align: center;\n    color: #1a1a1a;\n  }\n\n  .cyan-label {\n    color: #1a1a1a;\n  }\n\n  .demo-box-native {\n    flex-direction: row;\n    margin-top: 10px;\n    justify-content: space-around;\n    align-items: center;\n  }\n\n  .container-native {\n    background-color: cyan;\n  }\n\n  /* #ifdef WEB */\n  .container ::v-deep .box {\n    width: 150px;\n    height: 100px;\n  }\n  /* #endif */\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- length\n- percentage\n"},"z-index":{"name":"## z-index\n","description":"\nz-index 属性设定了一个定位元素及其后代元素的 z-order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。\n\n\n### uni-app x 兼容性 <Help />\n| Web | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 4.61 |\n\n\n### App平台拍平（flatten）兼容性 <Help /> @flatten_compatibility\n\n| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |\n| :- | :- | :- |\n| x | x | x |\n","syntax":"\n### 语法\n```\nz-index: auto | <integer>;\n```\n","values":"\n### z-index 的属性值\n| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 盒子不会创建一个新的局部层叠上下文。盒子在当前层叠上下文的层叠等级是 0。 |\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue-app | 0 |\n| uvue-web | auto |\n\n **注意**：W3C 默认值为：auto","unixTags":"","compatibility":"","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/z-index)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.z-index)\n","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/z-index.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/z-index.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/z-index\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/z-index\n\n>示例\n```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n  <!-- #endif -->\n  <view class=\"z-index-page uni-theme-root\">\n    <view style=\"flex-grow: 1;\">\n      <view style=\"position:absolute;z-index:0;\">\r\n        <view class=\"common fixed default\">\n          <text class=\"dark-block-text\">position: fixed</text>\n          <text class=\"dark-block-text\">z-index: 10</text>\n        </view>\n        <view class=\"common fixed specified\">\n          <text class=\"dark-block-text\">position: fixed</text>\n          <text class=\"dark-block-text\">z-index: 5</text>\n        </view>\n        <view class=\"common fixed floor\">\n          <text class=\"dark-block-text\">position: fixed</text>\n          <text class=\"dark-block-text\">z-index: -1</text>\n        </view>\r\n      </view>\r\n      <view style=\"top: 170px;\">\r\n        <view class=\"common\" style=\"background-color: cyan;z-index: 10;\">\n          <text class=\"cyan-text\">z-index: 10</text>\n        </view>\r\n        <view ref=\"view\" class=\"common\" style=\"background-color: green;z-index: 5;top: -100px;left: 100px;\"\r\n          @click=\"changeZIndex(20)\">\r\n          <text class=\"light-block-text\">z-index: {{data.zIndex}}</text>\n          <text class=\"light-block-text\">点击修改z-index</text>\n        </view>\r\n        <view class=\"common\" style=\"background-color: blue;top: -120px;left: 175px;\">\r\n          <text class=\"light-block-text\">z-index: 0</text>\n        </view>\r\n      </view>\r\n      <view>\r\n        <view>\r\n          <view class=\"common fixed popup\" style=\"background-color: yellow;z-index: 5;\">\n            <text class=\"dark-block-text\">position: fixed</text>\n            <text class=\"dark-block-text\">z-index: 5</text>\n          </view>\r\n        </view>\r\n      </view>\r\n    </view>\r\n    <view style=\"top: 50px;\">\r\n      <text class=\"uni-title-text uni-common-mt\">text 组件</text>\r\n      <text class=\"common-text cyan-text\" style=\"background-color: cyan;z-index: 10;text-align: right;\">text组件: z-index: 10</text>\n      <text class=\"common-text light-block-text\" style=\"background-color: green;top: -37px;left: 87px;z-index: 5;text-align: right;\">text组件: z-index: 5</text>\n      <text class=\"common-text light-block-text\" style=\"background-color: blue;top: -75px;left: 175px;z-index: 0;text-align: right;\">text组件: z-index: 0</text>\n    </view>\r\n    <view style=\"top: 50px;\">\r\n      <text class=\"uni-title-text uni-common-mt\">image 组件</text>\r\n      <image class=\"common-text image-zindex\" style=\"background-color: cyan;z-index: 10;\" src=\"/static/test-image/logo.png\"></image>\r\n      <image class=\"common-text image-zindex\" style=\"background-color: green;top: -37px;left: 87px;z-index: 5;\" src=\"/static/test-image/logo.png\"></image>\r\n      <image class=\"common-text image-zindex\" style=\"background-color: blue;top: -75px;left: 175px;z-index: 0;\" src=\"/static/test-image/logo.png\"></image>\r\n    </view>\r\n\r\n    <view class=\"uni-common-mb\" style=\"top: 50px;\">\r\n      <text class=\"uni-title-text uni-common-mt\">scroll-view 组件</text>\r\n      <text class=\"uni-subtitle-text\">z-index: 10 和 z-index: 5</text>\r\n      <scroll-view class=\"common\" style=\"z-index: 10; background-color: cyan;\">\r\n        <text class=\"cyan-text\">z-index: 10</text>\n      </scroll-view>\r\n      <scroll-view class=\"common\" style=\"top: -40px;left: 30px;z-index: 5;background-color: green;\">\r\n        <text class=\"light-block-text\" style=\"line-height: 100px;\">z-index: 5</text>\n      </scroll-view>\r\n    </view>\r\n\r\n    <view class=\"uni-common-mt\" style=\"top:100px;\">\r\n      <text class=\"uni-title-text\">setProperty 设置与 getPropertyValue 获取</text>\n      <view class=\"test-container\">\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">view 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.zIndexValue}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.zIndexActual}}</text>\r\n          <view class=\"test-box\">\r\n            <view class=\"common-bg\" style=\"background-color: blue; z-index: 1;\">\r\n              <text class=\"common-text-bg\">蓝色view</text>\r\n            </view>\r\n            <view ref=\"viewRef\" class=\"common-dynamic test-view\" style=\"background-color: cyan;\" :style=\"{ zIndex: data.zIndexValue }\">\r\n              <text class=\"common-text-bg cyan-text\">青色view</text>\n            </view>\r\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">text 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.zIndexValue}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.zIndexActualText}}</text>\r\n          <view class=\"test-box\">\r\n            <text class=\"common-bg common-text-bg\" style=\"background-color: blue; z-index: 1;\">蓝色text</text>\r\n            <text ref=\"textRef\" class=\"common-dynamic common-text-bg cyan-text test-text\" style=\"background-color: cyan;\" :style=\"{ zIndex: data.zIndexValue }\">青色text</text>\n          </view>\r\n        </view>\r\n\r\n        <view class=\"test-item\">\r\n          <text class=\"uni-subtitle-text\">image 组件</text>\r\n          <text class=\"uni-info\">设置值: {{data.zIndexValue}}</text>\r\n          <text class=\"uni-info\">获取值: {{data.zIndexActualImage}}</text>\r\n          <view class=\"test-box\">\r\n            <image class=\"common-bg common-image-bg\" style=\"z-index: 1;\" src=\"/static/test-image/logo.png\"></image>\r\n            <image ref=\"imageRef\" class=\"common-dynamic common-image-bg test-image\" :style=\"{ zIndex: data.zIndexValue }\" src=\"/static/test-image/logo.png\"></image>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-common-mt uni-common-mb\">\r\n        <text class=\"uni-tips\">第一个枚举值，'' (空字符串) - 空值情况</text>\r\n        <enum-data :items=\"zIndexEnum\" title=\"z-index 枚举值\" @change=\"radioChangeZIndex\" :compact=\"true\"></enum-data>\r\n        <input-data :defaultValue=\"data.zIndexValue.toString()\" title=\"z-index 自定义值\" type=\"number\" @confirm=\"inputChangeZIndex\"></input-data>\r\n      </view>\r\n\r\n      <!-- #ifndef MP-ALIPAY -->\n      <view class=\"uni-common-mb\" style=\"top: 50px;\">\n        <text class=\"theme-label\">native-view组件: z-index: 10 和 z-index: 5</text>\n        <test-native-view class=\"common-text\" style=\"z-index: 10; background-color: cyan;\"></test-native-view>\n        <test-native-view class=\"common-text\" style=\"top: -40px;left: 30px;z-index: 5;background-color: green;\"></test-native-view>\n      </view>\n      <!-- #endif -->\n    </view>\n  </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n  type DataType = {\r\n    zIndex : number\r\n    zIndexValue : number\r\n    zIndexActual : string\r\n    zIndexActualText : string\r\n    zIndexActualImage : string\r\n  }\r\n\r\n  const data = reactive({\r\n    zIndex: 5,\r\n    zIndexValue: 5,\r\n    zIndexActual: '',\r\n    zIndexActualText: '',\r\n    zIndexActualImage: ''\r\n  } as DataType)\r\n\r\n  const view = ref(null as UniElement | null)\r\n\r\n  const changeZIndex = (zIndexValue : number) => {\r\n    data.zIndex = 20\r\n    view.value?.style.setProperty('z-index', zIndexValue)\r\n  }\r\n\r\n  const zIndexEnum : ItemType[] = [\r\n    { value: 0, name: '' },\r\n    { value: 1, name: '-1' },\r\n    { value: 2, name: '0' },\r\n    { value: 3, name: '1' },\r\n    { value: 4, name: '10' },\r\n  ]\r\n\r\n  const viewRef = ref(null as UniElement | null)\r\n  const textRef = ref(null as UniTextElement | null)\r\n  const imageRef = ref(null as UniImageElement | null)\r\n\r\n  const getPropertyValues = () => {\r\n    data.zIndexActual = viewRef.value?.style.getPropertyValue('z-index') ?? ''\r\n    data.zIndexActualText = textRef.value?.style.getPropertyValue('z-index') ?? ''\r\n    data.zIndexActualImage = imageRef.value?.style.getPropertyValue('z-index') ?? ''\r\n  }\r\n\r\n  const changeZIndexProperty = (value : number) => {\r\n    data.zIndexValue = value\r\n    viewRef.value?.style.setProperty('z-index', value)\r\n    textRef.value?.style.setProperty('z-index', value.toString())\r\n    imageRef.value?.style.setProperty('z-index', value.toString())\r\n    // 使用 nextTick 确保样式已应用后再获取值\r\n    nextTick(() => {\r\n      getPropertyValues()\r\n    })\r\n  }\r\n\r\n  const radioChangeZIndex = (index : number) => {\r\n    const selectedItem = zIndexEnum.find((item) : boolean => item.value === index)\r\n    if (selectedItem != null) {\r\n      const value = selectedItem.name === '' ? 0 : parseInt(selectedItem.name)\r\n      changeZIndexProperty(value)\r\n    }\r\n  }\r\n\r\n  const inputChangeZIndex = (value : string) => {\r\n    const numValue = parseInt(value)\r\n    if (!isNaN(numValue)) {\r\n      changeZIndexProperty(numValue)\r\n    }\r\n  }\r\n\r\n  onReady(() => {\r\n    getPropertyValues()\r\n  })\r\n\r\n  defineExpose({\r\n    data,\r\n    changeZIndex,\r\n    radioChangeZIndex\r\n  })\r\n</script>\r\n\r\n<style>\n  .cyan-text {\n    color: #1a1a1a;\n  }\n\n  .dark-block-text {\n    color: #1a1a1a;\n  }\n\n  .light-block-text {\n    color: #ffffff;\n  }\n\n  .theme-label {\n    color: var(--text-color, #333333);\n  }\n\n  .common {\r\n    width: 125px;\r\n    height: 125px;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  .common-text {\r\n    width: 125px;\r\n    height: 125px;\r\n  }\r\n\r\n  .fixed {\r\n    position: fixed;\r\n  }\r\n\r\n  .default {\r\n    background-color: yellow;\r\n    z-index: 10;\r\n    top: var(--uni-safe-area-inset-top);\r\n    left: var(--uni-safe-area-inset-left);\r\n  }\r\n\r\n  .specified {\r\n    background-color: yellowgreen;\r\n    z-index: 5;\r\n    /* #ifdef APP || MP */\r\n    top: 87px;\r\n    left: 87px;\r\n    /* #endif */\r\n    /* #ifdef WEB */\r\n    top: calc(var(--uni-safe-area-inset-top) + 87px);\r\n    left: calc(var(--uni-safe-area-inset-left) + 87px);\r\n    /* #endif */\r\n  }\r\n\r\n  .floor {\r\n    background-color: chocolate;\r\n    /* #ifdef APP || MP */\r\n    top: 250px;\r\n    left: 175px;\r\n    /* #endif */\r\n    /* #ifdef WEB */\r\n    top: calc(var(--uni-safe-area-inset-top) + 250px);\r\n    left: calc(var(--uni-safe-area-inset-left) + 175px);\r\n    /* #endif */\r\n    z-index: -1;\r\n  }\r\n\r\n  .popup {\r\n    /* #ifdef APP || MP */\r\n    top: 320px;\r\n    left: 87px;\r\n    /* #endif */\r\n    /* #ifdef WEB */\r\n    top: calc(var(--uni-safe-area-inset-top) + 320px);\r\n    left: calc(var(--uni-safe-area-inset-left) + 87px);\r\n    /* #endif */\r\n    height: 40px;\r\n  }\r\n\r\n  .image-zindex {\r\n    width: 125px;\r\n    height: 125px;\r\n    background-color: rgba(255, 255, 255, 0.5);\r\n  }\r\n\r\n  .common-dynamic {\r\n    width: 80px;\r\n    height: 80px;\r\n    position: absolute;\r\n    top: 20px;\r\n    left: 20px;\r\n  }\r\n\r\n  .common-bg {\r\n    width: 80px;\r\n    height: 80px;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n  }\r\n\r\n  .common-text-bg {\r\n    color: white;\r\n    font-size: 12px;\r\n    padding: 5px;\r\n  }\r\n\r\n  .common-image-bg {\r\n    width: 80px;\r\n    height: 80px;\r\n  }\r\n\r\n  .test-container {\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .test-item {\r\n    flex: 1;\r\n    margin: 0 5px;\r\n  }\r\n\r\n  .test-box {\r\n    width: 100%;\r\n    height: 120px;\r\n    background-color: gray;\r\n    position: relative;\r\n  }\r\n</style>\n\n```\n\n:::","restrictions":"\n### 值限制\n- integer\n"},"style_list":{"description":"README.md 中的 CSS 样式清单表格数据","name":"## 样式清单","compatibility":"| CSS 属性列表 |\n| :- |\n| [align-content](align-content.md) |\n| [align-items](align-items.md) |\n| [align-self](align-self.md) |\n| [animation](animation.md) |\n| [animation-composition](animation-composition.md) |\n| [animation-delay](animation-delay.md) |\n| [animation-direction](animation-direction.md) |\n| [animation-duration](animation-duration.md) |\n| [animation-fill-mode](animation-fill-mode.md) |\n| [animation-iteration-count](animation-iteration-count.md) |\n| [animation-name](animation-name.md) |\n| [animation-play-state](animation-play-state.md) |\n| [animation-range](animation-range.md) |\n| [animation-range-end](animation-range-end.md) |\n| [animation-range-start](animation-range-start.md) |\n| [animation-timeline](animation-timeline.md) |\n| [animation-timing-function](animation-timing-function.md) |\n| [backdrop-filter](backdrop-filter.md) |\n| [background](background.md) |\n| [background-clip](background-clip.md) |\n| [background-color](background-color.md) |\n| [background-image](background-image.md) |\n| [border](border.md) |\n| [border-bottom](border-bottom.md) |\n| [border-bottom-color](border-bottom-color.md) |\n| [border-bottom-left-radius](border-bottom-left-radius.md) |\n| [border-bottom-right-radius](border-bottom-right-radius.md) |\n| [border-bottom-style](border-bottom-style.md) |\n| [border-bottom-width](border-bottom-width.md) |\n| [border-color](border-color.md) |\n| [border-left](border-left.md) |\n| [border-left-color](border-left-color.md) |\n| [border-left-style](border-left-style.md) |\n| [border-left-width](border-left-width.md) |\n| [border-radius](border-radius.md) |\n| [border-right](border-right.md) |\n| [border-right-color](border-right-color.md) |\n| [border-right-style](border-right-style.md) |\n| [border-right-width](border-right-width.md) |\n| [border-style](border-style.md) |\n| [border-top](border-top.md) |\n| [border-top-color](border-top-color.md) |\n| [border-top-left-radius](border-top-left-radius.md) |\n| [border-top-right-radius](border-top-right-radius.md) |\n| [border-top-style](border-top-style.md) |\n| [border-top-width](border-top-width.md) |\n| [border-width](border-width.md) |\n| [bottom](bottom.md) |\n| [box-shadow](box-shadow.md) |\n| [box-sizing](box-sizing.md) |\n| [color](color.md) |\n| [direction](direction.md) |\n| [display](display.md) |\n| [flex](flex.md) |\n| [flex-basis](flex-basis.md) |\n| [flex-direction](flex-direction.md) |\n| [flex-flow](flex-flow.md) |\n| [flex-grow](flex-grow.md) |\n| [flex-shrink](flex-shrink.md) |\n| [flex-wrap](flex-wrap.md) |\n| [font-family](font-family.md) |\n| [font-size](font-size.md) |\n| [font-style](font-style.md) |\n| [font-weight](font-weight.md) |\n| [height](height.md) |\n| [justify-content](justify-content.md) |\n| [left](left.md) |\n| [letter-spacing](letter-spacing.md) |\n| [line-height](line-height.md) |\n| [lines](lines.md) |\n| [margin](margin.md) |\n| [margin-bottom](margin-bottom.md) |\n| [margin-left](margin-left.md) |\n| [margin-right](margin-right.md) |\n| [margin-top](margin-top.md) |\n| [max-height](max-height.md) |\n| [max-width](max-width.md) |\n| [min-height](min-height.md) |\n| [min-width](min-width.md) |\n| [opacity](opacity.md) |\n| [overflow](overflow.md) |\n| [padding](padding.md) |\n| [padding-bottom](padding-bottom.md) |\n| [padding-left](padding-left.md) |\n| [padding-right](padding-right.md) |\n| [padding-top](padding-top.md) |\n| [pointer-events](pointer-events.md) |\n| [position](position.md) |\n| [right](right.md) |\n| [text-align](text-align.md) |\n| [text-decoration](text-decoration.md) |\n| [text-decoration-color](text-decoration-color.md) |\n| [text-decoration-line](text-decoration-line.md) |\n| [text-decoration-style](text-decoration-style.md) |\n| [text-decoration-thickness](text-decoration-thickness.md) |\n| [text-overflow](text-overflow.md) |\n| [text-shadow](text-shadow.md) |\n| [top](top.md) |\n| [transform](transform.md) |\n| [transform-origin](transform-origin.md) |\n| [transition](transition.md) |\n| [transition-delay](transition-delay.md) |\n| [transition-duration](transition-duration.md) |\n| [transition-property](transition-property.md) |\n| [transition-timing-function](transition-timing-function.md) |\n| [visibility](visibility.md) |\n| [white-space](white-space.md) |\n| [width](width.md) |\n| [z-index](z-index.md) |","reference":"","syntax":"","values":"","example":""},"style_reset_list":{"description":"uvue 中部分 CSS 属性的默认值与 W3C 标准存在差异，具体如下：","name":"## 样式重置清单","compatibility":"| CSS 属性列表 | uvue-app | uvue-web | w3c |\n| :- | :- | :- | :- |\n| align-content | stretch | stretch | normal |\n| align-items | stretch | stretch | normal |\n| border-bottom-color | #000000 | currentcolor | currentcolor |\n| border-color | #000000 | currentcolor | currentcolor |\n| border-left-color | #000000 | currentcolor | currentcolor |\n| border-right-color | #000000 | currentcolor | currentcolor |\n| border-top-color | #000000 | currentcolor | currentcolor |\n| box-sizing | border-box | border-box | content-box |\n| color | #000000 | canvastext | canvastext |\n| display | flex | flex | inline |\n| flex | none | none | initial |\n| flex-direction | column | column | row |\n| flex-shrink | 0 | 0 | 1 |\n| font-size | 16px | 16px | medium |\n| justify-content | flex-start | flex-start | normal |\n| letter-spacing | 0 | 0 | normal |\n| min-height | 0px | 0px | auto |\n| min-width | 0px | 0px | auto |\n| overflow | hidden | hidden | visible |\n| position | relative | relative | static |\n| text-align | left | left | start |\n| transform-origin | 50% 50% | 50% 50% 0 | 50% 50% 0 |\n| white-space | keep | pre-line | normal |\n| z-index | 0 | auto | auto |","reference":"","syntax":"","values":"","example":""},"selector_values":{"description":"","name":"## CSS 选择器","compatibility":"| 名称 | 示例 | Web | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) | 描述 |\n| :- | :- | :- | :- | :- | :- | :- | :- | :- | :- |\n| 通配选择器 | * {} | 4.0 | x |   | x | x | x | x |  |\n| 类选择器 | .class {} | 4.0 | 3.9 |   | 4.11 | 5.11 | 4.61 | 5.0 |  |\n| 元素选择器 | \\[tag] {} | 4.0 | x |   | x | x | x | x | App平台蒸汽模式支持page选择器 |\n| ID 选择器 | #\\[id] {} | 4.0 | x |   | x | x | x | x |  |\n| 属性选择器 | \\[attr] {} | 4.0 | x |   | x | x | x | x |  |\n| 分组选择器 | .a, .b {} | 4.0 | 3.9 |   | 4.11 | 5.11 | 4.61 | 5.0 |  |\n| 直接子代选择器 | .a > .b {} | 4.0 | 3.9 | x | 4.11 | x | 4.61 | x |  |\n| 后代选择器 | .a .b {} | 4.0 | 3.9 | x | 4.11 | x | 4.61 | x |  |\n| 一般兄弟选择器 | .a ~ .b {} | 4.0 | 3.9 | x | 4.11 | x | 4.61 | x |  |\n| 紧邻兄弟选择器 | .a + .b {} | 4.0 | 3.9 | x | 4.11 | x | 4.61 | x |  |\n| 伪类选择器 | :active {} | 4.0 | x |   | x | x | x | x |  |\n| 伪元素选择器 | ::before {} | 4.0 | x |   | x | x | x | x |  |","reference":"","syntax":"","values":"","example":""},"at_rules_values":{"description":"","name":"## At-rules","compatibility":"| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| @charset | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | @charset CSS @规则指定样式表中使用的字符编码。它必须是样式表中的第一个元素，而前面不得有任何字符。因为它不是一个嵌套语句，所以不能在@规则条件组中使用。如果有多个 @charset @规则被声明，只有第一个会被使用，而且不能在 HTML 元素或 HTML 页面的字符集相关 \\<style> 元素内的样式属性内使用。 |\n| @color-profile | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | @color-profile CSS at-rule 定义并命名一个颜色配置文件，稍后可以在 color() 函数中使用该配置文件来指定颜色。 |\n| @container | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | @container CSS at-rule 是将样式应用于包含上下文的条件组规则。 样式声明按条件筛选，如果条件为 true，则应用于容器。 当容器更改大小时，将评估条件。你还可以给这个收纳盒贴上一个名字，这样它就会专门整理那些名字相同的容器。当它整理容器的时候，会仔细检查每个容器的所有细节，确保所有条件都符合才会应用样式。 |\n| @counter-style | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | @counter-style 是一个 CSS at-rule ，它让开发者可以自定义 counter 的样式。一个 @counter-style 规则定义了如何把一个计数器的值转化为字符串表示。 |\n| @document | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | @document CSS at 规则根据文档的 URL 限制其中包含的样式规则。它主要用于用户定义的样式表，但也可用于作者定义的样式表。 |\n| @font-face | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | @font-face CSS at-rule 指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载。如果提供了 local() 函数，从用户本地查找指定的字体名称，并且找到了一个匹配项，本地字体就会被使用。否则，字体就会使用 url() 函数下载的资源。通过允许作者提供他们自己的字体，@font-face 让设计内容成为了一种可能，同时并不会被所谓的\"网络 - 安全\"字体所限制 (字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体，同时在不依赖网络情况下实现此功能。在同时使用 url() 和 local() 功能时，为了用户已经安装的字体副本在需要使用时被使用，如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。@font-face 规则不仅仅使用在 CSS 的顶层，还可以用在任何 CSS 条件组规则中。 |\n| @font-feature-values | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | @font-feature-values CSS at-rule 允许作者在font-variant-alternates 中使用通用名称，用于在 OpenType 中以不同方式激活功能。它允许在使用几种字体时简化 CSS。 |\n| @font-palette-values | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | @font-palette-values CSS at-rule 允许您自定义字体制作者创建的字体调色板的默认值。 |\n| @import | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | @import CSS@规则，用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@charset 规则除外; 因为它不是一个嵌套语句，@import 不能在条件组的规则中使用。 |\n| @keyframes | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"x\",\"5.25\",\"x\",\"5.25\",\"x\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。和 转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。 |\n| @layer | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | CSS @规则 中的@layer声明了一个 级联层，同一层内的规则将级联在一起，这给予了开发者对层叠机制的更多控制。 |\n| @media | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"x\",\"5.25\",\"x\",\"5.25\",\"x\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | @media CSS at 规则可用于基于一个或多个媒体查询的结果来应用样式表的一部分。使用它，你可以指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。 |\n| @namespace | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | @namespace 是用来定义使用在 CSS 样式表中的 XML 命名空间的 @规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。@namespace规则通常在处理包含多个 namespaces 的文档时才有用，比如 HTML5 里内联的 SVG、MathML 或者混合多个词汇表的 XML。 |\n| @page | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | @page 规则用于在打印文档时修改某些 CSS 属性。 |\n| @property | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | @property CSS at-rule是CSS Houdini API 的一部分，它允许开发者显式地定义他们的CSS 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。 |\n| @supports | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | @supports CSS at-rule 你可以指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。 |\n| @-moz-document | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Gecko-specific at-rule that restricts the style rules contained within it based on the URL of the document. |\n| @-moz-keyframes | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Defines set of animation key frames. |\n| @-ms-viewport | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Specifies the size, zoom factor, and orientation of the viewport. |\n| @-o-keyframes | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Defines set of animation key frames. |\n| @-o-viewport | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Specifies the size, zoom factor, and orientation of the viewport. |\n| @-webkit-keyframes | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Defines set of animation key frames. |","reference":"","syntax":"","values":"","example":""},"color_values":{"description":"","name":"## 颜色","compatibility":"| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| named-color | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | CSS 数据类型 <named-color> 为颜色名——如: red、blue、black 或 lightseagreen。- [MDN Reference](https://developer.mozilla.org/zh-CN/docs/Web/CSS/named-color) |\n| hex-color | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | CSS 数据类型 <hex-color> 为描述 sRGB 颜色的十六进制颜色语法的记号，此记号将颜色的主分量（红、绿、蓝）及其透明度写为十六进制数。如: #FFFFFF 表示白色- [MDN Reference](https://developer.mozilla.org/zh-CN/docs/Web/CSS/hex-color) |\n@| 名称 | 兼容性 | 描述 |\n@| :- | :- | :- |\n@| #RGB | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 十六进制颜色三值语法，如: #FFF 表示白色 |\n@| #RGBA | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.41\",\"4.41\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 十六进制颜色四值语法，如: #FFFA 表示半透明白色（透明度值为AA） |\n@| #RRGGBB | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 十六进制颜色六值语法，如: #FFFFFF 表示白色 |\n@| #RRGGBBAA | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.41\",\"4.41\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 十六进制颜色八值语法，如: #FFFFFFAA 表示半透明白色（透明度值为AA） |\n| currentColor | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 'color' 属性的值。'currentColor' 关键字的计算值是 'color' 属性的计算值。如果 'currentColor' 关键字设置在 'color' 属性本身上，则在解析时会将其视为 'color:inherit'。 |\n| transparent | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 完全透明。这个关键字可以被认为是 rgba(0,0,0,0) 的简写，这是它的计算值。 |\n| rgb | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 根据红色、绿色和蓝色值创建颜色。 |\n| rgba | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 根据红色、绿色、蓝色和 alpha 值创建颜色。 |\n| rgb relative | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据另一个颜色的红色、绿色和蓝色值创建颜色。 |\n| hsl | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据色调、饱和度和亮度值创建颜色。 |\n| hsla | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据色调、饱和度、亮度和 alpha 值创建颜色。 |\n| hsl relative | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据另一个颜色的色调、饱和度和亮度值创建颜色。 |\n| hwb | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据色调、白色和黑色值创建颜色。 |\n| hwb relative | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据另一个颜色的色调、白色和黑色值创建颜色。 |\n| lab | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据亮度、a 和 b 值创建颜色。 |\n| lab relative | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据另一个颜色的亮度、a 和 b 值创建颜色。 |\n| oklab | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据亮度、a 和 b 值创建颜色。 |\n| oklab relative | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据另一个颜色的亮度、a 和 b 值创建颜色。 |\n| lch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据亮度、色度和色调值创建颜色。 |\n| lch relative | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据另一个颜色的亮度、色度和色调值创建颜色。 |\n| oklch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据亮度、色度和色调值创建颜色。 |\n| oklch relative | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据另一个颜色的亮度、色度和色调值创建颜色。 |\n| color | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在特定色彩空间中，根据红色、绿色和蓝色值创建颜色。 |\n| color relative | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在特定色彩空间中，根据另一个颜色的红色、绿色和蓝色值创建颜色。 |\n| color-mix | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在矩形色彩空间中混合两种颜色。 |\n| color-mix hue | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在极坐标色彩空间中混合两种颜色。 |","reference":"","syntax":"","values":"","example":""},"length_values":{"description":"","name":"## 长度单位","compatibility":"| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| px | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |   |\n| rpx | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |   |\n| em | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| rem | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cap | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| ch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cm | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cqb | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cqh | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cqi | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cqmax | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cqmin | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cqw | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| dvb | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| dvh | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| dvi | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| dvw | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| ex | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| ic | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| in | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| lh | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| lvb | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| lvh | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| lvi | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| lvw | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| mm | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| pc | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| pt | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| q | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| rcap | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| rch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| rex | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| ric | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| rlh | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| svb | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| svh | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| svi | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| svw | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| vb | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| vh | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| vi | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| vmax | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| vmin | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| vw | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| % | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | app平台仅width、height、padding(-*)、margin(-*)、top、left、right、bottom、flex-basis等属性支持 |\n| fr | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |","reference":"","syntax":"","values":"","example":""},"font-length_values":{"description":"","name":"## 字体大小","compatibility":"| 名称 | 兼容性 | 描述 |\n| :- | :- | :- |\n| px | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |   |\n| rpx | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |   |\n| em | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | app平台仅line-height属性支持 |\n| rem | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cap | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| ch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cm | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cqb | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cqh | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cqi | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cqmax | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cqmin | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| cqw | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| dvb | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| dvh | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| dvi | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| dvw | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| ex | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| ic | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| in | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| lh | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| lvb | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| lvh | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| lvi | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| lvw | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| mm | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| pc | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| pt | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| q | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| rcap | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| rch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| rex | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| ric | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| rlh | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| svb | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| svh | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| svi | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| svw | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| vb | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| vh | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| vi | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| vmax | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| vmin | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| vw | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |","reference":"","syntax":"","values":"","example":""},"variables_values":{"description":"","name":"## CSS 变量","compatibility":"### 兼容性 <Help /> \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |","reference":"","syntax":"","values":"","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/variable/variable.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/variable/variable.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/variable/variable\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/variable/variable\n\n>示例\n```vue\n<template>\r\n  <view class=\"page uni-theme-root\">\n    <view class=\"status-bar-height\">\r\n      <text class=\"light-label\">通过var(--status-bar-height)获取状态栏高度</text>\n    </view>\r\n    <view class=\"status-bar-window\" :style=\"{ height: statusBarHeight + 'px' }\">\r\n      <text class=\"dark-label\">通过uni.getWindowInfo获取状态栏高度</text>\n    </view>\r\n    <view class=\"status-bar-unipage\" :style=\"{ height: statusBarHeight2 + 'px' }\">\r\n      <text class=\"dark-label\">通过this.$page.statusBarHeight获取状态栏高度</text>\n    </view>\r\n    <view class=\"window-top\">\r\n      <text class=\"light-label\">window top</text>\n    </view>\r\n    <view class=\"window-bottom\">\r\n      <text class=\"light-label\">window bottom</text>\n    </view>\r\n\r\n    <view class=\"uni-safe-area-inset-top\">\r\n      <text class=\"dark-label\">height:var(--uni-safe-area-inset-top)</text>\n    </view>\r\n    <view class=\"uni-safe-area-inset-left\">\r\n      <text class=\"dark-label\">height:var(--uni-safe-area-inset-left)</text>\n    </view>\r\n    <view class=\"uni-safe-area-inset-right\">\r\n      <text class=\"light-label\">height:var(--uni-safe-area-inset-right)</text>\n    </view>\r\n    <view class=\"uni-safe-area-inset-bottom\">\r\n      <text class=\"dark-label\">height:var(--uni-safe-area-inset-bottom)</text>\n    </view>\r\n    <view class=\"uni-fixed-bottom\">\r\n      <text class=\"light-label\">此区域应显示在安全区域内</text>\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n\r\n  const statusBarHeight = ref(0)\r\n  const statusBarHeight2 = ref(0)\r\n\r\n  const instance = getCurrentInstance()\r\n\r\n  onReady(() => {\r\n    statusBarHeight.value = uni.getWindowInfo().statusBarHeight\r\n    // #ifndef MP-WEIXIN\r\n    statusBarHeight2.value = instance?.proxy?.$page?.statusBarHeight ?? 0\r\n    // #endif\r\n  })\r\n</script>\r\n\r\n<style>\r\n  .page {\n    flex: 1;\n  }\n\n  .dark-label {\n    color: #1a1a1a;\n  }\n\n  .light-label {\n    color: #ffffff;\n  }\r\n\r\n  .status-bar-height {\r\n    height: var(--status-bar-height);\r\n    align-items: center;\r\n    justify-content: center;\r\n    background-color: red;\r\n  }\r\n\r\n  .status-bar-window {\r\n    background-color: yellow;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  .status-bar-unipage {\r\n    align-items: center;\r\n    justify-content: center;\r\n    background-color: greenyellow;\r\n  }\r\n\r\n  .window-top {\r\n    height: var(--window-top);\r\n    align-items: center;\r\n    background-color: green;\r\n    margin: 2px 0px;\r\n  }\r\n\r\n  .window-bottom {\r\n    height: var(--window-bottom);\r\n    align-items: center;\r\n    background-color: blue;\r\n    margin: 2px 0px;\r\n  }\r\n\r\n  .uni-safe-area-inset-top {\r\n    height: var(--uni-safe-area-inset-top);\r\n    align-items: center;\r\n    background-color: yellow;\r\n    margin: 2px 0px;\r\n  }\r\n\r\n  .uni-safe-area-inset-left {\r\n    height: var(--uni-safe-area-inset-left);\r\n    align-items: center;\r\n    background-color: greenyellow;\r\n    margin: 2px 0px;\r\n  }\r\n\r\n  .uni-safe-area-inset-right {\r\n    height: var(--uni-safe-area-inset-right, 60px);\r\n    align-items: center;\r\n    background-color: saddlebrown;\r\n    margin: 2px 0px;\r\n  }\r\n\r\n  .uni-safe-area-inset-bottom {\r\n    height: var(--uni-safe-area-inset-bottom);\r\n    align-items: center;\r\n    background-color: salmon;\r\n    margin: 2px 0px;\r\n  }\r\n\r\n  .uni-fixed-bottom {\r\n    position: fixed;\r\n    left: var(--uni-safe-area-inset-left);\r\n    right: var(--uni-safe-area-inset-right);\r\n    bottom: var(--uni-safe-area-inset-bottom);\r\n    align-items: center;\r\n    background-color: blueviolet;\r\n  }\r\n</style>\r\n\n```\n\n:::"},"function-env_values":{"description":"","name":"","compatibility":"","reference":"","syntax":"","values":"","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/function/function.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/function/function.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/function/function\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/function/function\n\n>示例\n```vue\n<template>\n\t<view class=\"padding-safe-area-inset\">\n\t\t<view class=\"text-background\">我在状态栏下边</view>\n    <view class=\"content\">\n      <text>此页面使用env()函数适配安全区域，仅在app平台生效。</text>\n      <text>safe-area-inset-top: {{safeareaInsetTop}}px</text>\n      <text>safe-area-inset-left: {{safeareaInsetLeft}}px</text>\n      <text>safe-area-inset-right: {{safeareaInsetRight}}px</text>\n      <text>safe-area-inset-bottom: {{safeareaInsetBottom}}px</text>\n    </view>\n\t\t<view class=\"text-background\">我在导航栏上边</view>\n\t</view>\n</template>\n\n<script setup lang=\"uts\">\n\n\tconst safeareaInsetTop = ref(0)\n\tconst safeareaInsetLeft = ref(0)\n\tconst safeareaInsetRight = ref(0)\n\tconst safeareaInsetBottom = ref(0)\n\n\tconst instance = getCurrentInstance()\n\n\tonReady(() => {\n\t\tconst page = instance?.proxy?.$page\n\t\tsafeareaInsetTop.value = page?.safeAreaInsets.top ?? 0\n\t\tsafeareaInsetLeft.value = page?.safeAreaInsets.left ?? 0\n\t\tsafeareaInsetRight.value = page?.safeAreaInsets.right ?? 0\n\t\tsafeareaInsetBottom.value = page?.safeAreaInsets.bottom ?? 0\n\t})\n\n\tonResize((options) => {\n\t\tconst page = instance?.proxy?.$page\n\t\tsafeareaInsetTop.value = page?.safeAreaInsets.top ?? 0\n\t\tsafeareaInsetLeft.value = page?.safeAreaInsets.left ?? 0\n\t\tsafeareaInsetRight.value = page?.safeAreaInsets.right ?? 0\n\t\tsafeareaInsetBottom.value = page?.safeAreaInsets.bottom ?? 0\n\t})\n</script>\n\n<style>\n  .text-background {\n    background-color: red;\n  }\n\t.padding-safe-area-inset {\n\t\tflex: 1;\n\t\tjustify-content: space-between;\n/* #ifdef APP */\n\t\tpadding-top: env(safe-area-inset-top, 0px);\n\t\tpadding-left: env(safe-area-inset-left, 0px);\n\t\tpadding-right: env(safe-area-inset-right, 0px);\n\t\tpadding-bottom: env(safe-area-inset-bottom, 0px);\n/* #endif */\n\t}\n  .content{\n    padding: 20px;\n  }\n</style>\n\n```\n\n:::"},"function-rgb_values":{"description":"根据红色、绿色和蓝色值创建颜色。","name":"","compatibility":"### 兼容性 <Help /> \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |","reference":"","syntax":"","values":"","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/function/rgb.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/function/rgb.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/function/rgb/\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/function/rgb\n\n>示例\n```vue\n<template>\n  <view class=\"container\">\n    <text class=\"intro-text\">RGB 是一种颜色表示方法，通过调整红(Red)、绿(Green)、蓝(Blue)三个通道的值（0-255）来产生不同的颜色。</text>\n\n    <view class=\"section\">\n      <text class=\"section-title\">数值表示 (0-255)</text>\n      <view class=\"color-grid\">\n        <view class=\"color-item\">\n          <view class=\"color-box\" style=\"background-color: rgb(255, 0, 0);\"></view>\n          <text class=\"color-name\">红色</text>\n          <text class=\"color-value\">rgb(255, 0, 0)</text>\n        </view>\n        <view class=\"color-item\">\n          <view class=\"color-box\" style=\"background-color: rgb(0, 255, 0);\"></view>\n          <text class=\"color-name\">绿色</text>\n          <text class=\"color-value\">rgb(0, 255, 0)</text>\n        </view>\n        <view class=\"color-item\">\n          <view class=\"color-box\" style=\"background-color: rgb(0, 0, 255);\"></view>\n          <text class=\"color-name\">蓝色</text>\n          <text class=\"color-value\">rgb(0, 0, 255)</text>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"section\">\n      <view class=\"color-grid\">\n        <view class=\"color-item\">\n          <view class=\"color-box\" style=\"background-color: rgb(255, 255, 0);\"></view>\n          <text class=\"color-name\">黄色</text>\n          <text class=\"color-value\">rgb(255, 255, 0)</text>\n        </view>\n        <view class=\"color-item\">\n          <view class=\"color-box\" style=\"background-color: rgb(255, 0, 255);\"></view>\n          <text class=\"color-name\">品红</text>\n          <text class=\"color-value\">rgb(255, 0, 255)</text>\n        </view>\n        <view class=\"color-item\">\n          <view class=\"color-box\" style=\"background-color: rgb(0, 255, 255);\"></view>\n          <text class=\"color-name\">青色</text>\n          <text class=\"color-value\">rgb(0, 255, 255)</text>\n        </view>\n      </view>\n    </view>\n  </view>\n</template>\n\n<style>\n.container {\n  padding: 20px;\n}\n\n.intro-text {\n  font-size: 14px;\n  color: #333;\n  margin-bottom: 30px;\n  line-height: 1.4;\n}\n\n.section {\n  margin-bottom: 30px;\n}\n\n.section-title {\n  font-size: 18px;\n  font-weight: bold;\n  margin-bottom: 15px;\n}\n\n.color-grid {\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n.color-item {\n  width: 30%;\n  margin-bottom: 20px;\n}\n\n.color-box {\n  width: 100%;\n  height: 100px;\n  border-radius: 8px;\n  margin-bottom: 8px;\n}\n\n.color-name {\n  font-size: 16px;\n  font-weight: bold;\n  margin-bottom: 4px;\n}\n\n.color-value {\n  font-size: 12px;\n  color: #666;\n}\n</style>\n\n```\n\n:::"},"function-rgba_values":{"description":"根据红色、绿色、蓝色和 alpha 值创建颜色。","name":"","compatibility":"### 兼容性 <Help /> \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |","reference":"","syntax":"","values":"","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/function/rgba.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/function/rgba.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/function/rgba/\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/function/rgba\n\n>示例\n```vue\n<template>\n  <view class=\"container\">\n    <text class=\"intro-text\">RGBA 在 RGB 的基础上增加了透明度(Alpha)通道，取值范围为 0-1，0 表示完全透明，1 表示完全不透明。</text>\n\n    <view class=\"section\">\n      <text class=\"section-title\">数值表示 (RGB: 0-255, A: 0-1)</text>\n      <view class=\"color-grid\">\n        <view class=\"color-item\">\n          <view class=\"color-box\" style=\"background-color: rgba(255, 0, 0, 0.1);\"></view>\n          <text class=\"color-name\">红色 10% 透明</text>\n          <text class=\"color-value\">rgba(255, 0, 0, 0.1)</text>\n        </view>\n        <view class=\"color-item\">\n          <view class=\"color-box\" style=\"background-color: rgba(255, 0, 0, 0.5);\"></view>\n          <text class=\"color-name\">红色 50% 透明</text>\n          <text class=\"color-value\">rgba(255, 0, 0, 0.5)</text>\n        </view>\n        <view class=\"color-item\">\n          <view class=\"color-box\" style=\"background-color: rgba(255, 0, 0, 1);\"></view>\n          <text class=\"color-name\">红色 不透明</text>\n          <text class=\"color-value\">rgba(255, 0, 0, 1)</text>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"section\">\n      <view class=\"color-grid\">\n        <view class=\"color-item\">\n          <view class=\"color-box\" style=\"background-color: rgba(0, 0, 255, 0.1);\"></view>\n          <text class=\"color-name\">蓝色 10% 透明</text>\n          <text class=\"color-value\">rgba(0, 0, 255, 0.1)</text>\n        </view>\n        <view class=\"color-item\">\n          <view class=\"color-box\" style=\"background-color: rgba(0, 0, 255, 0.5);\"></view>\n          <text class=\"color-name\">蓝色 50% 透明</text>\n          <text class=\"color-value\">rgba(0, 0, 255, 0.5)</text>\n        </view>\n        <view class=\"color-item\">\n          <view class=\"color-box\" style=\"background-color: rgba(0, 0, 255, 1);\"></view>\n          <text class=\"color-name\">蓝色 不透明</text>\n          <text class=\"color-value\">rgba(0, 0, 255, 1)</text>\n        </view>\n      </view>\n    </view>\n  </view>\n</template>\n\n<style>\n.container {\n  padding: 20px;\n}\n\n.intro-text {\n  font-size: 14px;\n  color: #333;\n  margin-bottom: 30px;\n  line-height: 1.4;\n}\n\n.section {\n  margin-bottom: 30px;\n}\n\n.section-title {\n  font-size: 18px;\n  font-weight: bold;\n  margin-bottom: 15px;\n}\n\n.color-grid {\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n.color-item {\n  width: 30%;\n  margin-bottom: 20px;\n}\n\n.color-box {\n  width: 100%;\n  height: 100px;\n  border-radius: 8px;\n  margin-bottom: 8px;\n}\n\n.color-name {\n  font-size: 16px;\n  font-weight: bold;\n  margin-bottom: 4px;\n}\n\n.color-value {\n  font-size: 12px;\n  color: #666;\n}\n</style>\n\n```\n\n:::"},"function-url_values":{"description":"根据传递路径读取加载资源。","name":"","compatibility":"","reference":"","syntax":"","values":"","example":"### 示例 \n 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/function/url.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/function/url.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/function/url/\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/function/url\n\n>示例\n```vue\n<template>\n\t<view class=\"container\">\n\t\t<text class=\"intro-text\">url() 函数用于加载图片、字体等资源，支持 /static 目录下的本地文件和网络链接。</text>\n\t\t<view class=\"section\">\n\t\t\t<text class=\"section-title\">字体示例</text>\n\t\t\t<view class=\"font-grid\">\n\t\t\t\t<!-- #ifdef APP-IOS -->\n\t\t\t\t<view class=\"font-item\">\n\t\t\t\t\t<text class=\"custom-font\">阿里妈妈刀隶体</text>\n\t\t\t\t\t<text class=\"font-value\">@font-face { font-family: 'AlimamaDaoLiTi'; src: url('/static/app-ios/AlimamaDaoLiTi.woff2') }</text>\n\t\t\t\t</view>\n\t\t\t\t<!-- #endif -->\n\t\t\t\t<!-- #ifndef MP-WEIXIN -->\n\t\t\t\t<view class=\"font-item\">\n\t\t\t\t\t<text class=\"pacifico-font\">Pacifico Font Example</text>\n\t\t\t\t\t<text class=\"font-value\">@font-face { font-family: 'Pacifico'; src: url('/static/font/Pacifico-Regular.ttf') }</text>\n\t\t\t\t</view>\n\t\t\t\t<!-- #endif -->\n\t\t\t\t<view class=\"font-item\">\n\t\t\t\t\t<text class=\"web-font\">网络字体</text>\n\t\t\t\t\t<text class=\"font-value\">@font-face { font-family: 'AlimamaDaoLiTiTTF'; src: url('https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/font/AlimamaDaoLiTi.ttf') }</text>\n\t\t\t\t</view>\n\t\t\t</view>\n\t\t</view>\n\t</view>\n</template>\n\n<style>\n\t@font-face {\n\t\tfont-family: 'AlimamaDaoLiTi';\n\t\tsrc: url('/static/app-ios/AlimamaDaoLiTi.woff2'),\n\t\t\t url('/static/app-ios/AlimamaDaoLiTi.woff'),\n\t\t\t url('/static/font/AlimamaDaoLiTi.otf');\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Pacifico';\n\t\tsrc: url('/static/font/Pacifico-Regular.ttf');\n\t}\n\n\t@font-face {\n\t\tfont-family: 'AlimamaDaoLiTiTTF';\n\t\tsrc: url('https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/font/AlimamaDaoLiTi.ttf');\n\t}\n\n\t.container {\n\t\tpadding: 20px;\n\t}\n\n\t.intro-text {\n\t\tfont-size: 14px;\n\t\tcolor: #333;\n\t\tmargin-bottom: 30px;\n\t\tline-height: 1.6;\n\t\tpadding: 15px;\n\t\tbackground-color: #f8f9fa;\n\t\tborder-radius: 8px;\n\t}\n\n\t.section {\n\t\tmargin-bottom: 30px;\n\t}\n\n\t.section-title {\n\t\tfont-size: 18px;\n\t\tfont-weight: bold;\n\t\tmargin-bottom: 15px;\n\t}\n\n\t.font-grid {\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t}\n\n\t.font-item {\n\t\twidth: 100%;\n\t\tmargin-bottom: 20px;\n\t}\n\n\t.custom-font {\n\t\tfont-size: 20px;\n\t\tmargin-bottom: 8px;\n\t\tfont-family: 'AlimamaDaoLiTi';\n\t}\n\n\t.pacifico-font {\n\t\tfont-size: 20px;\n\t\tmargin-bottom: 8px;\n\t\tfont-family: 'Pacifico';\n\t}\n\n\t.web-font {\n\t\tfont-size: 20px;\n\t\tmargin-bottom: 8px;\n\t\tfont-family: 'AlimamaDaoLiTiTTF';\n\t}\n\n\t.font-value {\n\t\tfont-size: 12px;\n\t\tcolor: #999;\n\t}\n</style>\n\n```\n\n:::"},"css_no_flatten_list":{"description":"不支持拍平的 CSS 属性","name":"## 不支持拍平的 CSS 属性","compatibility":"| CSS 属性列表 | 兼容性 |\n| :- |  :-: |\n| [animation](animation.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [animation-composition](animation-composition.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [animation-delay](animation-delay.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [animation-direction](animation-direction.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [animation-duration](animation-duration.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [animation-fill-mode](animation-fill-mode.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [animation-iteration-count](animation-iteration-count.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [animation-name](animation-name.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [animation-play-state](animation-play-state.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [animation-range](animation-range.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [animation-range-end](animation-range-end.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [animation-range-start](animation-range-start.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [animation-timeline](animation-timeline.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [animation-timing-function](animation-timing-function.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [backdrop-filter](backdrop-filter.md) |   |\n| [background-clip](background-clip.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [background-image](background-image.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [lines](lines.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [overflow](overflow.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| [pointer-events](pointer-events.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [text-decoration](text-decoration.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [text-decoration-color](text-decoration-color.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| [text-decoration-style](text-decoration-style.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [text-decoration-thickness](text-decoration-thickness.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [transition](transition.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [transition-delay](transition-delay.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [transition-duration](transition-duration.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [transition-property](transition-property.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [transition-timing-function](transition-timing-function.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [visibility](visibility.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |\n| [z-index](z-index.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> |","reference":"","syntax":"","values":"","example":""}}