{"align-content":{"name":"## align-content\n","description":"\nCSS 的 align-content 属性用于设置交叉轴方向多个行或列的分布方式\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nalign-content: normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>;\n```\n","values":"\n### align-content 的属性值\n`center`<br/>所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。<br/><br/><br/>`flex-start`<br/>所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。<br/><br/><br/>`flex-end`<br/>所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。<br/><br/><br/>`space-between`<br/>所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。<br/><br/><br/>`space-around`<br/>所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。<br/><br/><br/>`stretch`<br/>拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。\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- [swiper-item](/component/swiper-item.md)\n- [navigator](/component/navigator.md)","compatibility":"### 兼容性 \n\n#### align-content 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| center | 4.0 | 3.9 | 4.11 |\n| flex-start | 4.0 | 3.9 | 4.11 |\n| flex-end | 4.0 | 3.9 | 4.11 |\n| space-between | 4.0 | 3.9 | 4.11 |\n| space-around | 4.0 | 3.9 | 4.11 |\n| stretch | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| align-content | √（ 29 ） | √（ 12 ） | √（ 28 ） | √（ 16 ） | √（ 9 ） | √（ 11 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/align-content)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.align-content)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view style=\"flex-grow: 1\">\r\n <view>\r\n <text>align-content: center</text>\r\n <view class=\"common\" style=\"align-content: center\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>align-content: flex-start</text>\r\n <view class=\"common\" style=\"align-content: flex-start\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>align-content: flex-end</text>\r\n <view class=\"common\" style=\"align-content: flex-end\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>align-content: space-between</text>\r\n <view class=\"common\" style=\"align-content: space-between\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>align-content: space-around</text>\r\n <view class=\"common\" style=\"align-content: space-around\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>align-content: stretch</text>\r\n <view class=\"common\" style=\"align-content: stretch\">\r\n <view style=\"width: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; background-color: blue\"></view>\r\n <view style=\"width: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n flex-flow: row wrap;\r\n }\r\n</style>\n\n```\n\n:::"},"align-items":{"name":"## align-items\n","description":"\nCSS align-items 属性将所有直接子节点上的 align-self 值设置为一个组。align-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nalign-items: normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ];\n```\n","values":"\n### align-items 的属性值\n`center`<br/>元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。<br/><br/><br/>`flex-start`<br/>元素向侧轴起点对齐。<br/><br/><br/>`flex-end`<br/>元素向侧轴终点对齐。<br/><br/><br/>`stretch`<br/>弹性项包含外边距的交叉轴尺寸被拉升至行高<br/><br/><br/>`baseline`<br/>所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。\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- [swiper-item](/component/swiper-item.md)\n- [navigator](/component/navigator.md)","compatibility":"### 兼容性 \n\n#### align-items 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| center | 4.0 | 3.9 | 4.11 |\n| flex-start | 4.0 | 3.9 | 4.11 |\n| flex-end | 4.0 | 3.9 | 4.11 |\n| stretch | 4.0 | 3.9 | 4.11 |\n| baseline | 4.0 | x | x |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| align-items | √（ 29 ） | √（ 12 ） | √（ 20 ） | √（ 16 ） | √（ 9 ） | √（ 11 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/align-items)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.align-items)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view style=\"flex-grow: 1\">\r\n <view>\r\n <text>align-items: center</text>\r\n <view class=\"common\" style=\"align-items: center\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>align-items: flex-start</text>\r\n <view class=\"common\" style=\"align-items: flex-start\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>align-items: flex-end</text>\r\n <view class=\"common\" style=\"align-items: flex-end\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>align-items: stretch</text>\r\n <view class=\"common\" style=\"align-items: stretch\">\r\n <view style=\"width: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n flex-direction: row;\r\n }\r\n</style>\n\n```\n\n:::"},"align-self":{"name":"## align-self\n","description":"\nCSS 属性 align-self 会对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items 的值。In Grid, it aligns the item inside the grid area. 在 Flexbox 中，会按照 cross axis（当前 flex 元素排列方向的垂直方向）进行排列。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nalign-self: auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>;\n```\n","values":"\n### align-self 的属性值\n`auto`<br/>设置为父元素的 align-items 值。<br/><br/><br/>`center`<br/>flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 尺寸大于 flex 容器，将在两个方向均等溢出。<br/><br/><br/>`flex-start`<br/>flex 元素会对齐到 cross-axis 的首端。<br/><br/><br/>`flex-end`<br/>flex 元素会对齐到 cross-axis 的尾端。<br/><br/><br/>`stretch`<br/>如果元素未设置高度或设为auto，将占满整个容器的高度。<br/><br/><br/>`baseline`<br/>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br/> The fallback alignment for first baseline is start, the one for last baseline is end.<br/> flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size 拉伸。If the combined size of the items along the cross axis is less than the size of the alignment container and the item is auto-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size of all auto-sized items exactly fills the alignment container along the cross axis.\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"### 兼容性 \n\n#### align-self 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | 3.9 | 4.11 |\n| center | 4.0 | 3.9 | 4.11 |\n| flex-start | 4.0 | 3.9 | 4.11 |\n| flex-end | 4.0 | 3.9 | 4.11 |\n| stretch | 4.0 | 3.9 | 4.11 |\n| baseline | 4.0 | x | x |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| align-self | √（ 29 ） | √（ 12 ） | √（ 20 ） | √（ 12.1 ） | √（ 9 ） | √（ 10 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/align-self)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.align-self)\n","example":""},"background":{"name":"## background\n","description":"\nbackground 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nbackground: [ <bg-layer> , ]* <final-bg-layer>;\n```\n","values":"\n### background 的属性值\n`fixed`<br/>背景固定于视口。在分页媒体中，如果没有视口，则“fixed”背景将相对于页面框固定，因此在每一页都会复制。<br/><br/><br/>`local`<br/>背景相对于元素内容固定：如果元素具有滚动机制，背景将随元素内容滚动。<br/><br/><br/>`none`<br/>被视为图像层，但不绘制任何内容。<br/><br/><br/>`scroll`<br/>背景固定于元素自身，不随内容滚动（实际上附加在元素的边框上）。\n","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### background 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| fixed | 4.0 | x | x |\n| local | 4.0 | x | x |\n| none | 4.0 | x | x |\n| scroll | 4.0 | x | x |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| background | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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":""},"background-clip":{"name":"## background-clip\n","description":"\nbackground-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | x |\n","syntax":"\n### 语法\n```\nbackground-clip: <box>#;\n```\n","values":"\n### background-clip 的属性值\n`border-box`<br/>背景延伸至边框外沿（但是在边框下层）。<br/><br/><br/>`padding-box`<br/>背景延伸至内边距（padding）外沿。不会绘制到边框处。<br/><br/><br/>`content-box`<br/>背景被裁剪至内容区（content box）外沿。\n","defaultValue":"### 默认值 @default-value \n `border-box`","unixTags":"","compatibility":"### 兼容性 \n\n#### background-clip 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| border-box | 4.0 | 3.9 | x |\n| padding-box | 4.0 | x | x |\n| content-box | 4.0 | x | x |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| background-clip | √（ 1 ） | √（ 12 ） | √（ 4 ） | √（ 10.5 ） | √（ 5 ） | √（ 9 ） |\n","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-clip)\n","example":""},"background-color":{"name":"## background-color\n","description":"\nCSS属性中的 background-color 会设置元素的背景色，属性的值为颜色值或关键字\"transparent\"二者选其一。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nbackground-color: <color>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `transparent`","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| background-color | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-color)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view style=\"flex-grow: 1\">\r\n <view>\r\n <text>background-color: red</text>\r\n <view class=\"common\" style=\"background-color: red\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>background-color: #ff0000</text>\r\n <view class=\"common\" style=\"background-color: #ff0000\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>background-color: #f00</text>\r\n <view class=\"common\" style=\"background-color: #f00\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>background-color: rgb(255, 0, 0)</text>\r\n <view class=\"common\" style=\"background-color: rgb(255, 0, 0)\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>background-color: rgba(255, 0, 0, 0.5)</text>\r\n <view class=\"common\" style=\"background-color: rgba(255, 0, 0, 0.5)\"></view>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n }\r\n</style>\n\n```\n\n:::"},"background-image":{"name":"## background-image\n","description":"\nCSS background-image 属性用于为一个元素设置一个或者多个背景图像。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nbackground-image: <bg-image>#;\n```\n","values":"\n### background-image 的属性值\n`linear-gradient`<br/>使用由两种或多种颜色沿一条直线进行线性过渡的背景图像。<br/><br/><br/>`none`<br/>是一个表示无背景图的关键字。\n","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### background-image 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| linear-gradient | 4.0 | 3.9 | 4.11 |\n| none | 4.0 | 4.27 | 4.27 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| background-image | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-image)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex:1\">\r\n <!-- #endif -->\r\n <view>\r\n <!-- 测试iOS平台宽高为0时，设置渐变色会不会导致闪退 -->\r\n <view style=\"width: 0px; height: 0px; background-image: linear-gradient(to bottom,#f5f5f5,#eff2f5);\"></view>\r\n <text>不支持背景图片，仅支持linear-gradient方法</text>\r\n <view v-for=\"(direction) in directionData\">\r\n <text>background-image: linear-gradient({{direction}}, red, yellow)</text>\r\n <view class=\"common\"\r\n :style=\"{'background-image': backgroundSelect ?'linear-gradient('+direction+', red, yellow)':''}\"></view>\r\n </view>\r\n <view>\r\n <text>style 动态切换 background</text>\r\n <view @click='changeBg' class=\"common\" :style='testStyle'></view>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n backgroundSelect: true,\r\n directionData: ['to right', 'to left', 'to bottom', 'to top', 'to bottom left', 'to bottom right', 'to top left', 'to top right'],\r\n testStyle: \"background:linear-gradient(to right, red, yellow)\"\r\n }\r\n },\r\n methods: {\r\n //供自动化测试使用\r\n updateBackgroundSelect() {\r\n this.backgroundSelect = !this.backgroundSelect\r\n },\r\n changeBg() {\r\n const isColor = this.testStyle == \"background:blue\"\r\n if (isColor) {\r\n this.setBackgroundImage()\r\n } else {\r\n this.setBackgroundColor()\r\n }\r\n },\r\n setBackgroundColor() {\r\n this.testStyle = \"background:blue\"\r\n },\r\n setBackgroundImage() {\r\n this.testStyle = \"background:linear-gradient(to right, red, yellow)\"\r\n }\r\n }\r\n }\r\n\n```\n\n:::"},"border":{"name":"## border\n","description":"\nCSS 的 border 是设置元素边框属性的简写形式，用于设置一个或多个以下属性的值：border-width、border-style、border-color。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder: <line-width> || <line-style> || <color>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | 0 |","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>border: 5px dotted blue</text>\r\n <view class=\"common\" style=\"border: 5px dotted blue;\"></view>\r\n </view>\r\n <view>\r\n <text>border与background-image同时设置</text>\r\n <view class=\"common\"\r\n style=\"border-style: solid;border-color: rgba(0, 0, 255, 0.1);background-image: linear-gradient(to right, #00ff00, #00bc79)\">\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\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 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-bottom: <line-width> || <line-style> || <color>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-bottom | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-bottom)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>border-bottom: 5px dashed blue</text>\r\n <view class=\"common\" style=\"border-bottom: 5px dashed blue;\"></view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"border-bottom-color":{"name":"## border-bottom-color\n","description":"\nborder-bottom-color 属性设置一个元素底部边框的颜色。应当指出，在多数情况下，CSS 简写属性 border-color 或 border-bottom 更方便实用。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-bottom-color: <'border-top-color'>;\n```\n","values":"\n### border-bottom-color 的属性值\n`inherit`<br/>一个代表父元素底边颜色的关键字（可能和 border-bottom-color 默认值不同）\n","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### border-bottom-color 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| inherit | 4.0 | - | - |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-bottom-color | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-bottom-color)\n","example":""},"border-bottom-left-radius":{"name":"## border-bottom-left-radius\n","description":"\nborder-bottom-left-radius 这个 css 属性设置元素左下角的圆角。圆角可以是圆或椭圆（注：应为圆或椭圆的一部分），或者当其中一个值为 0 时，圆角将不被设置，这时这个角将展示为直角。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-bottom-left-radius: <length-percentage>{1,2};\n```\n","values":"","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-bottom-left-radius | √（ 4 ） | √（ 12 ） | √（ 4 ） | √（ 10.5 ） | √（ 5 ） | √（ 9 ） |\n","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-bottom-left-radius)\n","example":""},"border-bottom-right-radius":{"name":"## border-bottom-right-radius\n","description":"\n设置元素边框右下角的圆角半径。允许指定一个或两个半径值来定义椭圆形的角。如果只指定一个值将创建一个均匀的圆角。如果指定两个不同的值，第一个值将用于半长轴，第二个值将用于半短轴，从而可以创建椭圆形的圆角，使其在水平和垂直方向上具有不同的曲率。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-bottom-right-radius: <length-percentage>{1,2};\n```\n","values":"","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-bottom-right-radius | √（ 4 ） | √（ 12 ） | √（ 4 ） | √（ 10.5 ） | √（ 5 ） | √（ 9 ） |\n","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-bottom-right-radius)\n","example":""},"border-bottom-style":{"name":"## border-bottom-style\n","description":"\n设置元素底部边框的样式。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-bottom-style: <line-style>;\n```\n","values":"\n### border-bottom-style 的属性值\n`none`<br/>和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。<br/><br/><br/>`solid`<br/>显示为一条实线。<br/><br/><br/>`dashed`<br/>显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。<br/><br/><br/>`dotted`<br/>显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。\n","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### border-bottom-style 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| none | 4.0 | 3.9 | 4.11 |\n| solid | 4.0 | 3.9 | 4.11 |\n| dashed | 4.0 | 3.9 | 4.11 |\n| dotted | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-bottom-style | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 9.2 ） | √（ 1 ） | √（ 5.5 ） |\n","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-bottom-style)\n","example":""},"border-bottom-width":{"name":"## border-bottom-width\n","description":"\nCSS 属性 border-bottom-width 设置一个元素的底部边框宽度。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-bottom-width: <line-width>;\n```\n","values":"\n### border-bottom-width 的属性值\n`thin`<br/>细边线<br/><br/><br/>`medium`<br/>中等边线<br/><br/><br/>`thick`<br/>宽边线\n","defaultValue":"### 默认值 @default-value \n `medium`","unixTags":"","compatibility":"### 兼容性 \n\n#### border-bottom-width 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| thin | 4.0 | 3.93 | 4.11 |\n| medium | 4.0 | 3.93 | 4.11 |\n| thick | 4.0 | 3.93 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-bottom-width | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-bottom-width)\n","example":""},"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 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-color: <color>{1,4};\n```\n","values":"\n### border-color 的属性值\n`color`<br/>使用 \\<color> 来表示四个边框的颜色，仅用于单值语法。<br/><br/><br/>`horizontal`<br/>使用 \\<color> 来表示水平（左边框和右边框）边框的颜色，仅用于双值语法。<br/><br/><br/>`vertical`<br/>使用 \\<color> 来表示垂直（上边框和下边框）边框的颜色，仅用于双值或三值语法。<br/><br/><br/>`top`<br/>使用 \\<color> 来表示上边框的颜色，仅用于三值或四值语法。<br/><br/><br/>`bottom`<br/>使用 \\<color> 来表示下边框的颜色，仅用于三值或四值语法。<br/><br/><br/>`right`<br/>使用 \\<color> 来表示右边框的颜色，仅用于四值语法。<br/><br/><br/>`left`<br/>使用 \\<color> 来表示左边框的颜色，仅用于四值语法。<br/><br/><br/>`inherit`<br/>这是一个关键词，用于指示四边的颜色值均继承自父元素的计算值。\n","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### border-color 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| color | 4.0 | - | - |\n| horizontal | 4.0 | - | - |\n| vertical | 4.0 | - | - |\n| top | 4.0 | - | - |\n| bottom | 4.0 | - | - |\n| right | 4.0 | - | - |\n| left | 4.0 | - | - |\n| inherit | 4.0 | - | - |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-color | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-color)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view style=\"flex-grow: 1\">\r\n <view>\r\n <text>border-color: red</text>\r\n <view class=\"common\" style=\"border-width: 5px; border-color: red; border-style: solid;\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-left-color: red</text>\r\n <view class=\"common\" style=\"border-left-width: 5px; border-left-color: red; border-left-style:solid;\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-top-color: green</text>\r\n <view class=\"common\" style=\"border-top-width: 5px; border-top-color: green; border-top-style: solid;\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-right-color: yellow</text>\r\n <view class=\"common\" style=\"border-right-width: 5px; border-right-color: yellow; border-right-style: solid;\">\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>border-bottom-color: blue</text>\r\n <view class=\"common\" style=\"border-bottom-width: 5px; border-bottom-color: blue; border-bottom-style: solid; \">\r\n </view>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\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 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-left: <line-width> || <line-style> || <color>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-left | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-left)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>border-left: 5px solid blue</text>\r\n <view class=\"common\" style=\"border-left: 5px solid blue;\"></view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"border-left-color":{"name":"## border-left-color\n","description":"\nborder-left-color 属性设置元素的左边框颜色。值得注意的是，在大数情况下使用 border-color 或 border-left 更加方便和普遍。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-left-color: <color>;\n```\n","values":"","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-left-color | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-left-color)\n","example":""},"border-left-style":{"name":"## border-left-style\n","description":"\n设置元素左边框的样式。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-left-style: <line-style>;\n```\n","values":"\n### border-left-style 的属性值\n`none`<br/>和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。<br/><br/><br/>`solid`<br/>显示为一条实线。<br/><br/><br/>`dashed`<br/>显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。<br/><br/><br/>`dotted`<br/>显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。\n","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### border-left-style 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| none | 4.0 | 3.9 | 4.11 |\n| solid | 4.0 | 3.9 | 4.11 |\n| dashed | 4.0 | 3.9 | 4.11 |\n| dotted | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-left-style | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 9.2 ） | √（ 1 ） | √（ 5.5 ） |\n","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-left-style)\n","example":""},"border-left-width":{"name":"## border-left-width\n","description":"\nCSS 的 border-left-width 属性用来设置盒子的左边框的宽度。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-left-width: <line-width>;\n```\n","values":"\n### border-left-width 的属性值\n`thin`<br/>细边线<br/><br/><br/>`medium`<br/>中等边线<br/><br/><br/>`thick`<br/>宽边线\n","defaultValue":"### 默认值 @default-value \n `medium`","unixTags":"","compatibility":"### 兼容性 \n\n#### border-left-width 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| thin | 4.0 | 3.93 | 4.11 |\n| medium | 4.0 | 3.93 | 4.11 |\n| thick | 4.0 | 3.93 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-left-width | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-left-width)\n","example":""},"border-radius":{"name":"## border-radius\n","description":"\nCSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?;\n```\n","values":"","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-radius | √（ 4 ） | √（ 12 ） | √（ 4 ） | √（ 10.5 ） | √（ 5 ） | √（ 9 ） |\n","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-radius)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view style=\"flex-grow: 1\">\r\n <view>\r\n <text>border-radius: 10px</text>\r\n <view class=\"common\" style=\"border-radius: 10px\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-top-left-radius: 10px</text>\r\n <view class=\"common\" style=\"border-top-left-radius: 10px\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-top-right-radius: 10px</text>\r\n <view class=\"common\" style=\"border-top-right-radius: 10px\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-bottom-left-radius: 10px</text>\r\n <view class=\"common\" style=\"border-bottom-left-radius: 10px\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-bottom-right-radius: 10px</text>\r\n <view class=\"common\" style=\"border-bottom-right-radius: 10px\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-radius: 250px（与长宽相同形成正圆）</text>\r\n <view class=\"common\" style=\"border-radius: 250px\"></view>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\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 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-right: <line-width> || <line-style> || <color>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-right | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 9.2 ） | √（ 1 ） | √（ 5.5 ） |\n","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-right)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>border-right: 5px solid blue</text>\r\n <view class=\"common\" style=\"border-right: 5px solid blue;\"></view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\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 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-right-color: <color>;\n```\n","values":"","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-right-color | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-right-color)\n","example":""},"border-right-style":{"name":"## border-right-style\n","description":"\nborder-right-style 是 border 中的一个 CSS 子属性，描述的是右边框的样式 border.\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-right-style: <line-style>;\n```\n","values":"\n### border-right-style 的属性值\n`none`<br/>和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。<br/><br/><br/>`solid`<br/>显示为一条实线。<br/><br/><br/>`dashed`<br/>显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。<br/><br/><br/>`dotted`<br/>显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。\n","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### border-right-style 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| none | 4.0 | 3.9 | 4.11 |\n| solid | 4.0 | 3.9 | 4.11 |\n| dashed | 4.0 | 3.9 | 4.11 |\n| dotted | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-right-style | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 9.2 ） | √（ 1 ） | √（ 5.5 ） |\n","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-right-style)\n","example":""},"border-right-width":{"name":"## border-right-width\n","description":"\nCSS 的**border-right-width** 用来设置盒子右边框的宽度。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-right-width: <line-width>;\n```\n","values":"\n### border-right-width 的属性值\n`thin`<br/>细边线<br/><br/><br/>`medium`<br/>中等边线<br/><br/><br/>`thick`<br/>宽边线\n","defaultValue":"### 默认值 @default-value \n `medium`","unixTags":"","compatibility":"### 兼容性 \n\n#### border-right-width 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| thin | 4.0 | 3.93 | 4.11 |\n| medium | 4.0 | 3.93 | 4.11 |\n| thick | 4.0 | 3.93 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-right-width | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-right-width)\n","example":""},"border-style":{"name":"## border-style\n","description":"\nborder-style 是一个 CSS 简写属性，用来设定元素所有边框的样式。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-style: <line-style>{1,4};\n```\n","values":"\n### border-style 的属性值\n`none`<br/>和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。<br/><br/><br/>`solid`<br/>显示为一条实线。<br/><br/><br/>`dashed`<br/>显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。<br/><br/><br/>`dotted`<br/>显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。\n","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### border-style 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| none | 4.0 | 3.9 | 4.11 |\n| solid | 4.0 | 3.9 | 4.11 |\n| dashed | 4.0 | 3.9 | 4.11 |\n| dotted | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-style | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-style)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view style=\"flex-grow: 1\">\r\n <view>\r\n <text>border-style: dashed</text>\r\n <view class=\"common\" style=\"border-width: 5px; border-style: dashed\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-left-style: dashed</text>\r\n <view class=\"common\" style=\"border-left-width: 5px; border-left-style: dashed\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-top-style: dashed</text>\r\n <view class=\"common\" style=\"border-top-width: 5px; border-top-style: dashed\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-right-style: dotted</text>\r\n <view class=\"common\" style=\"border-right-width: 5px; border-right-style: dotted\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-bottom-style: dotted</text>\r\n <view class=\"common\" style=\"border-bottom-width: 5px; border-bottom-style: dotted\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-style: solid (缺省 border-width)</text>\r\n <view class=\"common\" style=\"border-style: solid;\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-style: none</text>\r\n <view class=\"common\" style=\"border-style: none; border-width: 5px;\"></view>\r\n </view>\r\n\r\n <view @click=\"changeBorderStyle\">\r\n <text>border-style: 点击切换</text>\r\n <view class=\"common\" :style=\"borderStyle\"></view>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n isSolid: false,\r\n borderStyle: \"border-style: none; border-width: 5px;\",\r\n }\r\n },\r\n methods: {\r\n changeBorderStyle() {\r\n this.isSolid = !this.isSolid;\r\n const solid = \"border-style: solid; border-width: 5px;\";\r\n const none = \"\";\r\n this.borderStyle = this.isSolid ? solid : none;\r\n }\r\n }\r\n }\r\n\n```\n\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 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-top: <line-width> || <line-style> || <color>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-top | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-top)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>border-top: 5px dashed blue</text>\r\n <view class=\"common\" style=\"border-top: 5px dashed blue;\"></view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"border-top-color":{"name":"## border-top-color\n","description":"\nborder-top-color 属性用以设置某元素顶部 border的颜色。通常，用border-color 或 border-top 设置该颜色更为便捷可取。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-top-color: <color>;\n```\n","values":"","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-top-color | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-top-color)\n","example":""},"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 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-top-left-radius: <length-percentage>{1,2};\n```\n","values":"","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-top-left-radius | √（ 4 ） | √（ 12 ） | √（ 4 ） | √（ 10.5 ） | √（ 5 ） | √（ 9 ） |\n","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-top-left-radius)\n","example":""},"border-top-right-radius":{"name":"## border-top-right-radius\n","description":"\nborder-top-right-radius 属性设置元素的右上角弧形，这个圆弧可能是一个椭圆，或者其中一个值是 0 的话，就是没有圆弧，换句话就是说拐角是方形的。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-top-right-radius: <length-percentage>{1,2};\n```\n","values":"","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-top-right-radius | √（ 4 ） | √（ 12 ） | √（ 4 ） | √（ 10.5 ） | √（ 5 ） | √（ 9 ） |\n","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-top-right-radius)\n","example":""},"border-top-style":{"name":"## border-top-style\n","description":"\nborder-top-style CSS 设置元素上边框的 border.\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-top-style: <line-style>;\n```\n","values":"\n### border-top-style 的属性值\n`none`<br/>和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。<br/><br/><br/>`solid`<br/>显示为一条实线。<br/><br/><br/>`dashed`<br/>显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。<br/><br/><br/>`dotted`<br/>显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。\n","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### border-top-style 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| none | 4.0 | 3.9 | 4.11 |\n| solid | 4.0 | 3.9 | 4.11 |\n| dashed | 4.0 | 3.9 | 4.11 |\n| dotted | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-top-style | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 9.2 ） | √（ 1 ） | √（ 5.5 ） |\n","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-top-style)\n","example":""},"border-top-width":{"name":"## border-top-width\n","description":"\ncss 属性 border-top-width 是用于设置盒模型的上边框的宽度\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-top-width: <line-width>;\n```\n","values":"\n### border-top-width 的属性值\n`thin`<br/>细边线<br/><br/><br/>`medium`<br/>中等边线<br/><br/><br/>`thick`<br/>宽边线\n","defaultValue":"### 默认值 @default-value \n `medium`","unixTags":"","compatibility":"### 兼容性 \n\n#### border-top-width 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| thin | 4.0 | 3.93 | 4.11 |\n| medium | 4.0 | 3.93 | 4.11 |\n| thick | 4.0 | 3.93 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-top-width | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-top-width)\n","example":""},"border-width":{"name":"## border-width\n","description":"\nborder-width 属性可以设置盒子模型的边框宽度。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nborder-width: <line-width>{1,4};\n```\n","values":"\n### border-width 的属性值\n`thin`<br/>细边线<br/><br/><br/>`medium`<br/>中等边线<br/><br/><br/>`thick`<br/>宽边线\n","defaultValue":"### 默认值 @default-value \n `medium`","unixTags":"","compatibility":"### 兼容性 \n\n#### border-width 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| thin | 4.0 | 3.93 | 4.11 |\n| medium | 4.0 | 3.93 | 4.11 |\n| thick | 4.0 | 3.93 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| border-width | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-width)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view style=\"flex-grow: 1\">\r\n <view>\r\n <text>border-width: 5px (without border-style)</text>\r\n <view class=\"common\" style=\"border-width: 5px;\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-width: 5px</text>\r\n <view class=\"common\" style=\"border-width: 5px; border-style: solid;\"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-left-width: 5px</text>\r\n <view class=\"common\" style=\"border-left-width: 5px; border-left-style: solid; \"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-top-width: 10px</text>\r\n <view class=\"common\" style=\"border-top-width: 10px; border-top-style: solid; \"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-right-width: 15px</text>\r\n <view class=\"common\" style=\"border-right-width: 15px; border-right-style: solid; \"></view>\r\n </view>\r\n\r\n <view>\r\n <text>border-bottom-width: 20px</text>\r\n <view class=\"common\" style=\"border-bottom-width: 20px; border-bottom-style: solid; \"></view>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\n:::"},"bottom":{"name":"## bottom\n","description":"\nbottom样式属性定义了定位元素下外边距边界与其包含块下边界之间的偏移，非定位元素设置此属性无效。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nbottom: <length> | <percentage> | auto;\n```\n","values":"\n### bottom 的属性值\n`auto`<br/>对于绝对定位元素，元素将忽略此属性而以top属性为准，如果此时设置height: auto，将基于内容需要的高度设置宽度；如果top也为auto的话，元素的垂直位置就是它假如作为静态 (即 static) 元素时该在的位置。<br/>对于相对定位元素，元素相对正常位置的偏移量将基于top属性；如果top也为auto的话，元素将不会有偏移。\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"### 兼容性 \n\n#### bottom 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| bottom | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 6 ） | √（ 1 ） | √（ 5 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/bottom)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.bottom)\n","example":""},"box-shadow":{"name":"## box-shadow\n","description":"\nCSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nbox-shadow: none | <shadow>#;\n```\n","values":"\n### box-shadow 的属性值\n`inset`<br/>如果没有指定inset，默认阴影在边框外，即阴影向外扩散。<br/> 使用 inset 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。<br/><br/><br/>`none`<br/>No shadow.\n","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### box-shadow 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| inset | 4.0 | 3.9 | 4.11 |\n| none | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| box-shadow | √（ 10 ） | √（ 12 ） | √（ 4 ） | √（ 10.5 ） | √（ 5.1 ） | √（ 9 ） |\n","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](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view style=\"flex-grow: 1\">\r\n <view>\r\n <text>box-shadow: 5px 5px black</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"box-shadow: 5px 5px black\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>box-shadow: 5px 5px 5px black</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"box-shadow: 5px 5px 5px black\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>box-shadow: 5px 10px 5px black</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"box-shadow: 5px 10px 5px black\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>box-shadow: 5px 5px 5px 5px black</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"box-shadow: 5px 5px 5px 5px black\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>box-shadow: -5px -5px 5px black</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"box-shadow: -5px -5px 5px black\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>box-shadow: inset 5px 5px black</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"box-shadow: inset 5px 5px black\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>box-shadow: inset 5px 5px 5px black</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"box-shadow: inset 5px 5px 5px black\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>box-shadow: inset 5px 10px 5px black</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"box-shadow: inset 5px 10px 5px black\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>box-shadow: inset 5px 5px 5px 5px black</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"box-shadow: inset 5px 5px 5px 5px black\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>box-shadow: inset -5px -5px 5px black</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"box-shadow: inset -5px -5px 5px black\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>circle: box-shadow: 5px 5px black</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"border-radius: 62px; box-shadow: 5px 5px black\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>circle: box-shadow: 5px 5px 5px black</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"border-radius: 62px; box-shadow: 5px 5px 5px black\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>circle: box-shadow: 5px 10px 5px black</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"border-radius: 62px; box-shadow: 5px 10px 5px black\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>circle: box-shadow: 5px 5px 5px 5px black</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"border-radius: 62px; box-shadow: 5px 5px 5px 5px black\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>circle: box-shadow: -5px -5px 5px black</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"border-radius: 62px; box-shadow: -5px -5px 5px black\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>\r\n <view class=\"backgroundview\">\r\n <view class=\"common\" style=\"\r\n border-radius: 62px;\r\n box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);\r\n \"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>点击动态切换 box-shadow: none</text>\r\n <view class=\"backgroundview\" @click=\"changed\">\r\n <view :class=\"['common', disabled ? 'disabledShadow' : 'shadow']\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>点击动态切换 box-shadow: 非法值</text>\r\n <view class=\"backgroundview\" @click=\"changed\">\r\n <view :class=\"['common', disabled ? 'invalidShadow' : 'shadow']\"></view>\r\n </view>\r\n </view>\r\n\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 125px;\r\n height: 125px;\r\n background-color: brown;\r\n }\r\n\r\n .backgroundview {\r\n width: 250px;\r\n height: 250px;\r\n background-color: white;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .shadow {\r\n box-shadow: 5px 5px black;\r\n }\r\n\r\n .disabledShadow {\r\n box-shadow: none;\r\n }\r\n\r\n .invalidShadow {\r\n box-shadow: abcd;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n disabled: false\r\n }\r\n },\r\n methods: {\r\n changed() {\r\n this.disabled = !this.disabled\r\n }\r\n },\r\n }\r\n\n```\n\n:::"},"box-sizing":{"name":"## box-sizing\n","description":"\nCSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nbox-sizing: content-box | border-box;\n```\n","values":"\n### box-sizing 的属性值\n`content-box`<br/>默认值，标准盒子模型。width 与 height 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。注意：内边距、边框和外边距都在这个盒子的外部。比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。<br/> 尺寸计算公式：<br/> <br/> width = 内容的宽度<br/> height = 内容的高度<br/> <br/> 宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。<br/><br/><br/>`border-box`<br/>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":"### 兼容性 \n\n#### box-sizing 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| content-box | 4.0 | 3.9 | 4.11 |\n| border-box | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| box-sizing | √（ 10 ） | √（ 12 ） | √（ 29 ） | √（ 7 ） | √（ 5.1 ） | √（ 8 ） |\n","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":""},"color":{"name":"## color\n","description":"\ncolor CSS 属性设置文本及文本装饰（text-decoration）的前景色颜色值。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\ncolor: <color>;\n```\n","values":"\n### color 的属性值\n`currentcolor`<br/>将颜色设置为元素的 color 属性值。但是，如果设置为 color 的值，currentcolor 将被视为 inherit。\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | #000000 |\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":"### 兼容性 \n\n#### color 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| currentcolor | 4.0 | - | - |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| color | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 3 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/color)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.color)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view style=\"height: 250px;background-color: gray;justify-content: center;align-items: center;\">\r\n <text class=\"common\" style=\"color: rgb(255, 0, 0);\">color: rgb(255, 0, 0)</text>\r\n <text class=\"common\" style=\"color: rgba(255, 0, 0, 0.5);\">color: rgba(255, 0, 0, 0.5)</text>\r\n <text class=\"common\" style=\"color: #ff0000;\">color: #ff0000</text>\r\n <text class=\"common\" style=\"color: #f00;\">color: #f00</text>\r\n <text class=\"common\" style=\"color: red;\">color: red</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n font-size: 20px;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"display":{"name":"## display\n","description":"\nCSS display 属性设置元素的布局方式，默认值为flex（弹性布局）。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\ndisplay: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>;\n```\n","values":"\n### display 的属性值\n`flex`<br/>该元素的行为类似块级元素并且根据弹性盒模型布局它的内容。<br/><br/><br/>`none`<br/>使元素不再显示，其对布局不会有影响（文档渲染得好像这个元素并不存在）。所有的后代元素也不会再显示。为了使元素占据一个它通常占据的空间，但实际上没有渲染任何东西，应该使用 visibility 属性。\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | flex |\n\n **注意**：W3C 默认值为：inline","unixTags":"","compatibility":"### 兼容性 \n\n#### display 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| flex | 4.0 | 3.9 | 4.11 |\n| none | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| display | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 7 ） | √（ 1 ） | √（ 4 ） |\n| flex | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 7 ） | √（ 1 ） | √（ 4 ） |\n","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":""},"flex":{"name":"## flex\n","description":"\nflex CSS 简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nflex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];\n```\n","values":"\n### flex 的属性值\n`initial`<br/>元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为\"flex: 0 1 auto\"。<br/><br/><br/>`auto`<br/>元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 \"flex: 1 1 auto\".<br/><br/><br/>`none`<br/>元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为\"flex: 0 0 auto\"。\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | none |\n\n **注意**：W3C 默认值为：initial","unixTags":"","compatibility":"### 兼容性 \n\n#### flex 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| initial | 4.0 | 3.9 | 4.11 |\n| auto | 4.0 | 3.9 | 4.11 |\n| none | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| flex | √（ 29 ） | √（ 12 ） | √（ 20 ） | √（ 12.1 ） | √（ 9 ） | √（ 11 ） |\n","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](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view class=\"page\" style=\"flex:1\">\r\n <view class=\"head\">\r\n <text class=\"tip\">下面有一个灰色区域，display默认值为flex</text>\r\n <text class=\"tip\">当前display值：{{display}}</text>\r\n </view>\r\n <view class=\"content\" :style=\"{display:display}\">\r\n <text style=\"background-color: aquamarine;\">展示display区域</text>\r\n </view>\r\n <button @tap=\"switchDisplay\">切换display属性</button>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .page {\r\n align-items: center;\r\n height: 100%;\r\n }\r\n\r\n .head {\r\n margin-top: 10px;\r\n margin-bottom: 10px;\r\n align-items: center;\r\n }\r\n\r\n .tip {\r\n color: red;\r\n }\r\n\r\n .content {\r\n border: 5px dotted blue;\r\n margin: 50px 0px;\r\n padding: 50px;\r\n width: 200px;\r\n height: 200px;\r\n background-color: gray;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n display: 'flex'\r\n }\r\n },\r\n methods: {\r\n switchDisplay() {\r\n this.display = ('flex' == this.display) ? 'none' : 'flex';\r\n }\r\n }\r\n }\r\n\n```\n\n:::"},"flex-basis":{"name":"## flex-basis\n","description":"\nCSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nflex-basis: content | <'width'>;\n```\n","values":"\n### flex-basis 的属性值\n`auto`<br/>参照元素的 `width` 和 `height` 属性计算初始大小。<br/><br/><br/>`content`<br/>基于 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":"### 兼容性 \n\n#### flex-basis 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | 3.9 | 4.11 |\n| content | 4.0 | x | x |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| flex-basis | √（ 29 ） | √（ 12 ） | √（ 22 ） | √（ 12.1 ） | √（ 9 ） | √（ 11 ） |\n| content | √（ 29 ） | √（ 12 ） | √（ 22 ） | √（ 12.1 ） | √（ 9 ） | √（ 11 ） |\n","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-basis)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1\">\r\n <view>\r\n <text>flex-basis</text>\r\n <view style=\"\r\n width: 250px;\r\n height: 150px;\r\n background-color: gray;\r\n flex-direction: row;\r\n \">\r\n <view class=\"common\" style=\"flex-basis: 150px\">\r\n <text>150px</text>\r\n </view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<style>\r\n .common {\r\n width: 50px;\r\n height: 50px;\r\n background-color: red;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n</style>\n\n```\n\n:::"},"flex-direction":{"name":"## flex-direction\n","description":"\nCSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nflex-direction: row | row-reverse | column | column-reverse;\n```\n","values":"\n### flex-direction 的属性值\n`row`<br/>flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。<br/><br/><br/>`row-reverse`<br/>表现和 row 相同，但是置换了主轴起点和主轴终点<br/><br/><br/>`column`<br/>flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同<br/><br/><br/>`column-reverse`<br/>表现和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- [navigator](/component/navigator.md)","compatibility":"### 兼容性 \n\n#### flex-direction 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| row | 4.0 | 3.9 | 4.11 |\n| row-reverse | 4.0 | 3.9 | 4.11 |\n| column | 4.0 | 3.9 | 4.11 |\n| column-reverse | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| flex-direction | √（ 29 ） | √（ 12 ） | √（ 81 ） | √（ 12.1 ） | √（ 9 ） | √（ 11 ） |\n","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-direction)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view style=\"flex-grow: 1\">\r\n <view>\r\n <text>flex-direction: row</text>\r\n <view class=\"common\" style=\"flex-direction: row\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>flex-direction: row-reverse</text>\r\n <view class=\"common\" style=\"flex-direction: row-reverse\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>flex-direction: column</text>\r\n <view class=\"common\" style=\"flex-direction: column\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>flex-direction: column-reverse</text>\r\n <view class=\"common\" style=\"flex-direction: column-reverse\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\n:::"},"flex-flow":{"name":"## flex-flow\n","description":"\nCSS flex-flow 属性是 flex-direction 和 flex-wrap 的简写。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nflex-flow: <'flex-direction'> || <'flex-wrap'>;\n```\n","values":"\n### flex-flow 的属性值\n`column`<br/>主轴为垂直方向，起点在上沿。<br/><br/><br/>`column-reverse`<br/>主轴为垂直方向（与column相同），起点在下沿（与column相反）。<br/><br/><br/>`row`<br/>主轴为水平方向，起点在左端。<br/><br/><br/>`row-reverse`<br/>主轴为水平方向（与row相同），起点在右端（与row相反）。<br/><br/><br/>`nowrap`<br/>不换行。<br/><br/><br/>`wrap`<br/>换行，第一行在上方。<br/><br/><br/>`wrap-reverse`<br/>换行（与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- [swiper-item](/component/swiper-item.md)\n- [navigator](/component/navigator.md)","compatibility":"### 兼容性 \n\n#### flex-flow 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| column | 4.0 | 3.9 | 4.11 |\n| column-reverse | 4.0 | 3.9 | 4.11 |\n| row | 4.0 | 3.9 | 4.11 |\n| row-reverse | 4.0 | 3.9 | 4.11 |\n| nowrap | 4.0 | 3.9 | 4.11 |\n| wrap | 4.0 | 3.9 | 4.11 |\n| wrap-reverse | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| flex-flow | √（ 29 ） | √（ 12 ） | √（ 28 ） | √（ 12.1 ） | √（ 9 ） | √（ 11 ） |\n","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-flow)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view style=\"flex-grow: 1\">\r\n <view>\r\n <text>flex-flow: row nowrap</text>\r\n <view class=\"common\" style=\"flex-flow: row nowrap\">\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: red;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: green;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: blue;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: red;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: green;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: blue;\r\n flex-shrink: 0;\r\n \"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>flex-flow: row wrap</text>\r\n <view class=\"common\" style=\"flex-flow: row wrap\">\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: red;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: green;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: blue;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: red;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: green;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: blue;\r\n flex-shrink: 0;\r\n \"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>flex-flow: column nowrap</text>\r\n <view class=\"common\" style=\"flex-flow: column nowrap\">\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: red;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: green;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: blue;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: red;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: green;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: blue;\r\n flex-shrink: 0;\r\n \"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>flex-flow: column wrap</text>\r\n <view class=\"common\" style=\"flex-flow: column wrap\">\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: red;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: green;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: blue;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: red;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: green;\r\n flex-shrink: 0;\r\n \"></view>\r\n <view style=\"\r\n width: 50px;\r\n height: 50px;\r\n background-color: blue;\r\n flex-shrink: 0;\r\n \"></view>\r\n </view>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\n:::"},"flex-grow":{"name":"## flex-grow\n","description":"\nCSS 属性 flex-grow CSS 设置 flex 项 主尺寸 的 flex 增长系数。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nflex-grow: <number>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| flex-grow | √（ 29 ） | √（ 12 ） | √（ 20 ） | √（ 12.1 ） | √（ 9 ） | √（ 11 ） |\n","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-grow)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1\">\r\n <view>\r\n <text>flex-grow</text>\r\n <view style=\"\r\n width: 250px;\r\n height: 150px;\r\n background-color: gray;\r\n flex-direction: row;\r\n \">\r\n <view class=\"common\" style=\"background-color: red; flex-grow: 0.5\">\r\n <text>0.5</text>\r\n </view>\r\n <view class=\"common\" style=\"background-color: green; flex-grow: 1\">\r\n <text>1</text>\r\n </view>\r\n <view class=\"common\" style=\"background-color: blue; flex-grow: 2\">\r\n <text>2</text>\r\n </view>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<style>\r\n .common {\r\n width: 50px;\r\n height: 50px;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n</style>\n\n```\n\n:::"},"flex-shrink":{"name":"## flex-shrink\n","description":"\nCSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nflex-shrink: <number>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | 0 |\n\n **注意**：W3C 默认值为：1","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| flex-shrink | √（ 29 ） | √（ 12 ） | √（ 20 ） | √（ 12.1 ） | √（ 9 ） | √（ 10 ） |\n","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-shrink)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1\">\r\n <view>\r\n <text>flex-shrink</text>\r\n <view style=\"\r\n width: 250px;\r\n height: 150px;\r\n background-color: gray;\r\n flex-direction: row;\r\n \">\r\n <view class=\"common\" style=\"background-color: red; flex-shrink: 1\">\r\n <text>1</text>\r\n </view>\r\n <view class=\"common\" style=\"background-color: green; flex-shrink: 2\">\r\n <text>2</text>\r\n </view>\r\n <view class=\"common\" style=\"background-color: blue; flex-shrink: 3\">\r\n <text>3</text>\r\n </view>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<style>\r\n .common {\r\n width: 125px;\r\n height: 50px;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n</style>\n\n```\n\n:::"},"flex-wrap":{"name":"## flex-wrap\n","description":"\nCSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nflex-wrap: nowrap | wrap | wrap-reverse;\n```\n","values":"\n### flex-wrap 的属性值\n`nowrap`<br/>flex 的元素被摆放到到一行，这可能导致 flex 容器溢出。cross-start 会根据 flex-direction 的值等价于 start 或 before。为该属性的默认值。<br/><br/><br/>`wrap`<br/>换行，第一行在上方。<br/><br/><br/>`wrap-reverse`<br/>和 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- [swiper-item](/component/swiper-item.md)\n- [navigator](/component/navigator.md)","compatibility":"### 兼容性 \n\n#### flex-wrap 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| nowrap | 4.0 | 3.9 | 4.11 |\n| wrap | 4.0 | 3.9 | 4.11 |\n| wrap-reverse | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| flex-wrap | √（ 29 ） | √（ 12 ） | √（ 28 ） | √（ 17 ） | √（ 9 ） | √（ 11 ） |\n","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-wrap)\n","example":""},"font-family":{"name":"## font-family\n","description":"\nCSS 属性 font-family 允许你通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nfont-family: <family-name>;\n```\n","values":"\n### font-family 的属性值\n`cursive`<br/>草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。<br/> 例如：Brush Script MT、Brush Script Std、Lucida Calligraphy、Lucida Handwriting、Apple Chancery、cursive。<br/><br/><br/>`fantasy`<br/>Fantasy 字体主要是那些具有特殊艺术效果的字体。<br/> 例如：Papyrus、Herculanum、Party LET、Curlz MT、Harrington、fantasy。<br/><br/><br/>`monospace`<br/>等宽字体，即字体中每个字宽度相同。<br/> 例如：Fira Mono、DejaVu Sans Mono、Menlo、Consolas、Liberation Mono、Monaco、Lucida Console、monospace。<br/><br/><br/>`sans-serif`<br/>无衬线字体，即笔画结尾是平滑的字体。<br/> 例如：Open Sans、Fira Sans、Lucida Sans、Lucida Sans Unicode、Trebuchet MS、Liberation Sans、Nimbus Sans L、sans-serif。<br/><br/><br/>`serif`<br/>带衬线字体，笔画结尾有特殊的装饰线或衬线。<br/> 例如：Lucida Bright、Lucida Fax、Palatino、Palatino Linotype、Palladio、URW Palladio、serif。\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":"### 兼容性 \n\n#### font-family 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| cursive | 4.0 | 3.9 | 4.11 |\n| fantasy | 4.0 | 3.9 | 4.11 |\n| monospace | 4.0 | 3.9 | 4.11 |\n| sans-serif | 4.0 | 3.9 | 4.11 |\n| serif | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| font-family | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 3 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-family)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.font-family)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view class=\"uni-padding-wrap\">\r\n <text class=\"common\" style=\"font-family: monospace\">font-family: monospace</text>\r\n <text class=\"common\" style=\"font-family: cursive\">font-family: cursive</text>\r\n <text class=\"common\" style=\"font-family: AlimamaDaoLiTiTTF\">font-family: 阿里妈妈刀隶体-ttf（网络字体下载后生效）</text>\r\n <text class=\"common\" style=\"font-family: AlimamaDaoLiTiOTF\">font-family: 阿里妈妈刀隶体-otf</text>\r\n <text style=\"font-family: UniFontFamily;\">style 加载非 static 目录字体文件：{{uniIcon}}</text>\r\n <!-- <text class=\"common\" style=\"font-family: AlimamaDaoLiTiWOFF\">font-family: 阿里妈妈刀隶体-woff</text>\r\n <text class=\"common\" style=\"font-family: AlimamaDaoLiTiWOFF2\">font-family: 阿里妈妈刀隶体-woff2</text> -->\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n font-size: 20px;\r\n line-height: 40px;\r\n }\r\n\r\n @font-face {\r\n font-family: AlimamaDaoLiTiTTF;\r\n src: url('https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/font/AlimamaDaoLiTi.ttf');\r\n }\r\n\r\n @font-face {\r\n font-family: AlimamaDaoLiTiOTF;\r\n src: url('/static/font/AlimamaDaoLiTi.otf');\r\n }\r\n\r\n @font-face {\r\n font-family: UniFontFamily;\r\n src: url('./uni.ttf');\r\n }\r\n\r\n /* @font-face {\r\n font-family: AlimamaDaoLiTiWOFF;\r\n src: url('/static/font/AlimamaDaoLiTi.woff');\r\n }\r\n @font-face {\r\n font-family: AlimamaDaoLiTiWOFF2;\r\n src: url('/static/font/AlimamaDaoLiTi.woff2');\r\n } */\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n uniIcon: '\\ue100',\r\n }\r\n }\r\n }\r\n\n```\n\n:::"},"font-size":{"name":"## font-size\n","description":"\nfont-size CSS 属性设置字体大小。更改字体大小还会更新字体大小相关的 `<length>` 单位，例如 line-height 属性的 em 单位值。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nfont-size: <absolute-size> | <relative-size> | <length-percentage>;\n```\n","values":"\n### font-size 的属性值\n`large`<br/>基于用户默认字体大小（medium）的绝对大小关键字。<br/><br/><br/>`larger`<br/>相对大小关键字。字体大小将相对于父元素的字体大小变大或变小，大致按照上面用于区分绝对大小关键字的比率。<br/><br/><br/>`medium`<br/>基于用户默认字体大小（medium）的绝对大小关键字。<br/><br/><br/>`small`<br/>基于用户默认字体大小（medium）的绝对大小关键字。<br/><br/><br/>`smaller`<br/>相对大小关键字。字体大小将相对于父元素的字体大小变大或变小，大致按照上面用于区分绝对大小关键字的比率。<br/><br/><br/>`x-large`<br/>基于用户默认字体大小（medium）的绝对大小关键字。<br/><br/><br/>`x-small`<br/>基于用户默认字体大小（medium）的绝对大小关键字。<br/><br/><br/>`xx-large`<br/>基于用户默认字体大小（medium）的绝对大小关键字。<br/><br/><br/>`xx-small`<br/>基于用户默认字体大小（medium）的绝对大小关键字。<br/><br/><br/>`xxx-large`<br/>基于用户默认字体大小（medium）的绝对大小关键字。<br/><br/><br/>`math`<br/>使用特殊的数学缩放规则来确定 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":"### 兼容性 \n\n#### font-size 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| large | 4.0 | - | - |\n| larger | 4.0 | - | - |\n| medium | 4.0 | - | - |\n| small | 4.0 | - | - |\n| smaller | 4.0 | - | - |\n| x-large | 4.0 | - | - |\n| x-small | 4.0 | - | - |\n| xx-large | 4.0 | - | - |\n| xx-small | 4.0 | - | - |\n| xxx-large | 4.0 | - | - |\n| math | 4.0 | - | - |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| font-size | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 7 ） | √（ 1 ） | √（ 5.5 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-size)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.font-size)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view style=\"height: 250px;background-color: gray;justify-content: center;align-items: center;\">\r\n <text ref=\"text\" :style=\"{'font-size': fontSize}\">font-size: {{fontSize}}</text>\r\n <text style=\"font-size: 30px;\">font-size: 30px</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n fontSize: '15px'\r\n }\r\n },\r\n methods: {\r\n // 自动化测试\r\n setFontSize() {\r\n this.fontSize = '30px';\r\n }\r\n }\r\n }\r\n\n```\n\n:::"},"font-style":{"name":"## font-style\n","description":"\nfont-style CSS 属性允许你选择 font-family 字体下的 italic 或 oblique 样式。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nfont-style: normal | italic | oblique <angle>{0,2};\n```\n","values":"\n### font-style 的属性值\n`italic`<br/>选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代。<br/><br/><br/>`normal`<br/>选择 font-family 的常规字体。\n","defaultValue":"### 默认值 @default-value \n `normal`","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"### 兼容性 \n\n#### font-style 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| italic | 4.0 | 3.9 | 4.11 |\n| normal | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| font-style | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 7 ） | √（ 1 ） | √（ 4 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-style)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.font-style)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view style=\"height: 250px;background-color: gray;justify-content: center;align-items: center;\">\r\n <text class=\"common\" style=\"font-style: italic;\">font-style: italic</text>\r\n <text class=\"common\" style=\"font-style: normal;\">font-style: normal</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n font-size: 20px;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"font-weight":{"name":"## font-weight\n","description":"\nfont-weight CSS 属性指定了字体的粗细程度。一些字体只提供 normal 和 bold 两种值。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nfont-weight: <font-weight-absolute>{1,2};\n```\n","values":"\n### font-weight 的属性值\n`normal`<br/>正常粗细。与 400 等值。<br/><br/><br/>`bold`<br/>加粗。与 700 等值。<br/><br/><br/>`400`<br/>正常粗细，与 normal 等值。<br/><br/><br/>`700`<br/>加粗，与 bold 等值。\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":"### 兼容性 \n\n#### font-weight 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| normal | 4.0 | 3.9 | 4.11 |\n| bold | 4.0 | 3.9 | 4.11 |\n| 400 | 4.0 | 3.9 | 4.11 |\n| 700 | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| font-weight | √（ 2 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 3 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-weight)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.font-weight)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\n\t<view style=\"flex-grow: 1;\">\n\t\t<view style=\"height: 250px;background-color: gray;justify-content: center;align-items: center;\">\n\t\t\t<text class=\"common\" style=\"font-weight: normal;\">font-weight: normal</text>\n\t\t\t<text class=\"common\" style=\"font-weight: bold;\">font-weight: bold</text>\n\t\t\t<text class=\"common\" style=\"font-weight: 400;\">font-weight: 400</text>\n\t\t\t<text class=\"common\" style=\"font-weight: 700;\">font-weight: 700</text>\n\t\t</view>\n\t</view>\n</template>\n\n\n\n<style>\n\t.common {\n\t\tfont-size: 20px;\n\t}\n</style>\n```\n\n>Script\n```uts\n\n\n\n```\n\n:::"},"height":{"name":"## height\n","description":"\nheight CSS 属性指定了一个元素的高度。默认情况下，这个属性决定的是内容区（ content area）的高度，但是，如果将 box-sizing 设置为 border-box , 这个属性决定的将是边框区域（border area）的高度。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nheight: <viewport-length>{1,2};\n```\n","values":"\n### height 的属性值\n`auto`<br/>由浏览器为元素计算并选择一个高度。<br/><br/><br/>`fit-content`<br/>将 fill-content 公式中的可用位置替换为特定的参数以进行使用，如：min(max-content, max(min-content, ))<br/><br/><br/>`max-content`<br/>设置为允许的最大高度。<br/><br/><br/>`min-content`<br/>设置为允许的最小高度。\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"### 兼容性 \n\n#### height 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | 3.9 | 4.11 |\n| fit-content | 4.0 | x | x |\n| max-content | 4.0 | x | x |\n| min-content | 4.0 | x | x |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| height | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 7 ） | √（ 1 ） | √（ 4 ） |\n| fit-content | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 7 ） | √（ 1 ） | √（ 4 ） |\n| max-content | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 7 ） | √（ 1 ） | √（ 4 ） |\n| min-content | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 7 ） | √（ 1 ） | √（ 4 ） |\n","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](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>height: 250px</text>\r\n <view class=\"common\" style=\"height: 250px;\"></view>\r\n </view>\r\n\r\n <view style=\"height: 250px;\">\r\n <text>height: 50%</text>\r\n <view class=\"common\" style=\"height: 50%;\"></view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n background-color: red;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"justify-content":{"name":"## justify-content\n","description":"\nCSS justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\njustify-content: normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ];\n```\n","values":"\n### justify-content 的属性值\n`center`<br/>元素紧密地排列在主轴方向居中对齐<br/><br/><br/>`flex-start`<br/>元素紧密地排列在容器主轴起始侧<br/><br/><br/>`flex-end`<br/>元素紧密地排列在容器主轴结束侧<br/><br/><br/>`space-between`<br/>在主轴上均匀分配元素。相邻元素间距离相同。第一个元素与主轴首对齐，最后一个元素与主轴尾对齐<br/><br/><br/>`space-around`<br/>元素沿着主轴均匀分布在容器中。相邻项之间的间距，主轴起始位置到第一个元素的间距，主轴结束位置到最后一个元素的间距，都完全一样\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- [swiper-item](/component/swiper-item.md)\n- [navigator](/component/navigator.md)","compatibility":"### 兼容性 \n\n#### justify-content 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| center | 4.0 | 3.9 | 4.11 |\n| flex-start | 4.0 | 3.9 | 4.11 |\n| flex-end | 4.0 | 3.9 | 4.11 |\n| space-between | 4.0 | 3.9 | 4.11 |\n| space-around | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| justify-content | √（ 29 ） | √（ 12 ） | √（ 20 ） | √（ 12.1 ） | √（ 9 ） | √（ 11 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/justify-content)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.justify-content)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view style=\"flex-grow: 1\">\r\n <view>\r\n <text>justify-content: center</text>\r\n <view class=\"common\" style=\"justify-content: center\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>justify-content: flex-start</text>\r\n <view class=\"common\" style=\"justify-content: flex-start\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>justify-content: flex-end</text>\r\n <view class=\"common\" style=\"justify-content: flex-end\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>justify-content: space-between</text>\r\n <view class=\"common\" style=\"justify-content: space-between\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>justify-content: space-around</text>\r\n <view class=\"common\" style=\"justify-content: space-around\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </view>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n flex-direction: row;\r\n }\r\n</style>\n\n```\n\n:::"},"left":{"name":"## left\n","description":"\nCSS **left**属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移，非定位元素设置此属性无效。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nleft: <length> | <percentage> | auto;\n```\n","values":"\n### left 的属性值\n`auto`<br/>这个关键字表示：<br/> <br/> 对于绝对定位元素，元素将忽略此属性而以right属性为准，如果此时设置width: auto，将基于内容需要的宽度设置宽度；如果right也为auto的话，元素的水平位置就是它假如作为静态 (即 static) 元素时该在的位置。<br/> 对于相对定位元素，元素相对正常位置的偏移量将基于right属性；如果right也为auto的话，元素将不会有偏移。\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"### 兼容性 \n\n#### left 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| left | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 5 ） | √（ 1 ） | √（ 5.5 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/left)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.left)\n","example":""},"letter-spacing":{"name":"## letter-spacing\n","description":"\nCSS 的 letter-spacing 属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。letter-spacing 的正值会导致字符分布得更远，而 letter-spacing 的负值会使字符更接近。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nletter-spacing: normal | <length>;\n```\n","values":"\n### letter-spacing 的属性值\n`normal`<br/>此间距是按照当前字体的正常间距确定的。和 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":"### 兼容性 \n\n#### letter-spacing 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| normal | 4.0 | - | - |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| letter-spacing | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/letter-spacing)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.letter-spacing)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\n\t<view style=\"flex-grow: 1;\">\n\t\t<view style=\"height: 250px;background-color: gray;justify-content: center;align-items: center;\">\n\t\t\t<text class=\"common\">letter-spacing</text>\n\t\t\t<text class=\"common\" style=\"letter-spacing: 5px;\">letter-spacing: 5px</text>\n\t\t\t<text class=\"common\" style=\"letter-spacing: -2px;\">letter-spacing: -2px</text>\n\t\t</view>\n\t</view>\n</template>\n\n\n\n<style>\n\t.common {\n\t\tfont-size: 20px;\n\t}\n</style>\n```\n\n>Script\n```uts\n\n\n\n```\n\n:::"},"line-height":{"name":"## line-height\n","description":"\nline-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nline-height: normal | <number> | <length> | <percentage>;\n```\n","values":"\n### line-height 的属性值\n`normal`<br/>取决于用户代理。桌面浏览器（包括 Firefox）使用默认值，约为 1.2，这取决于元素的 font-family。\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | 1.2 |\n\n **注意**：W3C 默认值为：normal","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)\n- [textarea](/component/textarea.md)","compatibility":"### 兼容性 \n\n#### line-height 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| normal | 4.0 | - | - |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| line-height | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 7 ） | √（ 1 ） | √（ 4 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/line-height)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.line-height)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\n <view style=\"flex-grow: 1;\">\n <view style=\"height: 500px;background-color: gray;justify-content: center;align-items: center;\">\n <text class=\"common\" style=\"line-height: 75px;\">line-height: 75px</text>\n <text class=\"common line-height-3\">line-height: 3</text>\n <text class=\"common\" style=\"line-height: 3em;\">line-height: 3em</text>\n <text class=\"common\" style=\"line-height: 3;\">line-height: 3\\nline-height: 3\\nline-height: 3</text>\n </view>\n </view>\n</template>\n\n\n\n<style>\n .common {\n font-size: 20px;\n border: 1px red solid;\n margin: 10px 0;\n padding: 0 10px;\n }\n .line-height-3 {\n line-height: 3;\n }\n</style>\n\n```\n\n>Script\n```uts\n\n\n\n```\n\n:::"},"lines":{"name":"## lines\n","description":"\ntext 组件专有样式，设置文本组件最大行数\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 3.9 | 4.11 |\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.lines)\n","example":""},"margin":{"name":"## margin\n","description":"\nmargin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nmargin: [ <length> | <percentage> | auto ]{1,4};\n```\n","values":"\n### margin 的属性值\n`auto`<br/>让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。\n","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"### 兼容性 \n\n#### margin 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| margin | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 3 ） |\n","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](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>margin: 25px</text>\r\n <view style=\"width: 250px;height: 250px;background-color: gray;\">\r\n <view class=\"common\" style=\"background-color: red;\"></view>\r\n <view class=\"common\" style=\"margin: 25px;\"></view>\r\n <view class=\"common\" style=\"background-color: blue;\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>margin: 10%</text>\r\n <view style=\"width: 250px;height: 250px;background-color: gray;\">\r\n <view class=\"common\" style=\"background-color: red;\"></view>\r\n <view class=\"common\" style=\"margin: 10%;\"></view>\r\n <view class=\"common\" style=\"background-color: blue;\"></view>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n height: 50px;\r\n background-color: green;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"margin-bottom":{"name":"## margin-bottom\n","description":"\nmargin-bottom 属性设置与元素相关联的盒子模型的下外边距。可以为负值\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nmargin-bottom: <length> | <percentage> | auto;\n```\n","values":"\n### margin-bottom 的属性值\n`auto`<br/>由浏览器自己选择一个合适的值。参见 margin。\n","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"### 兼容性 \n\n#### margin-bottom 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| margin-bottom | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 3 ） |\n","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-bottom)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>margin-bottom: 25px</text>\r\n <view style=\"width: 250px;height: 250px;background-color: gray;\">\r\n <view class=\"common\" style=\"background-color: red;\"></view>\r\n <view class=\"common\" style=\"margin-bottom: 25px;\"></view>\r\n <view class=\"common\" style=\"background-color: blue;\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>margin-bottom: 10%</text>\r\n <view style=\"width: 250px;height: 250px;background-color: gray;\">\r\n <view class=\"common\" style=\"background-color: red;\"></view>\r\n <view class=\"common\" style=\"margin-bottom: 10%;\"></view>\r\n <view class=\"common\" style=\"background-color: blue;\"></view>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n height: 50px;\r\n background-color: green;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"margin-left":{"name":"## margin-left\n","description":"\nmargin-left 属性 设置与元素相关联的盒子模型的左外边距。这个值可以为负值。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nmargin-left: <length> | <percentage> | auto;\n```\n","values":"\n### margin-left 的属性值\n`auto`<br/>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":"### 兼容性 \n\n#### margin-left 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| margin-left | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 3 ） |\n","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-left)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>margin-left: 25px</text>\r\n <view style=\"width: 250px;height: 250px;background-color: gray;\">\r\n <view class=\"common\" style=\"background-color: red;\"></view>\r\n <view class=\"common\" style=\"margin-left: 25px;\"></view>\r\n <view class=\"common\" style=\"background-color: blue;\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>margin-left: 10%</text>\r\n <view style=\"width: 250px;height: 250px;background-color: gray;\">\r\n <view class=\"common\" style=\"background-color: red;\"></view>\r\n <view class=\"common\" style=\"margin-left: 10%;\"></view>\r\n <view class=\"common\" style=\"background-color: blue;\"></view>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n height: 50px;\r\n background-color: green;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"margin-right":{"name":"## margin-right\n","description":"\nmargin-right 属性 设置与元素相关联的盒子模型的右外边距。这个值可以为负值。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nmargin-right: <length> | <percentage> | auto;\n```\n","values":"\n### margin-right 的属性值\n`auto`<br/>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":"### 兼容性 \n\n#### margin-right 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| margin-right | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 3 ） |\n","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-right)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>margin-right: 25px</text>\r\n <view style=\"width: 250px;height: 250px;background-color: gray;\">\r\n <view class=\"common\" style=\"background-color: red;\"></view>\r\n <view class=\"common\" style=\"margin-right: 25px;\"></view>\r\n <view class=\"common\" style=\"background-color: blue;\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>margin-right: 10%</text>\r\n <view style=\"width: 250px;height: 250px;background-color: gray;\">\r\n <view class=\"common\" style=\"background-color: red;\"></view>\r\n <view class=\"common\" style=\"margin-right: 10%;\"></view>\r\n <view class=\"common\" style=\"background-color: blue;\"></view>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n height: 50px;\r\n background-color: green;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"margin-top":{"name":"## margin-top\n","description":"\nmargin-top CSS 属性用于设置元素的顶部外边距外边距区域。正值使它离相邻元素更远，而负值使它更靠近相邻元素。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nmargin-top: <length> | <percentage> | auto;\n```\n","values":"\n### margin-top 的属性值\n`auto`<br/>浏览器选择一个合适的值来使用。参见 margin。\n","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"### 兼容性 \n\n#### margin-top 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| margin-top | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 3 ） |\n","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-top)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>margin-top: 25px</text>\r\n <view style=\"width: 250px;height: 250px;background-color: gray;\">\r\n <view class=\"common\" style=\"background-color: red;\"></view>\r\n <view class=\"common\" style=\"margin-top: 25px;\"></view>\r\n <view class=\"common\" style=\"background-color: blue;\"></view>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <text>margin-top: 10%</text>\r\n <view style=\"width: 250px;height: 250px;background-color: gray;\">\r\n <view class=\"common\" style=\"background-color: red;\"></view>\r\n <view class=\"common\" style=\"margin-top: 10%;\"></view>\r\n <view class=\"common\" style=\"background-color: blue;\"></view>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n height: 50px;\r\n background-color: green;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"max-height":{"name":"## max-height\n","description":"\nCSS属性 max-height 设置元素的最大高度。它防止height属性的使用值（used value）大于 max-height 的指定值。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nmax-height: <viewport-length>;\n```\n","values":"\n### max-height 的属性值\n`fit-content`<br/>元素的最大高度根据内容可用高度自适应，当不会超过内容的最大高度 `max-content` 值。<br/><br/><br/>`max-content`<br/>元素的最大高度可以扩展到内容的最大高度。<br/><br/><br/>`min-content`<br/>元素的最大高度限制在内容的最小高度之内。<br/><br/><br/>`auto`<br/>元素的高度可以根据其内容的高度自动扩展，但仍然受到其他相关属性（如 `height` 和 `min-height`）的影响。如果没有其他限制，元素的高度将扩展以适应内容。<br/><br/><br/>`none`<br/>元素的高度不再受到任何最大高度的限制，即使元素的内容很多，也会根据内容的大小来自动扩展。\n","defaultValue":"### 默认值 @default-value \n `none`","unixTags":"","compatibility":"### 兼容性 \n\n#### max-height 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| fit-content | 4.0 | x | x |\n| max-content | 4.0 | x | x |\n| min-content | 4.0 | x | x |\n| auto | 4.0 | x | x |\n| none | 4.0 | x | x |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| max-height | √（ 18 ） | √（ 12 ） | √（ 1 ） | √（ 7 ） | √（ 1.3 ） | √（ 7 ） |\n| fit-content | √（ 18 ） | √（ 12 ） | √（ 1 ） | √（ 7 ） | √（ 1.3 ） | √（ 7 ） |\n| max-content | √（ 18 ） | √（ 12 ） | √（ 1 ） | √（ 7 ） | √（ 1.3 ） | √（ 7 ） |\n| min-content | √（ 18 ） | √（ 12 ） | √（ 1 ） | √（ 7 ） | √（ 1.3 ） | √（ 7 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/max-height)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.max-height)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>max-height: 250px</text>\r\n <view class=\"common\" style=\"max-height: 250px;\">\r\n <text>height: 500px</text>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 500px;\r\n background-color: red;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"max-width":{"name":"## max-width\n","description":"\nmax-width 属性用来给元素设置最大宽度值。定义了 max-width 的元素会在达到 max-width 值之后避免进一步按照 width 属性设置变大。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nmax-width: <viewport-length>;\n```\n","values":"\n### max-width 的属性值\n`fit-content`<br/>与 max-content 等价。<br/><br/><br/>`max-content`<br/>元素的最大宽度可以扩展到内容的最大宽度。<br/><br/><br/>`min-content`<br/>元素的最大宽度限制在内容的最小宽度之内。<br/><br/><br/>`auto`<br/>浏览器将通过计算为指定元素选择一个 max-width 值。<br/><br/><br/>`none`<br/>元素未设置最大值\n","defaultValue":"### 默认值 @default-value \n `none`","unixTags":"","compatibility":"### 兼容性 \n\n#### max-width 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| fit-content | 4.0 | x | x |\n| max-content | 4.0 | x | x |\n| min-content | 4.0 | x | x |\n| auto | 4.0 | x | x |\n| none | 4.0 | x | x |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| max-width | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 4 ） | √（ 1 ） | √（ 7 ） |\n| fit-content | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 4 ） | √（ 1 ） | √（ 7 ） |\n| max-content | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 4 ） | √（ 1 ） | √（ 7 ） |\n| min-content | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 4 ） | √（ 1 ） | √（ 7 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/max-width)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.max-width)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>max-width: 250px</text>\r\n <view class=\"common\" style=\"max-width: 250px;\">\r\n <text>width: 500px</text>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 500px;\r\n height: 250px;\r\n background-color: red;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"min-height":{"name":"## min-height\n","description":"\nCSS 属性 min-height 能够设置元素的最小高度。这样能够防止 height 属性的应用值小于 min-height 的值。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nmin-height: <viewport-length>;\n```\n","values":"\n### min-height 的属性值\n`fit-content`<br/>元素的高度将自动调整为适应内容的大小，但不会小于内容的最小高度 `min-content` 值。<br/><br/><br/>`max-content`<br/>元素的最小高度不会小于内容的最大高度。<br/><br/><br/>`min-content`<br/>元素的最小高度不会小于内容的最小高度。<br/><br/><br/>`auto`<br/>浏览器将通过计算为指定元素选择一个 min-height 值。<br/><br/><br/>`none`<br/>不限制盒容器的尺寸。\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | 0px |\n\n **注意**：W3C 默认值为：auto","unixTags":"","compatibility":"### 兼容性 \n\n#### min-height 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| fit-content | 4.0 | x | x |\n| max-content | 4.0 | x | x |\n| min-content | 4.0 | x | x |\n| auto | 4.0 | x | x |\n| none | 4.0 | x | x |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| min-height | √（ 1 ） | √（ 12 ） | √（ 3 ） | √（ 4 ） | √（ 1.3 ） | √（ 7 ） |\n| fit-content | √（ 1 ） | √（ 12 ） | √（ 3 ） | √（ 4 ） | √（ 1.3 ） | √（ 7 ） |\n| max-content | √（ 1 ） | √（ 12 ） | √（ 3 ） | √（ 4 ） | √（ 1.3 ） | √（ 7 ） |\n| min-content | √（ 1 ） | √（ 12 ） | √（ 3 ） | √（ 4 ） | √（ 1.3 ） | √（ 7 ） |\n| auto | √（ 1 ） | √（ 12 ） | √（ 3 ） | √（ 4 ） | √（ 1.3 ） | √（ 7 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/min-height)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.min-height)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>min-height: 250px</text>\r\n <view class=\"common\" style=\"min-height: 250px;\">\r\n <text>height: 50px</text>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 50px;\r\n background-color: red;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"min-width":{"name":"## min-width\n","description":"\nmin-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nmin-width: <viewport-length>;\n```\n","values":"\n### min-width 的属性值\n`fit-content`<br/>等同于 min(max-content, max(min-content, fill-available).<br/><br/><br/>`max-content`<br/>固有首选宽度。<br/><br/><br/>`min-content`<br/>固有最小宽度<br/><br/><br/>`auto`<br/>用于弹性元素的默认最小宽度。相比其他布局中以0为默认值，auto能为弹性布局指明更合理的默认表现。<br/><br/><br/>`none`<br/>元素未设置最小值\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | 0px |\n\n **注意**：W3C 默认值为：auto","unixTags":"","compatibility":"### 兼容性 \n\n#### min-width 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| fit-content | 4.0 | x | x |\n| max-content | 4.0 | x | x |\n| min-content | 4.0 | x | x |\n| auto | 4.0 | x | x |\n| none | 4.0 | x | x |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| min-width | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 4 ） | √（ 1 ） | √（ 7 ） |\n| fit-content | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 4 ） | √（ 1 ） | √（ 7 ） |\n| max-content | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 4 ） | √（ 1 ） | √（ 7 ） |\n| min-content | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 4 ） | √（ 1 ） | √（ 7 ） |\n| auto | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 4 ） | √（ 1 ） | √（ 7 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/min-width)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.min-width)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>min-width: 250px</text>\r\n <view class=\"common\" style=\"min-width: 250px;\">\r\n <text>width: 50px</text>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 50px;\r\n height: 250px;\r\n background-color: red;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"opacity":{"name":"## opacity\n","description":"\nopacity 属性指定了一个元素的不透明度。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nopacity: <alpha-value>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `1`","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| opacity | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 9 ） | √（ 2 ） | √（ 9 ） |\n","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":""},"overflow":{"name":"## overflow\n","description":"\noverflow 是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\noverflow: [ visible | hidden | clip | scroll | auto ]{1,2};\n```\n","values":"\n### overflow 的属性值\n`visible`<br/>暂时仅view组件支持visible，其他组件支持不支持<br/><br/><br/>`hidden`<br/>如果需要，内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。内容可以以编程的方式滚动（例如，通过设置 scrollLeft 等属性的值或 scrollTo() 方法）, 因此该元素仍然是一个滚动的容器。<br/><br/><br/>`scroll`<br/>如果需要，内容将被裁减以适应边距（padding）盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。<br/><br/><br/>`auto`<br/>取决于用户代理。如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。<br/><br/><br/>`clip`<br/>类似于 hidden，内容将以元素的边距（padding）盒进行裁剪。clip 和 hidden 之间的区别是 clip 关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。如果你希望开启一个新的格式化上下文，你可以使用 display: flow-root 来这样做。\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue | hidden |\n\n **注意**：W3C 默认值为：visible","unixTags":"","compatibility":"### 兼容性 \n\n#### overflow 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| visible | 4.0 | 3.9 | 4.11 |\n| hidden | 4.0 | 3.9 | 4.11 |\n| scroll | 4.0 | x | x |\n| auto | 4.0 | x | x |\n| clip | 4.0 | x | x |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| overflow | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 7 ） | √（ 1 ） | √（ 4 ） |\n","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](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex:1;\">\r\n <!-- #endif -->\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\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\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\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\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 <text class=\"text1\">ABCDEFG</text>\r\n </view>\r\n </view>\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 class=\"text1\">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/uni.png\"></image>\r\n </view>\r\n </view>\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/uni.png\"></image>\r\n </view>\r\n </view>\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\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .backgroundview {\r\n width: 300px;\r\n height: 300px;\r\n margin-bottom: 20px;\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 lines: 1;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n\r\n }\r\n },\r\n methods: {\r\n\r\n }\r\n }\r\n\n```\n\n:::"},"padding":{"name":"## padding\n","description":"\npadding CSS 简写属性控制元素所有四条边的内边距区域。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\npadding: [ <length> | <percentage> ]{1,4};\n```\n","values":"","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| padding | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>padding: 25px</text>\r\n <view class=\"common\" style=\"padding: 25px;\">\r\n <view style=\"flex-grow: 1;background-color: red;\"></view>\r\n </view>\r\n </view>\r\n\r\n <view style=\"width: 250px;\">\r\n <text>padding: 10%</text>\r\n <view class=\"common\" style=\"padding: 10%;\">\r\n <view style=\"flex-grow: 1;background-color: red;\"></view>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\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 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\npadding-bottom: <length> | <percentage>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| padding-bottom | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-bottom)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>padding-bottom: 25px</text>\r\n <view class=\"common\" style=\"padding-bottom: 25px;\">\r\n <view style=\"flex-grow: 1;background-color: red;\"></view>\r\n </view>\r\n </view>\r\n\r\n <view style=\"width: 250px;\">\r\n <text>padding-bottom: 10%</text>\r\n <view class=\"common\" style=\"padding-bottom: 10%;\">\r\n <view style=\"flex-grow: 1;background-color: red;\"></view>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"padding-left":{"name":"## padding-left\n","description":"\nCSS 属性 padding-left 是指一个元素在内边距区域（padding area）中左边的宽度。内边距（padding）是指一个元素的内容和边框之间的区域。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\npadding-left: <length> | <percentage>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| padding-left | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-left)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>padding-left: 25px</text>\r\n <view class=\"common\" style=\"padding-left: 25px;\">\r\n <view style=\"flex-grow: 1;background-color: red;\"></view>\r\n </view>\r\n </view>\r\n\r\n <view style=\"width: 250px;\">\r\n <text>padding-left: 10%</text>\r\n <view class=\"common\" style=\"padding-left: 10%;\">\r\n <view style=\"flex-grow: 1;background-color: red;\"></view>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\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 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\npadding-right: <length> | <percentage>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| padding-right | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-right)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>padding-right: 25px</text>\r\n <view class=\"common\" style=\"padding-right: 25px;\">\r\n <view style=\"flex-grow: 1;background-color: red;\"></view>\r\n </view>\r\n </view>\r\n\r\n <view style=\"width: 250px;\">\r\n <text>padding-right: 10%</text>\r\n <view class=\"common\" style=\"padding-right: 10%;\">\r\n <view style=\"flex-grow: 1;background-color: red;\"></view>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\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 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\npadding-top: <length> | <percentage>;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0`","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| padding-top | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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-top)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>padding-top: 25px</text>\r\n <view class=\"common\" style=\"padding-top: 25px;\">\r\n <view style=\"flex-grow: 1;background-color: red;\"></view>\r\n </view>\r\n </view>\r\n\r\n <view style=\"width: 250px;\">\r\n <text>padding-top: 10%</text>\r\n <view class=\"common\" style=\"padding-top: 10%;\">\r\n <view style=\"flex-grow: 1;background-color: red;\"></view>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: gray;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"pointer-events":{"name":"## pointer-events\n","description":"\npointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\npointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit;\n```\n","values":"\n### pointer-events 的属性值\n`auto`<br/>与pointer-events属性未指定时的表现效果相同，对于 SVG 内容，该值与visiblePainted效果相同<br/><br/><br/>`none`<br/>元素永远不会成为鼠标事件的target (en-US)。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"### 兼容性 \n\n#### pointer-events 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | 3.9 | 4.11 |\n| none | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| pointer-events | √（ 1 ） | √（ 12 ） | √（ 1.5 ） | √（ 9 ） | √（ 4 ） | √（ 11 ） |\n","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](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view>\r\n <view class=\"container1\">\r\n <text>控制父视图pointer-events打开时可以点击</text>\r\n <switch :checked=\"true\" @change=\"onChange1\" />\r\n </view>\r\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 <view class=\"container1\">\r\n <text>控制遮罩层pointer-events关闭时可以点击</text>\r\n <switch :checked=\"true\" @change=\"onChange2\" />\r\n </view>\r\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 </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n\r\n\r\n<style>\r\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 {\r\n margin: 7px;\r\n background-color: white;\r\n }\r\n\r\n .text {\r\n margin-top: 10px;\r\n margin-bottom: 16px;\r\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</style>\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n isTranstionWidthOrHeight: false,\r\n widthOrHeight: null as UniElement | null,\r\n widthProgress: null as UniElement | null,\r\n progressWidth: 200,\r\n pointerEvents1: 'auto',\r\n pointerEvents2: 'auto',\r\n }\r\n },\r\n onReady() {\r\n this.widthOrHeight = uni.getElementById(\"widthOrHeight\")\r\n this.widthProgress = uni.getElementById(\"widthProgress\")\r\n },\r\n methods: {\r\n changeWidthOrHeight() {\r\n this.widthOrHeight?.style?.setProperty(\"width\", this.isTranstionWidthOrHeight\r\n ? '200px'\r\n : '300px')\r\n this.isTranstionWidthOrHeight = !this.isTranstionWidthOrHeight\r\n },\r\n changeWidthProgress() {\r\n this.progressWidth += 20\r\n this.widthProgress?.style?.setProperty(\"width\", this.progressWidth + 'px')\r\n },\r\n onChange1(e : UniSwitchChangeEvent) {\r\n this.pointerEvents1 = e.detail.value ? 'auto' : 'none'\r\n },\r\n onChange2(e : UniSwitchChangeEvent) {\r\n this.pointerEvents2 = e.detail.value ? 'auto' : 'none'\r\n }\r\n }\r\n }\r\n\n```\n\n:::"},"position":{"name":"## position\n","description":"\nCSS position 属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nposition: static | relative | absolute | sticky | fixed;\n```\n","values":"\n### position 的属性值\n`relative`<br/>该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。<br/><br/><br/>`absolute`<br/>元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。<br/><br/><br/>`fixed`<br/>元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。<br/><br/><br/>`static`<br/>该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。<br/><br/><br/>`sticky`<br/>元素根据正常文档流进行定位，然后相对它的最近滚动祖先（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":"### 兼容性 \n\n#### position 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| relative | 4.0 | 3.9 | 4.11 |\n| absolute | 4.0 | 3.9 | 4.11 |\n| fixed | 4.0 | 3.9 | 4.11 |\n| static | 4.0 | x | x |\n| sticky | 4.0 | x | x |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| position | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 4 ） | √（ 1 ） | √（ 4 ） |\n| sticky | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 4 ） | √（ 1 ） | √（ 4 ） |\n","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](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view style=\"flex-grow: 1\">\r\n <view>\r\n <text>position: fixed</text>\r\n <scroll-view style=\"width: 250px; height: 250px; background-color: gray\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view class=\"common fixed\" style=\"position: fixed\">\r\n <text class=\"text\">fixed</text>\r\n </view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </scroll-view>\r\n </view>\r\n\r\n <view>\r\n <text>position: relative</text>\r\n <scroll-view style=\"width: 250px; height: 250px; background-color: gray\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view class=\"common\" style=\"position: relative\">\r\n <text class=\"text\">relative</text>\r\n </view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </scroll-view>\r\n </view>\r\n\r\n <view>\r\n <text>position: absolute</text>\r\n <scroll-view style=\"width: 250px; height: 250px; background-color: gray\">\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view class=\"common\" style=\"position: absolute\">\r\n <text class=\"text\">absolute</text>\r\n </view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: red\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: green\"></view>\r\n <view style=\"width: 50px; height: 50px; background-color: blue\"></view>\r\n </scroll-view>\r\n </view>\r\n\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n\r\n</template>\r\n\r\n<style>\r\n .common {\r\n width: 50px;\r\n height: 50px;\r\n background-color: green;\r\n top: 25px;\r\n left: 25px;\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(--window-top) + 25px);\r\n /* #endif */\r\n }\r\n\r\n .text {\r\n white-space: nowrap;\r\n width: 100%;\r\n }\r\n</style>\n\n```\n\n:::"},"right":{"name":"## right\n","description":"\nright CSS 属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移，非定位元素设置此属性无效。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nright: <length> | <percentage> | auto;\n```\n","values":"\n### right 的属性值\n`auto`<br/>这个关键字表示：<br/> <br/> 对于绝对定位元素，元素将忽略此属性而以 left 属性为准，如果此时设置 width: auto，将基于内容需要的宽度设置宽度；如果 left 也为 auto 的话，元素的水平位置就是它假如作为静态（即 static）元素时该在的位置。<br/> 对于相对定位元素，元素相对正常位置的偏移量将基于 left 属性；如果 left 也为 auto 的话，元素将不会有偏移。\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"### 兼容性 \n\n#### right 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| right | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 5 ） | √（ 1 ） | √（ 5.5 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/right)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.right)\n","example":""},"text-align":{"name":"## text-align\n","description":"\ntext-align CSS 属性设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 vertical-align 类似，但是是水平方向的。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\ntext-align: start | end | left | right | center | justify | match-parent;\n```\n","values":"\n### text-align 的属性值\n`left`<br/>行内内容向左侧边对齐。<br/><br/><br/>`center`<br/>行内内容居中。<br/><br/><br/>`right`<br/>行内内容向右侧边对齐。\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":"### 兼容性 \n\n#### text-align 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| left | 4.0 | 3.9 | 4.11 |\n| center | 4.0 | 3.9 | 4.11 |\n| right | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| text-align | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 3 ） |\n","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-align)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\n\t<view style=\"flex-grow: 1;\">\n\t\t<view style=\"height: 250px;background-color: gray;justify-content: center;align-items: center;\">\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=\"common\" style=\"text-align: right;\">text-align: right</text>\n\t\t</view>\n\t</view>\n</template>\n\n\n\n<style>\n\t.common {\n\t\twidth: 250px;\n\t\tfont-size: 20px;\n\t}\n</style>\n```\n\n>Script\n```uts\n\n\n\n```\n\n:::"},"text-decoration":{"name":"## text-decoration\n","description":"\ntext-decoration 简写 CSS 属性设置文本上的装饰性线条的外观。它是 text-decoration-line、text-decoration-color、text-decoration-style 和较新的 text-decoration-thickness 属性的缩写。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 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`dashed`<br/>虚线。<br/><br/><br/>`dotted`<br/>点划线。<br/><br/><br/>`double`<br/>双实线。<br/><br/><br/>`line-through`<br/>贯穿文本中间的线。<br/><br/><br/>`none`<br/>不画线。<br/><br/><br/>`overline`<br/>在文本的上方的线。<br/><br/><br/>`solid`<br/>实线。<br/><br/><br/>`underline`<br/>下滑线。<br/><br/><br/>`wavy`<br/>波浪线。<br/><br/><br/>`text-decoration-line`<br/>设置使用的装饰类型，例如 underline 或者 line-through。<br/><br/><br/>`text-decoration-color`<br/>设置装饰的颜色。<br/><br/><br/>`text-decoration-style`<br/>设置装饰的线条的颜色，例如 solid、wavy 或者 dashed。<br/><br/><br/>`text-decoration-thickness`<br/>设置用于装饰的线条粗细。\n","defaultValue":"","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"### 兼容性 \n\n#### text-decoration 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| dashed | 4.0 | - | - |\n| dotted | 4.0 | - | - |\n| double | 4.0 | - | - |\n| line-through | 4.0 | - | - |\n| none | 4.0 | - | - |\n| overline | 4.0 | - | - |\n| solid | 4.0 | - | - |\n| underline | 4.0 | - | - |\n| wavy | 4.0 | - | - |\n| text-decoration-line | 4.0 | - | - |\n| text-decoration-color | 4.0 | - | - |\n| text-decoration-style | 4.0 | - | - |\n| text-decoration-thickness | 4.0 | - | - |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| text-decoration | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 3 ） |\n","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-decoration)\n","example":""},"text-decoration-color":{"name":"## text-decoration-color\n","description":"\nCSS 属性 text-decoration-color 用于设置文本修饰线的颜色，文本修饰线是通过 text-decoration-line 属性指定的。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\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":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| text-decoration-color | √（ 57 ） | √（ 79 ） | √（ 36 ） | √（ 44 ） | √（ 12.1 ） | x |\n","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-decoration-color)\n","example":""},"text-decoration-line":{"name":"## text-decoration-line\n","description":"\nCSS 属性 text-decoration-line 用于设置元素中的文本的修饰类型。当要设置多个线修饰属性时，用 text-decoration 简写属性会比分别写多个属性更方便。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\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`underline`<br/>在文本的下方有一条修饰线。<br/><br/><br/>`line-through`<br/>有一条贯穿文本中间的修饰线。<br/><br/><br/>`overline`<br/>在文本的上方有一条修饰线。\n","defaultValue":"### 默认值 @default-value \n `none`","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"### 兼容性 \n\n#### text-decoration-line 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| underline | 4.0 | 3.9 | 4.11 |\n| line-through | 4.0 | 3.9 | 4.11 |\n| overline | 4.0 | x | x |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| text-decoration-line | √（ 57 ） | √（ 79 ） | √（ 36 ） | √（ 44 ） | √（ 12.1 ） | x |\n","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-decoration-line)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\n\t<view style=\"flex-grow: 1;\">\n\t\t<view style=\"height: 250px;background-color: gray;justify-content: center;align-items: center;\">\n\t\t\t<text class=\"common\" style=\"text-decoration-line: underline;\">text-decoration-line: underline</text>\n\t\t\t<text class=\"common\" style=\"text-decoration-line: line-through;\">text-decoration-line: line-through</text>\n\t\t</view>\n\t</view>\n</template>\n\n\n\n<style>\n\t.common {\n\t\tfont-size: 20px;\n\t}\n</style>\n```\n\n>Script\n```uts\n\n\n\n```\n\n:::"},"text-decoration-style":{"name":"## text-decoration-style\n","description":"\nCSS 属性 text-decoration-style 用于设置由 text-decoration-line 设定的线的样式。线的样式会应用到所有被 text-decoration-line 设定的线，不能为其中的每条线设置不同的样式。当要设置多个线修饰属性时，用 text-decoration 简写属性会比分别写多个属性更方便。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","syntax":"\n### 语法\n```\ntext-decoration-style: solid | double | dotted | dashed | wavy;\n```\n","values":"\n### text-decoration-style 的属性值\n`solid`<br/>实线。<br/><br/><br/>`dashed`<br/>虚线。<br/><br/><br/>`dotted`<br/>点划线。<br/><br/><br/>`wavy`<br/>波浪线。\n","defaultValue":"","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"### 兼容性 \n\n#### text-decoration-style 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| solid | 4.0 | x | x |\n| dashed | 4.0 | x | x |\n| dotted | 4.0 | x | x |\n| wavy | 4.0 | x | x |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| text-decoration-style | √（ 57 ） | √（ 79 ） | √（ 36 ） | √（ 44 ） | √（ 12.1 ） | x |\n","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-decoration-style)\n","example":""},"text-decoration-thickness":{"name":"## text-decoration-thickness\n","description":"\nCSS 属性 text-decoration-thickness 用于设置元素中文本所使用的装饰线（如 line-through、underline 或 overline）的笔触厚度。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","syntax":"\n### 语法\n```\ntext-decoration-thickness: auto | from-font | <length> | <percentage> ;\n```\n","values":"\n### text-decoration-thickness 的属性值\n`auto`<br/>由浏览器为文本装饰线选择合适的厚度。<br/><br/><br/>`from-font`<br/>如果字体文件中包含了首选的厚度值，则使用字体文件的厚度值。如果字体文件中没有包含首选的厚度值，则效果和设置为 auto 一样，由浏览器选择合适的厚度值。\n","defaultValue":"","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"### 兼容性 \n\n#### text-decoration-thickness 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | - | - |\n| from-font | 4.0 | - | - |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| text-decoration-thickness | √（ 89 ） | √（ 89 ） | √（ 70 ） | √（ 75 ） | √（ 12.1 ） | x |\n","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-decoration-thickness)\n","example":""},"text-overflow":{"name":"## text-overflow\n","description":"\ntext-overflow CSS 属性用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\ntext-overflow: [ clip | ellipsis | <string> ]{1,2};\n```\n","values":"\n### text-overflow 的属性值\n`clip`<br/>默认值。这个关键字会在内容区域的极限处截断文本，因此可能会在单词的中间发生截断。如果你的目标浏览器支持 text-overflow: ''，为了能在两个单词过渡处截断，你可以使用一个空字符串值（''）作为 text-overflow 属性的值。<br/><br/><br/>`ellipsis`<br/>这个关键字会用一个省略号（'…'、U+2026 HORIZONTAL ELLIPSIS）来表示被截断的文本。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小以至于连省略号都容纳不下，那么这个省略号也会被截断。\n","defaultValue":"### 默认值 @default-value \n `clip`","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"### 兼容性 \n\n#### text-overflow 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| clip | 4.0 | 3.9 | 4.11 |\n| ellipsis | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| text-overflow | √（ 1 ） | √（ 12 ） | √（ 7 ） | √（ 11 ） | √（ 1.3 ） | √（ 6 ） |\n","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-overflow)\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view style=\"height: 250px;padding: 0 30px; background-color: gray;justify-content: center;\">\r\n <view class=\"margin-bottom-10\">\r\n <text class=\"font-weight-bold\">text-overflow:clip white-space:nowrap</text>\r\n <text class=\"font-size-20\" style=\"text-overflow: clip;white-space: nowrap;\">{{multiLineText}}</text>\r\n </view>\r\n <view class=\"margin-bottom-10\">\r\n <text class=\"font-weight-bold\">text-overflow:ellipsis white-space:nowrap</text>\r\n <text class=\"font-size-20\" style=\"text-overflow: ellipsis;white-space: nowrap;\">{{singleLineText}}</text>\r\n <text class=\"font-size-20\" style=\"text-overflow: ellipsis;white-space: nowrap;\">{{multiLineText}}</text>\r\n </view>\r\n <view class=\"margin-bottom-10\">\r\n <text class=\"font-weight-bold\">white-space:normal</text>\r\n <text class=\"font-size-20\" style=\"white-space: normal;\">{{multiLineText}}</text>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .font-size-20 {\r\n font-size: 20px;\r\n }\r\n\r\n .font-weight-bold {\r\n font-weight: bold;\r\n }\r\n\r\n .margin-bottom-10 {\r\n margin-bottom: 10px;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n multiLineText: 'HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言',\r\n singleLineText: 'uts，大一统语言（单行文本）'\r\n }\r\n }\r\n }\r\n\n```\n\n:::"},"top":{"name":"## top\n","description":"\ntop样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\ntop: <length> | <percentage> | auto;\n```\n","values":"\n### top 的属性值\n`auto`<br/>这个关键字表示：<br/> <br/> 对于绝对定位元素，元素将忽略此属性已bottom属性为准，如果此时设置height: auto，将基于内容需要的高度设置高度；如果bottom也为auto的话，元素的垂直位置就是它假如作为静态 (即 static) 元素时该在的位置。<br/> 对于相对定位元素，元素相对正常位置的偏移量将基于bottom属性；如果bottom也为auto的话，元素将不会有偏移。\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"### 兼容性 \n\n#### top 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| top | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 6 ） | √（ 1 ） | √（ 5 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/top)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.top)\n","example":""},"transform":{"name":"## transform\n","description":"\nCSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\ntransform: none | <transform-list>;\n```\n","values":"\n### transform 的属性值\n`rotate(\\<angle>)`<br/>旋转元素以给定的角度（angle）<br/><br/><br/>`rotateX(\\<angle>)`<br/>绕 X 轴旋转元素以给定的角度（angle）<br/><br/><br/>`rotateY(\\<angle>)`<br/>绕 Y 轴旋转元素以给定的角度（angle）<br/><br/><br/>`rotateZ(\\<angle>)`<br/>绕 Z 轴旋转元素以给定的角度（angle）<br/><br/><br/>`scale(\\<number> \\<number>)`<br/>缩放元素的尺寸，水平和垂直方向分别使用给定的比例（number）<br/><br/><br/>`scaleX(\\<number>)`<br/>水平方向缩放元素的尺寸，使用给定的比例（number）<br/><br/><br/>`scaleY(\\<number>)`<br/>垂直方向缩放元素的尺寸，使用给定的比例（number）<br/><br/><br/>`translate(\\<length/percentage> \\<length/percentage>)`<br/>沿 X 和 Y 轴移动元素，水平和垂直方向分别使用给定的距离或百分比<br/><br/><br/>`translateX(\\<length/percentage>)`<br/>沿 X 轴移动元素，使用给定的距离或百分比<br/><br/><br/>`translateY(\\<length/percentage>)`<br/>沿 Y 轴移动元素，使用给定的距离或百分比\n","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### transform 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| rotate(\\<angle>) | 4.0 | 3.9 | 4.11 |\n| rotateX(\\<angle>) | 4.0 | 3.9 | 4.11 |\n| rotateY(\\<angle>) | 4.0 | 3.9 | 4.11 |\n| rotateZ(\\<angle>) | 4.0 | 3.9 | 4.11 |\n| scale(\\<number> \\<number>) | 4.0 | 3.9 | 4.11 |\n| scaleX(\\<number>) | 4.0 | 3.9 | 4.11 |\n| scaleY(\\<number>) | 4.0 | 3.9 | 4.11 |\n| translate(\\<length/percentage> \\<length/percentage>) | 4.0 | 3.9 | 4.11 |\n| translateX(\\<length/percentage>) | 4.0 | 3.9 | 4.11 |\n| translateY(\\<length/percentage>) | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| transform | √（ 36 ） | √（ 12 ） | √（ 16 ） | √（ 23 ） | √（ 9 ） | √（ 10 ） |\n","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":""},"transform-origin":{"name":"## transform-origin\n","description":"\ntransform-origin CSS 属性让你更改一个元素变形的原点。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\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`top`<br/>相对于元素的顶部边缘进行变形<br/><br/><br/>`left`<br/>相对于元素的左侧边缘进行变形<br/><br/><br/>`right`<br/>相对于元素的右侧边缘进行变形<br/><br/><br/>`bottom`<br/>相对于元素的底部边缘进行变形<br/><br/><br/>`center`<br/>相对于元素的中心点进行变形\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":"### 兼容性 \n\n#### transform-origin 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| top | 4.0 | 3.9 | 4.11 |\n| left | 4.0 | 3.9 | 4.11 |\n| right | 4.0 | 3.9 | 4.11 |\n| bottom | 4.0 | 3.9 | 4.11 |\n| center | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| transform-origin | √（ 36 ） | √（ 12 ） | √（ 16 ） | √（ 23 ） | √（ 9 ） | √（ 10 ） |\n","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-origin)\n","example":""},"transition":{"name":"## transition\n","description":"\ntransition CSS 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性 (en-US)。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\ntransition: <single-transition>#;\n```\n","values":"\n### transition 的属性值\n`all`<br/>每一个能够进行过渡动画的属性都会进行过渡动画。<br/><br/><br/>`none`<br/>没有属性会进行过渡动画。\n","defaultValue":"","unixTags":"","compatibility":"### 兼容性 \n\n#### transition 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| all | 4.0 | 4.13 | 4.13 |\n| none | 4.0 | 4.13 | 4.13 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| transition | √（ 26 ） | √（ 12 ） | √（ 16 ） | √（ 12.1 ） | √（ 9 ） | √（ 10 ） |\n","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](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"container\">\r\n <text class=\"text\">点击修改宽度</text>\r\n <view class=\"base-style transition-width\" id=\"widthOrHeight\" @click=\"changeWidthOrHeight\"></view>\r\n </view>\r\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>\r\n <view class=\"container\">\r\n <text class=\"text\">点击修改Margin</text>\r\n <view class=\"base-style transition-margin\" id=\"styleMargin\" @click=\"changeMargin\"></view>\r\n </view>\r\n <view class=\"container\">\r\n <text class=\"text\">点击修改Padding</text>\r\n <view class=\"base-style transition-padding\" id=\"stylePadding\" @click=\"changePadding\">\r\n <view style=\"background-color: black; height: 50px; width: 50px\"></view>\r\n </view>\r\n </view>\r\n <view class=\"container\">\r\n <text class=\"text\">点击修改background-color和opacity</text>\r\n <view class=\"base-style transition-background\" id=\"styleBackground\" @click=\"changeBackground\"></view>\r\n </view>\r\n <view class=\"container\">\r\n <text class=\"text\">点击修改background-color（rgba）</text>\r\n <view style=\"flex: 1;\">\r\n <view class=\"base-style transition-background\" id=\"styleBackground2\" @click=\"changeBackground2\"></view>\r\n </view>\r\n </view>\r\n <view class=\"container\">\r\n <text class=\"text\">点击修改opacity渐隐渐现</text>\r\n <view class=\"base-style transition-opacity\" id=\"styleOpacity\" @click=\"changeStyleOpacity\"></view>\r\n </view>\r\n <view class=\"container\">\r\n <text class=\"text\">动态修改background-color和duration</text>\r\n <view class=\"base-style\" id=\"propertyStyleBackground\" @click=\"propertyChangeBackground\"></view>\r\n </view>\r\n <view class=\"container\">\r\n <text class=\"text\">点击修改Transform</text>\r\n <view class=\"base-style transition-transform\" id=\"styleTransform\" @click=\"changeTransform\"></view>\r\n </view>\r\n <view class=\"container\">\r\n <text class=\"text\">点击修改TransformTranslate</text>\r\n <view class=\"base-style transition-transform\" id=\"transformTranslate\" @click=\"changeTransformTranslate\"></view>\r\n </view>\r\n <view class=\"container\">\r\n <text class=\"text\">点击修改Transform和宽</text>\r\n <view class=\"base-style transition-transform-width\" id=\"styleTransformWithWidth\"\r\n @click=\"changeTransformWithWidth\"></view>\r\n </view>\r\n <view class=\"container\" @click=\"changeTransformWithOrigin\">\r\n <text class=\"text\">点击修改Transform（含transform-origin）</text>\r\n <view class=\"base-style transition-transform\" style=\"transform-origin: 0 0;\" id=\"styleTransformWithOrigin\"></view>\r\n </view>\r\n <view class=\"container\">\r\n <text class=\"text\">点击修改Border</text>\r\n <view class=\"base-style transition-border\" id=\"styleBorder\" @click=\"changeBorder\"></view>\r\n </view>\r\n <view class=\"container\">\r\n <text class=\"text\">点击修改Position</text>\r\n <view class=\"base-style transition-position\" id=\"stylePosition\" @click=\"changestylePosition\"></view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .container {\r\n margin: 7px;\r\n background-color: white;\r\n }\r\n\r\n .text {\r\n margin-top: 10px;\r\n margin-bottom: 16px;\r\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 .transform-bgColor {\r\n transition-property: background-color;\r\n transition-duration: 0.5s;\r\n }\r\n\r\n .transition-width {\r\n transition-property: width;\r\n transition-duration: 1s;\r\n }\r\n\r\n .transition-margin {\r\n transition-property: margin-left, margin-top;\r\n transition-duration: 1s;\r\n }\r\n\r\n .transition-padding {\r\n transition-property: padding-left, padding-top;\r\n transition-duration: 1s;\r\n }\r\n\r\n .transition-background {\r\n transition-property: background-color, opacity;\r\n transition-duration: 1s;\r\n }\r\n\r\n .transition-opacity {\r\n transition-property: opacity;\r\n transition-duration: 1s;\r\n }\r\n\r\n .transition-transform {\r\n transition-property: transform;\r\n transition-duration: 1s;\r\n }\r\n\r\n .transition-border {\r\n border-width: 5px;\r\n border-color: brown;\r\n border-style: solid;\r\n transition-property: border-color;\r\n transition-duration: 1s;\r\n }\r\n\r\n .transition-position {\r\n left: 0px;\r\n transition-property: left;\r\n transition-duration: 1s;\r\n }\r\n\r\n .transition-transform-width {\r\n transition-property: transform, width;\r\n transition-duration: 1s;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n isTranstionWidthOrHeight: false,\r\n widthOrHeight: null as UniElement | null,\r\n widthProgress: null as UniElement | null,\r\n progressWidth: 200,\r\n isTranstionChangeMargin: false,\r\n styleMargin: null as UniElement | null,\r\n isTransitionStylePadding: false,\r\n stylePadding: null as UniElement | null,\r\n isTransitionstyleBackground: false,\r\n isTransitionstyleBackground2: false,\r\n isTransitionstyleOpacity: false,\r\n styleBackground: null as UniElement | null,\r\n styleBackground2: null as UniElement | null,\r\n styleOpacity: null as UniElement | null,\r\n isTransitionStyleTransform: false,\r\n styleTransform: null as UniElement | null,\r\n isTransitionStyleTransformWithWidth: false,\r\n styleTransformWithWidth: null as UniElement | null,\r\n isTransitionstyleBorder: false,\r\n styleBorder: null as UniElement | null,\r\n isTransitionstylePosition: false,\r\n stylePosition: null as UniElement | null,\r\n isSetTransition: false,\r\n isTransitionpropertystyleBackground: false,\r\n propertyStyleBackground: null as UniElement | null,\r\n isTransitionStyleTransformWithOrigin: false,\r\n styleTransformWithOrigin: null as UniElement | null,\r\n styleTransformTranslate: null as UniElement | null,\r\n isTransformTranslate: false\r\n }\r\n },\r\n onReady() {\r\n this.widthOrHeight = uni.getElementById(\"widthOrHeight\")\r\n this.widthProgress = uni.getElementById(\"widthProgress\")\r\n this.styleMargin = uni.getElementById(\"styleMargin\")\r\n this.stylePadding = uni.getElementById(\"stylePadding\")\r\n this.styleBackground = uni.getElementById(\"styleBackground\")\r\n this.styleBackground2 = uni.getElementById(\"styleBackground2\")\r\n this.styleOpacity = uni.getElementById(\"styleOpacity\")\r\n this.styleTransform = uni.getElementById(\"styleTransform\")\r\n this.styleBorder = uni.getElementById(\"styleBorder\")\r\n this.stylePosition = uni.getElementById(\"stylePosition\")\r\n this.propertyStyleBackground = uni.getElementById(\"propertyStyleBackground\")\r\n this.styleTransformWithOrigin = uni.getElementById(\"styleTransformWithOrigin\")\r\n this.styleTransformWithWidth = uni.getElementById(\"styleTransformWithWidth\")\r\n this.styleTransformTranslate = uni.getElementById(\"transformTranslate\")\r\n },\r\n methods: {\r\n changeWidthOrHeight() {\r\n this.widthOrHeight?.style?.setProperty(\"width\", this.isTranstionWidthOrHeight\r\n ? '200px'\r\n : '300px')\r\n this.isTranstionWidthOrHeight = !this.isTranstionWidthOrHeight\r\n },\r\n changeWidthProgress() {\r\n this.progressWidth += 20\r\n this.widthProgress?.style?.setProperty(\"width\", this.progressWidth + 'px')\r\n },\r\n changeMargin() {\r\n this.styleMargin?.style?.setProperty(\"margin-top\", this.isTranstionChangeMargin\r\n ? '0px'\r\n : '50px'\r\n )\r\n this.styleMargin?.style?.setProperty(\"margin-left\", this.isTranstionChangeMargin\r\n ? '0px'\r\n : '50px'\r\n )\r\n this.isTranstionChangeMargin = !this.isTranstionChangeMargin\r\n },\r\n\r\n changePadding() {\r\n this.stylePadding?.style?.setProperty(\"padding-top\", this.isTransitionStylePadding\r\n ? '0px'\r\n : '50px')\r\n this.stylePadding?.style?.setProperty(\"padding-left\", this.isTransitionStylePadding\r\n ? '0px'\r\n : '50px')\r\n this.isTransitionStylePadding = !this.isTransitionStylePadding\r\n },\r\n changeBackground() {\r\n this.styleBackground?.style?.setProperty(\"background-color\", this.isTransitionstyleBackground\r\n ? 'brown'\r\n : 'black'\r\n )\r\n this.styleBackground?.style?.setProperty(\"opacity\", this.isTransitionstyleBackground\r\n ? '1'\r\n : '0.5'\r\n )\r\n this.isTransitionstyleBackground = !this.isTransitionstyleBackground\r\n },\r\n changeBackground2() {\r\n this.styleBackground2?.style?.setProperty(\"background-color\", this.isTransitionstyleBackground2\r\n ? 'brown'\r\n : 'rgba(0, 0, 0, 0.5)'\r\n )\r\n this.isTransitionstyleBackground2 = !this.isTransitionstyleBackground2\r\n },\r\n changeStyleOpacity() {\r\n this.styleOpacity?.style?.setProperty(\"opacity\", this.isTransitionstyleOpacity\r\n ? '1'\r\n : '0'\r\n )\r\n this.styleOpacity?.style?.setProperty(\"transition-duration\", \"1000ms\")\r\n this.isTransitionstyleOpacity = !this.isTransitionstyleOpacity\r\n },\r\n propertyChangeBackground() {\r\n if (!this.isSetTransition) {\r\n this.propertyStyleBackground?.style?.setProperty(\"transition-property\", \"background-color\")\r\n this.propertyStyleBackground?.style?.setProperty(\"transition-duration\", \"1000ms\")\r\n this.isSetTransition = true\r\n }\r\n this.propertyStyleBackground?.style?.setProperty(\"background-color\", this.isTransitionpropertystyleBackground\r\n ? 'brown'\r\n : 'black'\r\n )\r\n this.isTransitionpropertystyleBackground = !this.isTransitionpropertystyleBackground\r\n },\r\n changeTransform() {\r\n this.styleTransform?.style?.setProperty(\"transform\", this.isTransitionStyleTransform\r\n ? 'rotate(0deg)'\r\n : 'rotate(135deg)'\r\n )\r\n this.isTransitionStyleTransform = !this.isTransitionStyleTransform\r\n },\r\n changeTransformTranslate() {\r\n const translate = this.isTransformTranslate ? `translate(0%,0%)` : `translate(100%,0%)`\r\n this.styleTransformTranslate?.style?.setProperty('transform', translate)\r\n this.isTransformTranslate = !this.isTransformTranslate\r\n },\r\n changeTransformWithWidth() {\r\n this.styleTransformWithWidth?.style?.setProperty(\"transform\", this.isTransitionStyleTransformWithWidth\r\n ? 'rotate(0deg)'\r\n : 'rotate(135deg)'\r\n )\r\n this.styleTransformWithWidth?.style?.setProperty(\"width\", this.isTransitionStyleTransformWithWidth\r\n ? '200px'\r\n : '100px'\r\n )\r\n this.isTransitionStyleTransformWithWidth = !this.isTransitionStyleTransformWithWidth\r\n },\r\n changeTransformWithOrigin() {\r\n this.styleTransformWithOrigin?.style?.setProperty(\"transform\", this.isTransitionStyleTransformWithOrigin\r\n ? 'scaleX(1)'\r\n : 'scaleX(0)'\r\n )\r\n this.isTransitionStyleTransformWithOrigin = !this.isTransitionStyleTransformWithOrigin\r\n },\r\n changeBorder() {\r\n this.styleBorder?.style?.setProperty(\"border-color\", this.isTransitionstyleBorder\r\n ? 'brown'\r\n : 'yellow'\r\n )\r\n this.isTransitionstyleBorder = !this.isTransitionstyleBorder\r\n },\r\n changestylePosition() {\r\n this.stylePosition?.style?.setProperty(\"left\", this.isTransitionstylePosition\r\n ? '0px'\r\n : '100px'\r\n )\r\n this.isTransitionstylePosition = !this.isTransitionstylePosition\r\n },\r\n },\r\n }\r\n\n```\n\n:::"},"transition-delay":{"name":"## transition-delay\n","description":"\nCSS 的transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\ntransition-delay: <time>#;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0s`","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| transition-delay | √（ 26 ） | √（ 12 ） | √（ 16 ） | √（ 12.1 ） | √（ 9 ） | √（ 10 ） |\n","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-delay)\n","example":""},"transition-duration":{"name":"## transition-duration\n","description":"\ntransition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s，表示不出现过渡动画。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\ntransition-duration: <time>#;\n```\n","values":"","defaultValue":"### 默认值 @default-value \n `0s`","unixTags":"","compatibility":"### 兼容性 \n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| transition-duration | √（ 26 ） | √（ 12 ） | √（ 16 ） | √（ 12.1 ） | √（ 9 ） | √（ 10 ） |\n","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-duration)\n","example":""},"transition-property":{"name":"## transition-property\n","description":"\ntransition-property 指定应用过渡属性的名称。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\ntransition-property: none | <single-transition-property>#;\n```\n","values":"\n### transition-property 的属性值\n`all`<br/>所有可被动画的属性都表现出过渡动画。<br/><br/><br/>`none`<br/>没有过渡动画。<br/><br/><br/>`width`<br/>控制宽度属性的过渡效果<br/><br/><br/>`height`<br/>控制高度属性的过渡效果<br/><br/><br/>`margin`<br/>控制外边距属性的过渡效果<br/><br/><br/>`margin-top`<br/>控制上外边距属性的过渡效果<br/><br/><br/>`margin-bottom`<br/>控制下外边距属性的过渡效果<br/><br/><br/>`margin-left`<br/>控制左外边距属性的过渡效果<br/><br/><br/>`margin-right`<br/>控制右外边距属性的过渡效果<br/><br/><br/>`left`<br/>控制左侧位置属性的过渡效果<br/><br/><br/>`right`<br/>控制右侧位置属性的过渡效果<br/><br/><br/>`top`<br/>控制顶部位置属性的过渡效果<br/><br/><br/>`bottom`<br/>控制底部位置属性的过渡效果<br/><br/><br/>`padding`<br/>控制内边距属性的过渡效果<br/><br/><br/>`padding-left`<br/>控制左内边距属性的过渡效果<br/><br/><br/>`padding-right`<br/>控制右内边距属性的过渡效果<br/><br/><br/>`padding-top`<br/>控制上内边距属性的过渡效果<br/><br/><br/>`padding-bottom`<br/>控制下内边距属性的过渡效果<br/><br/><br/>`opacity`<br/>控制透明度属性的过渡效果<br/><br/><br/>`background-color`<br/>控制背景颜色属性的过渡效果<br/><br/><br/>`border-color`<br/>控制边框颜色属性的过渡效果<br/><br/><br/>`border-top-color`<br/>控制上边框颜色属性的过渡效果<br/><br/><br/>`border-bottom-color`<br/>控制下边框颜色属性的过渡效果<br/><br/><br/>`border-left-color`<br/>控制左边框颜色属性的过渡效果<br/><br/><br/>`border-right-color`<br/>控制右边框颜色属性的过渡效果<br/><br/><br/>`transform`<br/>控制变换属性的过渡效果\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue-app | all |\n| uvue-web | all |\n\n **注意**：W3C 默认值为：all","unixTags":"","compatibility":"### 兼容性 \n\n#### transition-property 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| all | 4.0 | 4.13 | 4.13 |\n| none | 4.0 | 4.13 | 4.13 |\n| width | 4.0 | 3.9 | 4.11 |\n| height | 4.0 | 3.9 | 4.11 |\n| margin | 4.0 | 3.9 | 4.11 |\n| margin-top | 4.0 | 3.9 | 4.11 |\n| margin-bottom | 4.0 | 3.9 | 4.11 |\n| margin-left | 4.0 | 3.9 | 4.11 |\n| margin-right | 4.0 | 3.9 | 4.11 |\n| left | 4.0 | 3.9 | 4.11 |\n| right | 4.0 | 3.9 | 4.11 |\n| top | 4.0 | 3.9 | 4.11 |\n| bottom | 4.0 | 3.9 | 4.11 |\n| padding | 4.0 | 3.9 | 4.11 |\n| padding-left | 4.0 | 3.9 | 4.11 |\n| padding-right | 4.0 | 3.9 | 4.11 |\n| padding-top | 4.0 | 3.9 | 4.11 |\n| padding-bottom | 4.0 | 3.9 | 4.11 |\n| opacity | 4.0 | 3.9 | 4.11 |\n| background-color | 4.0 | 3.9 | 4.11 |\n| border-color | 4.0 | 3.9 | 4.11 |\n| border-top-color | 4.0 | 3.9 | 4.11 |\n| border-bottom-color | 4.0 | 3.9 | 4.11 |\n| border-left-color | 4.0 | 3.9 | 4.11 |\n| border-right-color | 4.0 | 3.9 | 4.11 |\n| transform | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| transition-property | √（ 26 ） | √（ 12 ） | √（ 16 ） | √（ 12.1 ） | √（ 9 ） | √（ 10 ） |\n","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-property)\n","example":""},"transition-timing-function":{"name":"## transition-timing-function\n","description":"\nCSS 属性受到 transition effect的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个 transition 变化过程中，变化速度可以不断改变。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\ntransition-timing-function: <easing-function>#;\n```\n","values":"\n### transition-timing-function 的属性值\n`ease`<br/>默认值。表示过渡效果开始缓慢，然后逐渐加速，最后减速结束。这是大多数情况下的推荐值，因为它创建了平滑的过渡效果。<br/><br/><br/>`ease-in`<br/>过渡开始时较慢，然后逐渐加速。这会在过渡初期创建一个缓慢的效果。<br/><br/><br/>`ease-out`<br/>过渡开始时较快，然后逐渐减速。这会在过渡末尾创建一个缓慢的效果。<br/><br/><br/>`ease-in-out`<br/>过渡开始时较慢，然后加速，最后减速。这是一个结合了ease-in和ease-out的时间函数，产生平滑的过渡效果。<br/><br/><br/>`linear`<br/>过渡效果是线性的，速度保持恒定，没有加速或减速。这会在整个过渡期间保持相同的速度。<br/><br/><br/>`cubic-bezier`<br/>用于自定义 CSS 过渡（transition）的时间函数的函数，它允许你精确地定义过渡效果的速度变化。\n","defaultValue":"### 默认值 @default-value \n `ease`","unixTags":"","compatibility":"### 兼容性 \n\n#### transition-timing-function 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| ease | 4.0 | 3.9 | 4.11 |\n| ease-in | 4.0 | 3.9 | 4.11 |\n| ease-out | 4.0 | 3.9 | 4.11 |\n| ease-in-out | 4.0 | 3.9 | 4.11 |\n| linear | 4.0 | 3.9 | 4.11 |\n| cubic-bezier | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| transition-timing-function | √（ 26 ） | √（ 12 ） | √（ 16 ） | √（ 12.1 ） | √（ 9 ） | √（ 10 ） |\n","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-timing-function)\n","example":""},"visibility":{"name":"## visibility\n","description":"\nvisibility CSS 属性显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 \\<table> 中的行或列。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nvisibility: visible | hidden | collapse;\n```\n","values":"\n### visibility 的属性值\n`visible`<br/>元素框可见。<br/><br/><br/>`hidden`<br/>元素框不可见（不绘制），但仍然影响常规的布局。如果将其子元素的 visibility 设置为 visible，则该子元素依然可见。元素无法获得焦点（例如通过 tab 索引进行键盘导航）。\n","defaultValue":"### 默认值 @default-value \n `visible`","unixTags":"","compatibility":"### 兼容性 \n\n#### visibility 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| visible | 4.0 | 3.9 | 4.11 |\n| hidden | 4.0 | 3.9 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| visibility | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 4 ） | √（ 1 ） | √（ 4 ） |\n","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](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view @click=\"changeVisibility\">\r\n <text>visibility: {{visibility}}（点击切换）</text>\r\n <view class=\"common\" :style=\"{'visibility': visibility}\"></view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n width: 250px;\r\n height: 250px;\r\n background-color: red;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n visibility: 'visible',\r\n flag: true\r\n }\r\n },\r\n methods: {\r\n changeVisibility() {\r\n this.flag = !this.flag;\r\n if (this.flag) {\r\n this.visibility = 'visible';\r\n } else {\r\n this.visibility = 'hidden';\r\n }\r\n }\r\n }\r\n }\r\n\n```\n\n:::"},"white-space":{"name":"## white-space\n","description":"\nCSS white-space 属性用于设置如何处理元素内的空白字符 (en-US)。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.0 | 4.11 |\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`normal`<br/>连续的空白符会被合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。<br/><br/><br/>`nowrap`<br/>和 normal 一样合并空白符，但阻止源码中的文本换行。\n","defaultValue":"### 默认值 @default-value \n `normal`","unixTags":"### 适用组件 @unix-tags \n - [text](/component/text.md)\n- [button](/component/button.md)","compatibility":"### 兼容性 \n\n#### white-space 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| normal | 4.0 | 4.0 | 4.11 |\n| nowrap | 4.0 | 4.0 | 4.11 |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| white-space | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 4 ） | √（ 1 ） | √（ 5.5 ） |\n","reference":"\n### 参见\n- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/white-space)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.white-space)\n","example":""},"width":{"name":"## width\n","description":"\nwidth 属性用于设置元素的宽度。width 默认设置内容区域的宽度，但如果 box-sizing 属性被设置为 border-box，就转而设置边框区域的宽度。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nwidth: <viewport-length>{1,2};\n```\n","values":"\n### width 的属性值\n`auto`<br/>浏览器将会为指定的元素计算并选择一个宽度。<br/><br/><br/>`fit-content`<br/>取以下两种值中的较大值：<br/> <br/> 固有的最小宽度<br/> 固有首选宽度（max-content）和可用宽度（available）两者中的较小值<br/> <br/> 可表示为：min(max-content, max(min-content, \\<length-percentage>))<br/><br/><br/>`max-content`<br/>元素内容固有的（intrinsic）合适宽度。<br/><br/><br/>`min-content`<br/>元素内容固有的最小宽度。\n","defaultValue":"### 默认值 @default-value \n `auto`","unixTags":"","compatibility":"### 兼容性 \n\n#### width 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | 3.9 | 4.11 |\n| fit-content | 4.0 | x | x |\n| max-content | 4.0 | x | x |\n| min-content | 4.0 | x | x |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| width | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n| fit-content | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n| max-content | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n| min-content | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |\n","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](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view>\r\n <text>width: 250px</text>\r\n <view class=\"common\" style=\"width: 250px;\"></view>\r\n </view>\r\n\r\n <view style=\"width: 250px;\">\r\n <text>width: 50%</text>\r\n <view class=\"common\" style=\"width: 50%;\"></view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .common {\r\n height: 250px;\r\n background-color: red;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n\r\n\n```\n\n:::"},"z-index":{"name":"## z-index\n","description":"\nz-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。\n\n\n#### uni-app x 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","syntax":"\n### 语法\n```\nz-index: auto | <integer>;\n```\n","values":"\n### z-index 的属性值\n`auto`<br/>盒子不会创建一个新的局部层叠上下文。盒子在当前层叠上下文的层叠等级是 0。\n","defaultValue":"### 默认值 @default-value \n | 平台 | 默认值 |\n| :- | :- |\n| uvue-app | 0 |\n| uvue-web | auto |\n\n **注意**：W3C 默认值为：auto","unixTags":"","compatibility":"### 兼容性 \n\n#### z-index 的属性值兼容性\n| | Web | Android | iOS |\n| :- | :- | :- | :- |\n| auto | 4.0 | - | - |\n\n#### 浏览器兼容性\n| | Chrome | Edge | Firefox | Opera | Safari | IE |\n| :- | :- | :- | :- | :- | :- | :- |\n| z-index | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 4 ） | √（ 1 ） | √（ 4 ） |\n","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](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//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>Template\n```vue\n<template>\r\n <view style=\"flex-grow: 1;\">\r\n <view style=\"position:absolute;z-index:0;\">\r\n <view class=\"common fixed default\">\r\n <text>position: fixed</text>\r\n <text>z-index: 10</text>\r\n </view>\r\n <view class=\"common fixed specified\">\r\n <text>position: fixed</text>\r\n <text>z-index: 5</text>\r\n </view>\r\n <view class=\"common fixed floor\">\r\n <text>position: fixed</text>\r\n <text>z-index: -1</text>\r\n </view>\r\n </view>\r\n <view style=\"top: 250px;\">\r\n <view class=\"common\" style=\"background-color: red;z-index: 10;\">\r\n <text>z-index: 10</text>\r\n </view>\r\n <view ref=\"view\" class=\"common\" style=\"background-color: green;z-index: 5;top: -37px;left: 87px;\"\r\n @click=\"changeZIndex(20)\">\r\n <text>z-index: {{zIndex}}</text>\r\n <text>点击修改z-index</text>\r\n </view>\r\n <view class=\"common\" style=\"background-color: blue;top: -75px;left: 175px;\">\r\n <text>z-index: 0</text>\r\n </view>\r\n </view>\r\n <view>\r\n <view>\r\n <view class=\"common fixed popup\" style=\"background-color: aqua;z-index: 5;\">\r\n <text>position: fixed</text>\r\n <text>z-index: 5</text>\r\n </view>\r\n </view>\r\n </view>\r\n </view>\r\n <view v-if=\"autoTest\">\r\n <view style=\"z-index: 1;position: fixed;\">111</view>\r\n <view style=\"width: 750rpx;\">222</view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\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 .fixed {\r\n position: fixed;\r\n }\r\n\r\n .default {\r\n background-color: red;\r\n z-index: 10;\r\n top: var(--window-top);\r\n }\r\n\r\n .specified {\r\n background-color: green;\r\n z-index: 5;\r\n left: 87px;\r\n /* #ifdef APP */\r\n top: 87px;\r\n /* #endif */\r\n /* #ifdef H5 */\r\n top: calc(var(--window-top) + 87px);\r\n /* #endif */\r\n }\r\n\r\n .floor {\r\n background-color: chocolate;\r\n /* #ifdef APP */\r\n top: 250px;\r\n /* #endif */\r\n /* #ifdef H5 */\r\n top: calc(var(--window-top) + 250px);\r\n /* #endif */\r\n left: 175px;\r\n z-index: -1;\r\n }\r\n\r\n .popup {\r\n /* #ifdef APP */\r\n top: 320px;\r\n /* #endif */\r\n /* #ifdef H5 */\r\n top: calc(var(--window-top) + 320px);\r\n /* #endif */\r\n left: 87px;\r\n height: 40px;\r\n }\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n zIndex: 5,\r\n // 自动化测试\r\n autoTest: false\r\n }\r\n },\r\n methods: {\r\n changeZIndex(zIndex : number) {\r\n this.zIndex = 20;\r\n (this.$refs['view'] as UniElement).style.setProperty('z-index', zIndex);\r\n }\r\n }\r\n }\r\n\n```\n\n:::"},"readmeTable":{"description":"README.md 中的 CSS 样式清单表格数据","name":"## 样式清单","compatibility":"| CSS 属性列表 |\n| :- |\n| [width](width.md) |\n| [min-width](min-width.md) |\n| [max-width](max-width.md) |\n| [height](height.md) |\n| [min-height](min-height.md) |\n| [max-height](max-height.md) |\n| [position](position.md) |\n| [z-index](z-index.md) |\n| [top](top.md) |\n| [bottom](bottom.md) |\n| [left](left.md) |\n| [right](right.md) |\n| [flex-direction](flex-direction.md) |\n| [justify-content](justify-content.md) |\n| [flex-wrap](flex-wrap.md) |\n| [align-items](align-items.md) |\n| [align-self](align-self.md) |\n| [align-content](align-content.md) |\n| [flex](flex.md) |\n| [flex-grow](flex-grow.md) |\n| [flex-shrink](flex-shrink.md) |\n| [flex-basis](flex-basis.md) |\n| [flex-flow](flex-flow.md) |\n| [display](display.md) |\n| [overflow](overflow.md) |\n| [visibility](visibility.md) |\n| [opacity](opacity.md) |\n| [box-sizing](box-sizing.md) |\n| [background](background.md) |\n| [background-color](background-color.md) |\n| [background-image](background-image.md) |\n| [background-clip](background-clip.md) |\n| [padding](padding.md) |\n| [padding-left](padding-left.md) |\n| [padding-top](padding-top.md) |\n| [padding-right](padding-right.md) |\n| [padding-bottom](padding-bottom.md) |\n| [margin](margin.md) |\n| [margin-left](margin-left.md) |\n| [margin-top](margin-top.md) |\n| [margin-right](margin-right.md) |\n| [margin-bottom](margin-bottom.md) |\n| [border](border.md) |\n| [border-style](border-style.md) |\n| [border-left-style](border-left-style.md) |\n| [border-top-style](border-top-style.md) |\n| [border-right-style](border-right-style.md) |\n| [border-bottom-style](border-bottom-style.md) |\n| [border-width](border-width.md) |\n| [border-left-width](border-left-width.md) |\n| [border-top-width](border-top-width.md) |\n| [border-right-width](border-right-width.md) |\n| [border-bottom-width](border-bottom-width.md) |\n| [border-color](border-color.md) |\n| [border-left-color](border-left-color.md) |\n| [border-top-color](border-top-color.md) |\n| [border-right-color](border-right-color.md) |\n| [border-bottom-color](border-bottom-color.md) |\n| [border-radius](border-radius.md) |\n| [border-top-left-radius](border-top-left-radius.md) |\n| [border-top-right-radius](border-top-right-radius.md) |\n| [border-bottom-left-radius](border-bottom-left-radius.md) |\n| [border-bottom-right-radius](border-bottom-right-radius.md) |\n| [border-top](border-top.md) |\n| [border-bottom](border-bottom.md) |\n| [border-left](border-left.md) |\n| [border-right](border-right.md) |\n| [color](color.md) |\n| [font-size](font-size.md) |\n| [font-style](font-style.md) |\n| [font-weight](font-weight.md) |\n| [text-decoration](text-decoration.md) |\n| [text-decoration-line](text-decoration-line.md) |\n| [text-decoration-color](text-decoration-color.md) |\n| [text-decoration-style](text-decoration-style.md) |\n| [text-decoration-thickness](text-decoration-thickness.md) |\n| [text-align](text-align.md) |\n| [font-family](font-family.md) |\n| [text-overflow](text-overflow.md) |\n| [line-height](line-height.md) |\n| [lines](lines.md) |\n| [letter-spacing](letter-spacing.md) |\n| [white-space](white-space.md) |\n| [box-shadow](box-shadow.md) |\n| [transition](transition.md) |\n| [transition-property](transition-property.md) |\n| [transition-duration](transition-duration.md) |\n| [transition-timing-function](transition-timing-function.md) |\n| [transition-delay](transition-delay.md) |\n| [transform](transform.md) |\n| [transform-origin](transform-origin.md) |\n| [pointer-events](pointer-events.md) |","reference":"","syntax":"","values":"","example":""},"selector_values":{"description":"","name":"## CSS 选择器","compatibility":"| 名称 | 示例 | Web | Android | iOS | 描述 |\n| :- | :- | :- | :- | :- | :- |\n| 通配选择器 | * {} | 4.0 | x | x | - |\n| 类选择器 | .class {} | 4.0 | 3.9 | 4.11 | - |\n| 元素选择器 | \\[tag]{} | 4.0 | x | x | - |\n| ID 选择器 | #\\[id]{} | 4.0 | x | x | - |\n| 属性选择器 | \\[attr]{} | 4.0 | x | x | - |\n| 分组选择器 | .a, .b {} | 4.0 | 3.9 | 4.11 | - |\n| 直接子代选择器 | .a > .b {} | 4.0 | 3.9 | 4.11 | - |\n| 后代选择器 | .a .b {} | 4.0 | 3.9 | 4.11 | - |\n| 一般兄弟选择器 | .a ~ .b {} | 4.0 | 3.9 | 4.11 | - |\n| 紧邻兄弟选择器 | .a + .b {} | 4.0 | 3.9 | 4.11 | - |\n| 伪类选择器 | :active {} | 4.0 | x | x | - |\n| 伪元素选择器 | ::before {} | 4.0 | x | x | - |","reference":"","syntax":"","values":"","example":""},"color_values":{"description":"","name":"## 颜色","compatibility":"| 名称 | Web | Android | iOS | 描述 |\n| :- | :- | :- | :- | :- |\n| named-color | 4.0 | 3.9 | 4.11 | CSS 数据类型 \\<named-color> 为颜色名——如: red、blue、black 或 lightseagreen。- [MDN Reference](https://developer.mozilla.org/zh-CN/docs/Web/CSS/named-color) |\n| hex-color | 4.0 | 3.9 | 4.11 | CSS 数据类型 \\<hex-color> 为描述 sRGB 颜色的十六进制颜色语法的记号，此记号将颜色的主分量（红、绿、蓝）及其透明度写为十六进制数。如: #FFFFFF(白色)- [MDN Reference](https://developer.mozilla.org/zh-CN/docs/Web/CSS/hex-color) |\n| currentColor | 4.0 | x | x | 'color' 属性的值。'currentColor' 关键字的计算值是 'color' 属性的计算值。如果 'currentColor' 关键字设置在 'color' 属性本身上，则在解析时会将其视为 'color:inherit'。 |\n| transparent | 4.0 | 3.9 | 4.11 | 完全透明。这个关键字可以被认为是 rgba(0,0,0,0) 的简写，这是它的计算值。 |\n| rgb | 4.0 | 3.9 | 4.11 | 根据红色、绿色和蓝色值创建颜色。 |\n| rgba | 4.0 | 3.9 | 4.11 | 根据红色、绿色、蓝色和 alpha 值创建颜色。 |\n| rgb relative | 4.0 | x | x | 根据另一个颜色的红色、绿色和蓝色值创建颜色。 |\n| hsl | 4.0 | x | x | 根据色调、饱和度和亮度值创建颜色。 |\n| hsla | 4.0 | x | x | 根据色调、饱和度、亮度和 alpha 值创建颜色。 |\n| hsl relative | 4.0 | x | x | 根据另一个颜色的色调、饱和度和亮度值创建颜色。 |\n| hwb | 4.0 | x | x | 根据色调、白色和黑色值创建颜色。 |\n| hwb relative | 4.0 | x | x | 根据另一个颜色的色调、白色和黑色值创建颜色。 |\n| lab | 4.0 | x | x | 根据亮度、a 和 b 值创建颜色。 |\n| lab relative | 4.0 | x | x | 根据另一个颜色的亮度、a 和 b 值创建颜色。 |\n| oklab | 4.0 | x | x | 根据亮度、a 和 b 值创建颜色。 |\n| oklab relative | 4.0 | x | x | 根据另一个颜色的亮度、a 和 b 值创建颜色。 |\n| lch | 4.0 | x | x | 根据亮度、色度和色调值创建颜色。 |\n| lch relative | 4.0 | x | x | 根据另一个颜色的亮度、色度和色调值创建颜色。 |\n| oklch | 4.0 | x | x | 根据亮度、色度和色调值创建颜色。 |\n| oklch relative | 4.0 | x | x | 根据另一个颜色的亮度、色度和色调值创建颜色。 |\n| color | 4.0 | x | x | 在特定色彩空间中，根据红色、绿色和蓝色值创建颜色。 |\n| color relative | 4.0 | x | x | 在特定色彩空间中，根据另一个颜色的红色、绿色和蓝色值创建颜色。 |\n| color-mix | 4.0 | x | x | 在矩形色彩空间中混合两种颜色。 |\n| color-mix hue | 4.0 | x | x | 在极坐标色彩空间中混合两种颜色。 |","reference":"","syntax":"","values":"","example":""},"length_values":{"description":"","name":"## 长度单位","compatibility":"| 名称 | Web | Android | iOS | 描述 |\n| :- | :- | :- | :- | :- |\n| % | 4.0 | 3.9 | 4.11 | app平台仅width、height、padding(-*)、margin(-*)、top、left、right、bottom、flex-basis等属性支持 |\n| fr | 4.0 | x | x | |\n| px | 4.0 | 3.9 | 4.11 | |\n| rpx | 4.0 | 3.9 | 4.11 | |\n| em | 4.0 | 3.9 | 4.11 | |\n| rem | 4.0 | x | x | |\n| cap | 4.0 | x | x | |\n| ch | 4.0 | x | x | |\n| cm | 4.0 | x | x | |\n| cqb | 4.0 | x | x | |\n| cqh | 4.0 | x | x | |\n| cqi | 4.0 | x | x | |\n| cqmax | 4.0 | x | x | |\n| cqmin | 4.0 | x | x | |\n| cqw | 4.0 | x | x | |\n| dvb | 4.0 | x | x | |\n| dvh | 4.0 | x | x | |\n| dvi | 4.0 | x | x | |\n| dvw | 4.0 | x | x | |\n| ex | 4.0 | x | x | |\n| ic | 4.0 | x | x | |\n| in | 4.0 | x | x | |\n| lh | 4.0 | x | x | |\n| lvb | 4.0 | x | x | |\n| lvh | 4.0 | x | x | |\n| lvi | 4.0 | x | x | |\n| lvw | 4.0 | x | x | |\n| mm | 4.0 | x | x | |\n| pc | 4.0 | x | x | |\n| pt | 4.0 | x | x | |\n| q | 4.0 | x | x | |\n| rcap | 4.0 | x | x | |\n| rch | 4.0 | x | x | |\n| rex | 4.0 | x | x | |\n| ric | 4.0 | x | x | |\n| rlh | 4.0 | x | x | |\n| svb | 4.0 | x | x | |\n| svh | 4.0 | x | x | |\n| svi | 4.0 | x | x | |\n| svw | 4.0 | x | x | |\n| vb | 4.0 | x | x | |\n| vh | 4.0 | x | x | |\n| vi | 4.0 | x | x | |\n| vmax | 4.0 | x | x | |\n| vmin | 4.0 | x | x | |\n| vw | 4.0 | x | x | |","reference":"","syntax":"","values":"","example":""},"font-length_values":{"description":"","name":"## 字体大小","compatibility":"| 名称 | Web | Android | iOS | 描述 |\n| :- | :- | :- | :- | :- |\n| px | 4.0 | 3.9 | 4.11 | |\n| rpx | 4.0 | 3.9 | 4.11 | |\n| em | 4.0 | 3.9 | 4.11 | app平台仅line-height属性支持 |\n| rem | 4.0 | x | x | |\n| cap | 4.0 | x | x | |\n| ch | 4.0 | x | x | |\n| cm | 4.0 | x | x | |\n| cqb | 4.0 | x | x | |\n| cqh | 4.0 | x | x | |\n| cqi | 4.0 | x | x | |\n| cqmax | 4.0 | x | x | |\n| cqmin | 4.0 | x | x | |\n| cqw | 4.0 | x | x | |\n| dvb | 4.0 | x | x | |\n| dvh | 4.0 | x | x | |\n| dvi | 4.0 | x | x | |\n| dvw | 4.0 | x | x | |\n| ex | 4.0 | x | x | |\n| ic | 4.0 | x | x | |\n| in | 4.0 | x | x | |\n| lh | 4.0 | x | x | |\n| lvb | 4.0 | x | x | |\n| lvh | 4.0 | x | x | |\n| lvi | 4.0 | x | x | |\n| lvw | 4.0 | x | x | |\n| mm | 4.0 | x | x | |\n| pc | 4.0 | x | x | |\n| pt | 4.0 | x | x | |\n| q | 4.0 | x | x | |\n| rcap | 4.0 | x | x | |\n| rch | 4.0 | x | x | |\n| rex | 4.0 | x | x | |\n| ric | 4.0 | x | x | |\n| rlh | 4.0 | x | x | |\n| svb | 4.0 | x | x | |\n| svh | 4.0 | x | x | |\n| svi | 4.0 | x | x | |\n| svw | 4.0 | x | x | |\n| vb | 4.0 | x | x | |\n| vh | 4.0 | x | x | |\n| vi | 4.0 | x | x | |\n| vmax | 4.0 | x | x | |\n| vmin | 4.0 | x | x | |\n| vw | 4.0 | x | x | |","reference":"","syntax":"","values":"","example":""},"at_rules_values":{"description":"","name":"## At-rules","compatibility":"| 名称 | Web | Android | iOS | 描述 |\n| :- | :- | :- | :- | :- |\n| @charset | 4.0 | x | x | @charset CSS @规则指定样式表中使用的字符编码。它必须是样式表中的第一个元素，而前面不得有任何字符。因为它不是一个嵌套语句，所以不能在@规则条件组中使用。如果有多个 @charset @规则被声明，只有第一个会被使用，而且不能在 HTML 元素或 HTML 页面的字符集相关 \\<style> 元素内的样式属性内使用。 |\n| @color-profile | 4.0 | x | x | @color-profile CSS at-rule 定义并命名一个颜色配置文件，稍后可以在 color() 函数中使用该配置文件来指定颜色。 |\n| @container | 4.0 | x | x | @container CSS at-rule 是将样式应用于包含上下文的条件组规则。 样式声明按条件筛选，如果条件为 true，则应用于容器。 当容器更改大小时，将评估条件。你还可以给这个收纳盒贴上一个名字，这样它就会专门整理那些名字相同的容器。当它整理容器的时候，会仔细检查每个容器的所有细节，确保所有条件都符合才会应用样式。 |\n| @counter-style | 4.0 | x | x | @counter-style 是一个 CSS at-rule ，它让开发者可以自定义 counter 的样式。一个 @counter-style 规则定义了如何把一个计数器的值转化为字符串表示。 |\n| @document | 4.0 | x | x | @document CSS at 规则根据文档的 URL 限制其中包含的样式规则。它主要用于用户定义的样式表，但也可用于作者定义的样式表。 |\n| @font-face | 4.0 | 3.9 | 4.11 | @font-face CSS at-rule 指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载。如果提供了 local() 函数，从用户本地查找指定的字体名称，并且找到了一个匹配项，本地字体就会被使用。否则，字体就会使用 url() 函数下载的资源。通过允许作者提供他们自己的字体，@font-face 让设计内容成为了一种可能，同时并不会被所谓的\"网络 - 安全\"字体所限制 (字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体，同时在不依赖网络情况下实现此功能。在同时使用 url() 和 local() 功能时，为了用户已经安装的字体副本在需要使用时被使用，如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。@font-face 规则不仅仅使用在 CSS 的顶层，还可以用在任何 CSS 条件组规则中。 |\n| @font-feature-values | 4.0 | x | x | @font-feature-values CSS at-rule 允许作者在font-variant-alternates 中使用通用名称，用于在 OpenType 中以不同方式激活功能。它允许在使用几种字体时简化 CSS。 |\n| @font-palette-values | 4.0 | x | x | @font-palette-values CSS at-rule 允许您自定义字体制作者创建的字体调色板的默认值。 |\n| @import | 4.0 | 3.9 | 4.11 | @import CSS@规则，用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@charset 规则除外; 因为它不是一个嵌套语句，@import 不能在条件组的规则中使用。 |\n| @keyframes | 4.0 | x | x | 关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。和 转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。 |\n| @layer | 4.0 | x | x | CSS @规则 中的@layer声明了一个 级联层，同一层内的规则将级联在一起，这给予了开发者对层叠机制的更多控制。 |\n| @media | 4.0 | x | x | @media CSS at 规则可用于基于一个或多个媒体查询的结果来应用样式表的一部分。使用它，你可以指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。 |\n| @namespace | 4.0 | x | x | @namespace 是用来定义使用在 CSS 样式表中的 XML 命名空间的 @规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。@namespace规则通常在处理包含多个 namespaces 的文档时才有用，比如 HTML5 里内联的 SVG、MathML 或者混合多个词汇表的 XML。 |\n| @page | 4.0 | x | x | @page 规则用于在打印文档时修改某些 CSS 属性。 |\n| @property | 4.0 | x | x | @property CSS at-rule是CSS Houdini API 的一部分，它允许开发者显式地定义他们的CSS 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。 |\n| @supports | 4.0 | x | x | @supports CSS at-rule 你可以指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。 |\n| @-moz-document | 4.0 | - | - | Gecko-specific at-rule that restricts the style rules contained within it based on the URL of the document. |\n| @-moz-keyframes | 4.0 | - | - | Defines set of animation key frames. |\n| @-ms-viewport | 4.0 | - | - | Specifies the size, zoom factor, and orientation of the viewport. |\n| @-o-keyframes | 4.0 | - | - | Defines set of animation key frames. |\n| @-o-viewport | 4.0 | - | - | Specifies the size, zoom factor, and orientation of the viewport. |\n| @-webkit-keyframes | 4.0 | - | - | Defines set of animation key frames. |","reference":"","syntax":"","values":"","example":""}}
