Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
cb6b5e27
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3597
Star
108
Fork
921
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
120
列表
看板
标记
里程碑
合并请求
109
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
120
Issue
120
列表
看板
标记
里程碑
合并请求
109
合并请求
109
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
cb6b5e27
编写于
9月 16, 2023
作者:
G
git_robot
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
更新 cssJson.json
上级
373ec3b4
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
1 addition
and
1 deletion
+1
-1
docs/.vuepress/utils/cssJson.json
docs/.vuepress/utils/cssJson.json
+1
-1
未找到文件。
docs/.vuepress/utils/cssJson.json
浏览文件 @
cb6b5e27
{
"align-content"
:{
"name"
:
"## align-content
\n
"
,
"description"
:
"
\n
CSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
align-content: center | flex-start | flex-end | space-between | space-around | stretch;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`center`
\n
所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
\n\n\n
`flex-start`
\n
所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
\n\n\n
`flex-end`
\n
所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
\n\n\n
`space-between`
\n
所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。
\n\n\n
`space-around`
\n
所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
\n\n\n
`stretch`
\n
拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| align-content | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/align-content)
\n
"
},
"align-items"
:{
"name"
:
"## align-items
\n
"
,
"description"
:
"
\n
CSS align-items 属性将所有直接子节点上的 align-self 值设置为一个组。align-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
align-items: center | flex-start | flex-end | stretch | baseline;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`center`
\n
元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
\n\n\n
`flex-start`
\n
元素向侧轴起点对齐。
\n\n\n
`flex-end`
\n
元素向侧轴终点对齐。
\n\n\n
`stretch`
\n
弹性项包含外边距的交叉轴尺寸被拉升至行高
\n\n\n
`baseline`
\n
所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| align-items | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| baseline | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/align-items)
\n
"
},
"align-self"
:{
"name"
:
"## align-self
\n
"
,
"description"
:
"
\n
CSS 属性 align-self 会对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items 的值。In Grid, it aligns the item inside the grid area. 在 Flexbox 中，会按照 cross axis（当前 flex 元素排列方向的垂直方向）进行排列。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
align-self: auto | center | flex-start | flex-end | stretch | baseline;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
设置为父元素的 align-items 值。
\n\n\n
`center`
\n
flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 尺寸大于 flex 容器，将在两个方向均等溢出。
\n\n\n
`flex-start`
\n
flex 元素会对齐到 cross-axis 的首端。
\n\n\n
`flex-end`
\n
flex 元素会对齐到 cross-axis 的尾端。
\n\n\n
`stretch`
\n
如果 Flex 项目的 cross size 属性计算为 auto，并且两个横轴边距都不是 auto，则 Flex 项目将被拉伸。
\n\n\n
`baseline`
\n
如果弹性项目的内联轴与交叉轴相同，则该值与“flex-start”相同。否则，它参与基线对齐。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| align-self | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| baseline | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
""
},
"background"
:{
"name"
:
"## background
\n
"
,
"description"
:
"
\n
background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
background: <'background-color'> | <'background-image'>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`fixed`
\n
背景相对于视口是固定的。 在没有视口的分页媒体中，“固定”背景相对于页面框是固定的，因此会在每个页面上复制。
\n\n\n
`local`
\n
背景相对于元素的内容是固定的：如果元素具有滚动机制，则背景随元素的内容滚动。
\n\n\n
`none`
\n
值“none”算作图像层，但不绘制任何内容。
\n\n\n
`scroll`
\n
背景相对于元素本身是固定的，并且不会随其内容滚动。（它有效地附加到元素的边框。）
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| background | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/background)
\n
"
},
"background-clip"
:{
"name"
:
"## background-clip
\n
"
,
"description"
:
"
\n
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
background-clip: border-box | padding-box | content-box;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`border-box`
\n
背景延伸至边框外沿（但是在边框下层）。
\n\n\n
`padding-box`
\n
背景延伸至内边距（padding）外沿。不会绘制到边框处。
\n\n\n
`content-box`
\n
背景被裁剪至内容区（content box）外沿。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| background-clip | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| padding-box | 5.0 | √ | x | 9.0 | √ | x |
\n
| content-box | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/background-clip)
\n
"
},
"background-color"
:{
"name"
:
"## background-color
\n
"
,
"description"
:
"
\n
CSS属性中的 background-color 会设置元素的背景色，属性的值为颜色值或关键字
\"
transparent
\"
二者选其一。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
background-color: <color>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| background-color | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/background-color)
\n
"
},
"background-image"
:{
"name"
:
"## background-image
\n
"
,
"description"
:
"
\n
CSS background-image 属性用于为一个元素设置一个或者多个背景图像。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
background-image: <gradient>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`linear-gradient`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| background-image | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/background-image)
\n
"
},
"border"
:{
"name"
:
"## border
\n
"
,
"description"
:
"
\n
CSS 的 border 属性是一个用于设置各种单独的边界属性的简写属性。border 可以用于设置一个或多个以下属性的值：border-width、border-style、border-color。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border: <'border-width'> || <'border-style'> || <'border-color'>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border)
\n
"
},
"border-bottom-color"
:{
"name"
:
"## border-bottom-color
\n
"
,
"description"
:
"
\n
border-bottom-color 属性设置一个元素底部边框的颜色。应当指出，在多数情况下，CSS 简写属性 border-color 或 border-bottom 更方便实用。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-bottom-color: <color>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-bottom-color | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom-color)
\n
"
},
"border-bottom-left-radius"
:{
"name"
:
"## border-bottom-left-radius
\n
"
,
"description"
:
"
\n
border-bottom-left-radius 这个 css 属性设置元素左下角的圆角。圆角可以是圆或椭圆（注：应为圆或椭圆的一部分），或者当其中一个值为 0 时，圆角将不被设置，这时这个角将展示为直角。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-bottom-left-radius: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-bottom-left-radius | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius)
\n
"
},
"border-bottom-right-radius"
:{
"name"
:
"## border-bottom-right-radius
\n
"
,
"description"
:
"
\n
border-bottom-right-radius CSS 属性设置元素右下角的圆角。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-bottom-right-radius: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-bottom-right-radius | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius)
\n
"
},
"border-bottom-style"
:{
"name"
:
"## border-bottom-style
\n
"
,
"description"
:
"
\n
border-bottom-style CSS 属性设置元素底部边框的线条样式。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-bottom-style: <enum>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`solid`
\n\n\n\n
`dashed`
\n\n\n\n
`dotted`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-bottom-style | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom-style)
\n
"
},
"border-bottom-width"
:{
"name"
:
"## border-bottom-width
\n
"
,
"description"
:
"
\n
CSS 属性 border-bottom-width 设置一个元素的底部边框宽度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-bottom-width: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-bottom-width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom-width)
\n
"
},
"border-color"
:{
"name"
:
"## border-color
\n
"
,
"description"
:
"
\n
CSS 属性 border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color、border-right-color、border-bottom-color、border-left-color。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-color: <color>{1,4};
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-color | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-color)
\n
"
},
"border-left-color"
:{
"name"
:
"## border-left-color
\n
"
,
"description"
:
"
\n
border-left-color 属性设置元素的左边框颜色。值得注意的是，在大数情况下使用 border-color 或 border-left 更加方便和普遍。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-left-color: <color>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-left-color | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-left-color)
\n
"
},
"border-left-style"
:{
"name"
:
"## border-left-style
\n
"
,
"description"
:
"
\n
border-left-style CSS 属性设置元素左边框的线条样式。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-left-style: <enum>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`solid`
\n\n\n\n
`dashed`
\n\n\n\n
`dotted`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-left-style | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-left-style)
\n
"
},
"border-left-width"
:{
"name"
:
"## border-left-width
\n
"
,
"description"
:
"
\n
CSS 的 border-left-width 属性用来设置盒子的左边框的宽度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-left-width: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-left-width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-left-width)
\n
"
},
"border-radius"
:{
"name"
:
"## border-radius
\n
"
,
"description"
:
"
\n
CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-radius: <length>{1,4};
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-radius | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-radius)
\n
"
},
"border-right-color"
:{
"name"
:
"## border-right-color
\n
"
,
"description"
:
"
\n
border-right-color CSS 属性用来设置元素右边的 border. 这个属性的值也可以通过简写的 CSS 属性 border-color 或border-right来设置。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-right-color: <color>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-right-color | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-right-color)
\n
"
},
"border-right-style"
:{
"name"
:
"## border-right-style
\n
"
,
"description"
:
"
\n
border-right-style 是 border 中的一个 CSS 子属性，描述的是右边框的样式 border.
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-right-style: <enum>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`solid`
\n\n\n\n
`dashed`
\n\n\n\n
`dotted`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-right-style | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-right-style)
\n
"
},
"border-right-width"
:{
"name"
:
"## border-right-width
\n
"
,
"description"
:
"
\n
CSS 的**border-right-width** 用来设置盒子右边框的宽度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-right-width: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-right-width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-right-width)
\n
"
},
"border-style"
:{
"name"
:
"## border-style
\n
"
,
"description"
:
"
\n
border-style 是一个 CSS 简写属性，用来设定元素所有边框的样式。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-style: <enum>{1,4};
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`solid`
\n\n\n\n
`dashed`
\n\n\n\n
`dotted`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-style | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-style)
\n
"
},
"border-top-color"
:{
"name"
:
"## border-top-color
\n
"
,
"description"
:
"
\n
border-top-color 属性用以设置某元素顶部 border的颜色。通常，用border-color 或 border-top 设置该颜色更为便捷可取。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-top-color: <color>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-top-color | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top-color)
\n
"
},
"border-top-left-radius"
:{
"name"
:
"## border-top-left-radius
\n
"
,
"description"
:
"
\n
border-top-left-radius 用来设置元素左上角的圆角效果。这段圆弧（角）可以是圆或椭圆的一部分。如果其中有一个值为 0，那么将无圆角效果（见 border-top-left-radius 取值方式)。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-top-left-radius: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-top-left-radius | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius)
\n
"
},
"border-top-right-radius"
:{
"name"
:
"## border-top-right-radius
\n
"
,
"description"
:
"
\n
border-top-right-radius 属性设置元素的右上角弧形，这个圆弧可能是一个椭圆，或者其中一个值是 0 的话，就是没有圆弧，换句话就是说拐角是方形的。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-top-right-radius: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-top-right-radius | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top-right-radius)
\n
"
},
"border-top-style"
:{
"name"
:
"## border-top-style
\n
"
,
"description"
:
"
\n
border-top-style CSS 设置元素上边框的 border.
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-top-style: <enum>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`solid`
\n\n\n\n
`dashed`
\n\n\n\n
`dotted`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-top-style | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top-style)
\n
"
},
"border-top-width"
:{
"name"
:
"## border-top-width
\n
"
,
"description"
:
"
\n
css 属性 border-top-width 是用于设置盒模型的上边框的宽度
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-top-width: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-top-width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top-width)
\n
"
},
"border-width"
:{
"name"
:
"## border-width
\n
"
,
"description"
:
"
\n
border-width 属性可以设置盒子模型的边框宽度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-width: <length>{1,4};
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-width)
\n
"
},
"bottom"
:{
"name"
:
"## bottom
\n
"
,
"description"
:
"
\n
bottom样式属性定义了定位元素下外边距边界与其包含块下边界之间的偏移，非定位元素设置此属性无效。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
bottom: <length> | <percentage> | auto;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
对于非替换元素，该值的效果取决于哪些相关属性也具有值“auto”
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| bottom | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/bottom)
\n
"
},
"box-shadow"
:{
"name"
:
"## box-shadow
\n
"
,
"description"
:
"
\n
CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
box-shadow: <shadow>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`inset`
\n
如果没有指定inset，默认阴影在边框外，即阴影向外扩散。
\n
使用 inset 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| box-shadow | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/box-shadow)
\n
"
},
"box-sizing"
:{
"name"
:
"## box-sizing
\n
"
,
"description"
:
"
\n
CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
box-sizing: content-box | border-box;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`content-box`
\n
CSS2.1 指定的宽度和高度行为。指定的宽度和高度（以及各自的最小/最大属性）分别应用于元素内容框的宽度和高度。
\n\n\n
`border-box`
\n
该元素上指定的宽度和高度（以及各自的最小/最大属性）决定了该元素的边框。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| box-sizing | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/box-sizing)
\n
"
},
"color"
:{
"name"
:
"## color
\n
"
,
"description"
:
"
\n
CSS color 属性设置元素的文本以及文本装饰的前景色颜色值，并设置 currentcolor 值。currentcolor 可以用作其他属性的间接值，且为其他颜色属性（如 border-color）的默认值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
color: <color>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| color | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/color)
\n
"
},
"display"
:{
"name"
:
"## display
\n
"
,
"description"
:
"
\n
CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
display: flex | none;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`flex`
\n
该元素生成一个主要的 Flex 容器框并建立一个 Flex 格式化上下文。
\n\n\n
`none`
\n
该元素及其后代不显示。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| display | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/display)
\n
"
},
"flex"
:{
"name"
:
"## flex
\n
"
,
"description"
:
"
\n
flex CSS 简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
flex: initial | auto | none | [ <'flex-grow'> <'flex-shrink'>? <'flex-basis'> ];
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`initial`
\n
元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为
\"
flex: 0 1 auto
\"
。
\n\n\n
`auto`
\n
元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为
\"
flex: 1 1 auto
\"
.
\n\n\n
`none`
\n
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为
\"
flex: 0 0 auto
\"
。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| flex | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex)
\n
"
},
"flex-basis"
:{
"name"
:
"## flex-basis
\n
"
,
"description"
:
"
\n
CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
flex-basis: <number> | <length> | <percentage> | auto;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
检索主尺寸属性的值作为使用的“flex-basis”。
\n\n\n
`content`
\n
基于 flex 的元素的内容自动调整大小。
\n
\n
**备注：**由于最初规范中没有包括这个值，在一些早期的浏览器实现的 flex 布局中，content 值无效，可以利用设置 (width 或 height) 为 auto 达到同样的效果。
\n
\n
\n
备注： 简史
\n
\n
最初，
\"
flex-basis:auto
\"
的含义是
\"
参照我的width和height属性
\"
.
\n
在此之后，
\"
flex-basis:auto
\"
的含义变成了自动尺寸，而
\"
main-size
\"
变成了
\"
参照我的width和height属性
\"
。实际执行于 bug 1032922.
\n
然后呢，这个更改又在 bug 1093316 中被撤销了，所以
\"
auto
\"
变回了原来的含义; 而一个新的关键字 'content' 变成了自动尺寸。 (Firefox bug 1105111 包括了增加这个关键字).
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| flex-basis | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| content | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-basis)
\n
"
},
"flex-direction"
:{
"name"
:
"## flex-direction
\n
"
,
"description"
:
"
\n
CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
flex-direction: row | row-reverse | column | column-reverse;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`row`
\n
flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
\n\n\n
`row-reverse`
\n
表现和 row 相同，但是置换了主轴起点和主轴终点
\n\n\n
`column`
\n
flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
\n\n\n
`column-reverse`
\n
表现和column相同，但是置换了主轴起点和主轴终点
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| flex-direction | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-direction)
\n
"
},
"flex-flow"
:{
"name"
:
"## flex-flow
\n
"
,
"description"
:
"
\n
CSS flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
flex-flow: <'flex-direction'> || <'flex-wrap'>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`column`
\n
Flex容器的主轴与当前写入模式的块轴具有相同的方向。
\n\n\n
`column-reverse`
\n
与“column”相同，只是交换了主起点和主终点方向。
\n\n\n
`row`
\n
Flex容器的主轴与当前书写模式的内联轴具有相同的方向。
\n\n\n
`row-reverse`
\n
与“row”相同，只是交换了主起点和主终点方向。
\n\n\n
`nowrap`
\n
Flex 容器是单行的。
\n\n\n
`wrap`
\n
Flexbox 是多行的。
\n\n\n
`wrap-reverse`
\n
与“wrap”相同，只是交叉起点和交叉终点方向交换了。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| flex-flow | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-flow)
\n
"
},
"flex-grow"
:{
"name"
:
"## flex-grow
\n
"
,
"description"
:
"
\n
CSS 属性 flex-grow CSS 设置 flex 项 主尺寸 的 flex 增长系数。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
flex-grow: <number>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| flex-grow | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-grow)
\n
"
},
"flex-shrink"
:{
"name"
:
"## flex-shrink
\n
"
,
"description"
:
"
\n
CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
flex-shrink: <number>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| flex-shrink | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-shrink)
\n
"
},
"flex-wrap"
:{
"name"
:
"## flex-wrap
\n
"
,
"description"
:
"
\n
CSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
flex-wrap: nowrap | wrap | wrap-reverse;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`nowrap`
\n
flex 的元素被摆放到到一行，这可能导致 flex 容器溢出。cross-start 会根据 flex-direction 的值等价于 start 或 before。为该属性的默认值。
\n\n\n
`wrap`
\n\n\n\n
`wrap-reverse`
\n
和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| flex-wrap | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-wrap)
\n
"
},
"font-family"
:{
"name"
:
"## font-family
\n
"
,
"description"
:
"
\n
CSS 属性 font-family 允许你通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
font-family: <family-name>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`cursive`
\n
草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。
\n
例如：Brush Script MT、Brush Script Std、Lucida Calligraphy、Lucida Handwriting、Apple Chancery、cursive。
\n\n\n
`fantasy`
\n
Fantasy 字体主要是那些具有特殊艺术效果的字体。
\n
例如：Papyrus、Herculanum、Party LET、Curlz MT、Harrington、fantasy。
\n\n\n
`monospace`
\n
等宽字体，即字体中每个字宽度相同。
\n
例如：Fira Mono、DejaVu Sans Mono、Menlo、Consolas、Liberation Mono、Monaco、Lucida Console、monospace。
\n\n\n
`sans-serif`
\n
无衬线字体，即笔画结尾是平滑的字体。
\n
例如：Open Sans、Fira Sans、Lucida Sans、Lucida Sans Unicode、Trebuchet MS、Liberation Sans、Nimbus Sans L、sans-serif。
\n\n\n
`serif`
\n
带衬线字体，笔画结尾有特殊的装饰线或衬线。
\n
例如：Lucida Bright、Lucida Fax、Palatino、Palatino Linotype、Palladio、URW Palladio、serif。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| font-family | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-family)
\n
"
},
"font-size"
:{
"name"
:
"## font-size
\n
"
,
"description"
:
"
\n
font-size CSS 属性设置字体大小。更改字体大小还会更新字体大小相关的 <length> 单位，例如 em、ex 等。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
font-size: <length>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`large`
\n\n\n\n
`larger`
\n\n\n\n
`medium`
\n\n\n\n
`small`
\n\n\n\n
`smaller`
\n\n\n\n
`x-large`
\n\n\n\n
`x-small`
\n\n\n\n
`xx-large`
\n\n\n\n
`xx-small`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| font-size | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-size)
\n
"
},
"font-style"
:{
"name"
:
"## font-style
\n
"
,
"description"
:
"
\n
font-style CSS 属性允许你选择 font-family 字体下的 italic 或 oblique 样式。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
font-style: italic | normal;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`italic`
\n
选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代。
\n\n\n
`normal`
\n
选择 font-family 的常规字体。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| font-style | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-style)
\n
"
},
"font-weight"
:{
"name"
:
"## font-weight
\n
"
,
"description"
:
"
\n
font-weight CSS 属性指定了字体的粗细程度。一些字体只提供 normal 和 bold 两种值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
font-weight: normal | bold | 400 | 700;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`normal`
\n
正常粗细。与 400 等值。
\n\n\n
`bold`
\n
加粗。与 700 等值。
\n\n\n
`400`
\n
普通的
\n\n\n
`700`
\n
大胆的
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| font-weight | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-weight)
\n
"
},
"height"
:{
"name"
:
"## height
\n
"
,
"description"
:
"
\n
height CSS 属性指定了一个元素的高度。默认情况下，这个属性决定的是内容区（ content area）的高度，但是，如果将 box-sizing 设置为 border-box , 这个属性决定的将是边框区域（border area）的高度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
height: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`fit-content`
\n
将 fill-content 公式中的可用位置替换为特定的参数以进行使用，如：min(max-content, max(min-content, ))
\n\n\n
`max-content`
\n
设置为允许的最大高度。
\n\n\n
`min-content`
\n
设置为允许的最小高度。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| height | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| fit-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| max-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| min-content | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/height)
\n
"
},
"justify-content"
:{
"name"
:
"## justify-content
\n
"
,
"description"
:
"
\n
CSS justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
justify-content: center | flex-start | flex-end | space-between | space-around;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`center`
\n
伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
\n\n\n
`flex-start`
\n
元素紧密地排列在弹性容器的主轴起始侧。仅应用于弹性布局的项目。对于不是弹性容器里的元素，此值将被视为 start。
\n\n\n
`flex-end`
\n
元素紧密地排列在弹性容器的主轴结束侧。仅应用于弹性布局的元素。对于不是弹性容器里的元素，此值将被视为 end。
\n\n\n
`space-between`
\n
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
\n\n\n
`space-around`
\n
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| justify-content | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/justify-content)
\n
"
},
"left"
:{
"name"
:
"## left
\n
"
,
"description"
:
"
\n
CSS **left**属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移，非定位元素设置此属性无效。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
left: <length> | <percentage> | auto;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
这个关键字表示：
\n
\n
对于绝对定位元素，元素将忽略此属性而以right属性为准，如果此时设置width: auto，将基于内容需要的宽度设置宽度；如果right也为auto的话，元素的水平位置就是它假如作为静态 (即 static) 元素时该在的位置。
\n
对于相对定位元素，元素相对正常位置的偏移量将基于right属性；如果right也为auto的话，元素将不会有偏移。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| left | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/left)
\n
"
},
"letter-spacing"
:{
"name"
:
"## letter-spacing
\n
"
,
"description"
:
"
\n
CSS 的 letter-spacing 属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。letter-spacing 的正值会导致字符分布得更远，而 letter-spacing 的负值会使字符更接近。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
letter-spacing: <length>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`normal`
\n
此间距是按照当前字体的正常间距确定的。和 0 不同的是，normal 会让用户代理调整文字之间空间来对齐文字。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| letter-spacing | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/letter-spacing)
\n
"
},
"line-height"
:{
"name"
:
"## line-height
\n
"
,
"description"
:
"
\n
line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
line-height: <length> | <number>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`normal`
\n
取决于用户代理。桌面浏览器（包括 Firefox）使用默认值，约为 1.2，这取决于元素的 font-family。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| line-height | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/line-height)
\n
"
},
"margin"
:{
"name"
:
"## margin
\n
"
,
"description"
:
"
\n
margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
margin: [ <length> | <percentage> ]{1,4};
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| margin | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/margin)
\n
"
},
"margin-bottom"
:{
"name"
:
"## margin-bottom
\n
"
,
"description"
:
"
\n
用于设置边距区域厚度值的简写属性。如果 left 省略，则与 right 相同。如果省略bottom，则与top相同；如果省略right，则与top相同。边距属性允许使用负值，但可能存在特定于实现的限制。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
margin-bottom: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
由浏览器自己选择一个合适的值。参见 margin。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| margin-bottom | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/margin-bottom)
\n
"
},
"margin-left"
:{
"name"
:
"## margin-left
\n
"
,
"description"
:
"
\n
margin-left 属性 设置与元素相关联的盒子模型的左外边距。这个值可以为负值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
margin-left: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| margin-left | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/margin-left)
\n
"
},
"margin-right"
:{
"name"
:
"## margin-right
\n
"
,
"description"
:
"
\n
margin-right 属性 设置与元素相关联的盒子模型的右外边距。这个值可以为负值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
margin-right: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
auto 关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。如果有几组 margin-left 和 margin-right 设置为 auto，那么最后计算的空间分布，会根据 display，float，position 属性，自动生成以下几种情况：
\n
\n
\n
\n
Value of display
\n
Value of float
\n
Value of position
\n
Computed value of auto
\n
Comment
\n
\n
\n
\n
\n
inline, inline-block, inline-table
\n
any
\n
static or relative
\n
0
\n
Inline layout mode
\n
\n
\n
block, inline, inline-block, block, table, inline-table, list-item, table-caption
\n
any
\n
static or relative
\n
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.
\n
Block layout mode
\n
\n
\n
block, inline, inline-block, block, table, inline-table, list-item, table-caption
\n
left or right
\n
static or relative
\n
0
\n
Block layout mode (floating element)
\n
\n
\n
any table-*, except table-caption
\n
any
\n
any
\n
0
\n
Internal table-* elements don't have margins, use border-spacing instead
\n
\n
\n
any, except flex, inline-flex, or table-*
\n
any
\n
fixed or absolute
\n
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.
\n
Absolutely positioned layout mode
\n
\n
\n
flex, inline-flex
\n
any
\n
any
\n
0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins.
\n
Flexbox layout mode
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| margin-right | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/margin-right)
\n
"
},
"margin-top"
:{
"name"
:
"## margin-top
\n
"
,
"description"
:
"
\n
margin-top CSS 属性用于设置元素的顶部外边距外边距区域。正值使它离相邻元素更远，而负值使它更靠近相邻元素。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
margin-top: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
浏览器选择一个合适的值来使用。参见 margin。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| margin-top | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/margin-top)
\n
"
},
"max-height"
:{
"name"
:
"## max-height
\n
"
,
"description"
:
"
\n
CSS属性 max-height 设置元素的最大高度。它防止height属性的使用值（used value）大于 max-height 的指定值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
max-height: <length>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`fit-content`
\n
根据写入模式使用 fit-content 内联大小或 fit-content 块大小。
\n\n\n
`max-content`
\n
根据写入模式使用最大内容内联大小或最大内容块大小。
\n\n\n
`min-content`
\n
根据写入模式使用最小内容内联大小或最小内容块大小。
\n\n\n
`auto`
\n\n\n\n
`none`
\n
盒子的高度没有限制。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| max-height | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| fit-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| max-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| min-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| auto | 5.0 | √ | x | 9.0 | √ | x |
\n
| none | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/max-height)
\n
"
},
"max-width"
:{
"name"
:
"## max-width
\n
"
,
"description"
:
"
\n
max-width 属性用来给元素设置最大宽度值。定义了 max-width 的元素会在达到 max-width 值之后避免进一步按照 width 属性设置变大。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
max-width: <length>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`fit-content`
\n\n\n\n
`max-content`
\n\n\n\n
`min-content`
\n\n\n\n
`auto`
\n\n\n\n
`none`
\n
盒子的宽度没有限制。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| max-width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| fit-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| max-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| min-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| auto | 5.0 | √ | x | 9.0 | √ | x |
\n
| none | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/max-width)
\n
"
},
"min-height"
:{
"name"
:
"## min-height
\n
"
,
"description"
:
"
\n
CSS 属性 min-height 能够设置元素的最小高度。这样能够防止 height 属性的应用值小于 min-height 的值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
min-height: <length>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`fit-content`
\n
根据写入模式使用 fit-content 内联大小或 fit-content 块大小。
\n\n\n
`max-content`
\n
根据写入模式使用最大内容内联大小或最大内容块大小。
\n\n\n
`min-content`
\n
根据写入模式使用最小内容内联大小或最小内容块大小。
\n\n\n
`auto`
\n\n\n\n
`none`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| min-height | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| fit-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| max-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| min-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| auto | 5.0 | √ | x | 9.0 | √ | x |
\n
| none | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/min-height)
\n
"
},
"min-width"
:{
"name"
:
"## min-width
\n
"
,
"description"
:
"
\n
min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
min-width: <length>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`fit-content`
\n
等同于 min(max-content, max(min-content, fill-available).
\n\n\n
`max-content`
\n
固有首选宽度。
\n\n\n
`min-content`
\n
固有最小宽度
\n\n\n
`auto`
\n
用于弹性元素的默认最小宽度。相比其他布局中以0为默认值，auto能为弹性布局指明更合理的默认表现。
\n\n\n
`none`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| min-width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| fit-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| max-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| min-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| auto | 5.0 | √ | x | 9.0 | √ | x |
\n
| none | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/min-width)
\n
"
},
"opacity"
:{
"name"
:
"## opacity
\n
"
,
"description"
:
"
\n
opacity 属性指定了一个元素的不透明度。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
opacity: <alpha-value>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| opacity | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/opacity)
\n
"
},
"overflow"
:{
"name"
:
"## overflow
\n
"
,
"description"
:
"
\n
overflow 是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
overflow: visible | hidden;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`visible`
\n
内容不能被裁减并且可能渲染到边距盒（padding）的外部。
\n\n\n
`hidden`
\n
如果需要，内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。内容可以以编程的方式滚动（例如，通过设置 scrollLeft 等属性的值或 scrollTo() 方法）, 因此该元素仍然是一个滚动的容器。
\n\n\n
`scroll`
\n
如果需要，内容将被裁减以适应边距（padding）盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。
\n\n\n
`auto`
\n
取决于用户代理。如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。
\n\n\n
`clip`
\n
类似于 hidden，内容将以元素的边距（padding）盒进行裁剪。clip 和 hidden 之间的区别是 clip 关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。如果你希望开启一个新的格式化上下文，你可以使用 display: flow-root 来这样做。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| overflow | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| scroll | 5.0 | √ | x | 9.0 | √ | x |
\n
| auto | 5.0 | √ | x | 9.0 | √ | x |
\n
| clip | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/overflow)
\n
"
},
"padding"
:{
"name"
:
"## padding
\n
"
,
"description"
:
"
\n
padding CSS 简写属性控制元素所有四条边的内边距区域。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
padding: [ <length> | <percentage> ]{1,4};
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| padding | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding)
\n
"
},
"padding-bottom"
:{
"name"
:
"## padding-bottom
\n
"
,
"description"
:
"
\n
CSS 属性 padding-bottom 是指一个元素在内边距区域（padding area）中下方的高度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
padding-bottom: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| padding-bottom | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-bottom)
\n
"
},
"padding-left"
:{
"name"
:
"## padding-left
\n
"
,
"description"
:
"
\n
CSS 属性 padding-left 是指一个元素在内边距区域（padding area）中左边的宽度。内边距（padding）是指一个元素的内容和边框之间的区域。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
padding-left: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| padding-left | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-left)
\n
"
},
"padding-right"
:{
"name"
:
"## padding-right
\n
"
,
"description"
:
"
\n
CSS 属性 padding-right 是指一个元素在内边距区域（padding area）中右边的宽度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
padding-right: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| padding-right | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-right)
\n
"
},
"padding-top"
:{
"name"
:
"## padding-top
\n
"
,
"description"
:
"
\n
CSS 属性 padding-top 是指一个元素在内边距区域（padding area）中上方的高度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
padding-top: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| padding-top | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-top)
\n
"
},
"pointer-events"
:{
"name"
:
"## pointer-events
\n
"
,
"description"
:
"
\n
pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
pointer-events: auto | none;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
与pointer-events属性未指定时的表现效果相同，对于 SVG 内容，该值与visiblePainted效果相同
\n\n\n
`none`
\n
元素永远不会成为鼠标事件的target (en-US)。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| pointer-events | 5.0 | x | 3.9.0 | 9.0 | x | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/pointer-events)
\n
"
},
"position"
:{
"name"
:
"## position
\n
"
,
"description"
:
"
\n
CSS position 属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
position: relative | absolute | fixed | static | sticky;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`relative`
\n
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
\n\n\n
`absolute`
\n
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
\n\n\n
`fixed`
\n
元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。
\n\n\n
`static`
\n
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
\n\n\n
`sticky`
\n
元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。
\n
该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见 Github issue on W3C CSSWG）。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| position | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| static | 5.0 | √ | x | 9.0 | √ | x |
\n
| sticky | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/position)
\n
"
},
"right"
:{
"name"
:
"## right
\n
"
,
"description"
:
"
\n
right CSS 属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移，非定位元素设置此属性无效。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
right: <length> | <percentage> | auto;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
这个关键字表示：
\n
\n
对于绝对定位元素，元素将忽略此属性而以 left 属性为准，如果此时设置 width: auto，将基于内容需要的宽度设置宽度；如果 left 也为 auto 的话，元素的水平位置就是它假如作为静态（即 static）元素时该在的位置。
\n
对于相对定位元素，元素相对正常位置的偏移量将基于 left 属性；如果 left 也为 auto 的话，元素将不会有偏移。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| right | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/right)
\n
"
},
"text-align"
:{
"name"
:
"## text-align
\n
"
,
"description"
:
"
\n
text-align CSS 属性设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 vertical-align 类似，但是是水平方向的。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
text-align: left | center | right;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`left`
\n
行内内容向左侧边对齐。
\n\n\n
`center`
\n
行内内容居中。
\n\n\n
`right`
\n
行内内容向右侧边对齐。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| text-align | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/text-align)
\n
"
},
"text-decoration"
:{
"name"
:
"## text-decoration
\n
"
,
"description"
:
"
\n
text-decoration 简写 CSS 属性设置文本上的装饰性线条的外观。它是 text-decoration-line、text-decoration-color、text-decoration-style 和较新的 text-decoration-thickness 属性的缩写。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`dashed`
\n
产生虚线样式。
\n\n\n
`dotted`
\n
产生一条虚线。
\n\n\n
`double`
\n
产生双线。
\n\n\n
`line-through`
\n
每行文本中间都有一条线。
\n\n\n
`none`
\n
不产生任何线条。
\n\n\n
`overline`
\n
每行文本上方都有一行。
\n\n\n
`solid`
\n
产生实线。
\n\n\n
`underline`
\n
每行文本都带有下划线。
\n\n\n
`wavy`
\n
产生一条波浪线。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| text-decoration | 5.0 | √ | x | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/text-decoration)
\n
"
},
"text-decoration-color"
:{
"name"
:
"## text-decoration-color
\n
"
,
"description"
:
"
\n
CSS 属性 text-decoration-color 用于设置文本修饰线的颜色，文本修饰线是通过 text-decoration-line 属性指定的。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
text-decoration-color: <color>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| text-decoration-color | 5.0 | √ | x | 9.0 | √ | - |
\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
"
},
"text-decoration-line"
:{
"name"
:
"## text-decoration-line
\n
"
,
"description"
:
"
\n
CSS 属性 text-decoration-line 用于设置元素中的文本的修饰类型。当要设置多个线修饰属性时，用 text-decoration 简写属性会比分别写多个属性更方便。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
text-decoration-line: underline | line-through | overline;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`underline`
\n
在文本的下方有一条修饰线。
\n\n\n
`line-through`
\n
有一条贯穿文本中间的修饰线。
\n\n\n
`overline`
\n
在文本的上方有一条修饰线。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| text-decoration-line | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| overline | 5.0 | √ | x | 9.0 | √ | 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
"
},
"text-decoration-style"
:{
"name"
:
"## text-decoration-style
\n
"
,
"description"
:
"
\n
CSS 属性 text-decoration-style 用于设置由 text-decoration-line 设定的线的样式。线的样式会应用到所有被 text-decoration-line 设定的线，不能为其中的每条线设置不同的样式。当要设置多个线修饰属性时，用 text-decoration 简写属性会比分别写多个属性更方便。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
text-decoration-style: solid | dashed | dotted | wavy;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`solid`
\n
产生实线。
\n\n\n
`dashed`
\n
产生虚线样式。
\n\n\n
`dotted`
\n
产生一条虚线。
\n\n\n
`wavy`
\n
产生一条波浪线。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| text-decoration-style | 5.0 | √ | x | 9.0 | √ | - |
\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
"
},
"text-overflow"
:{
"name"
:
"## text-overflow
\n
"
,
"description"
:
"
\n
text-overflow CSS 属性用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
text-overflow: clip | ellipsis;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`clip`
\n
默认值。这个关键字会在内容区域的极限处截断文本，因此可能会在单词的中间发生截断。如果你的目标浏览器支持 text-overflow: ''，为了能在两个单词过渡处截断，你可以使用一个空字符串值（''）作为 text-overflow 属性的值。
\n\n\n
`ellipsis`
\n
这个关键字会用一个省略号（'…'、U+2026 HORIZONTAL ELLIPSIS）来表示被截断的文本。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小以至于连省略号都容纳不下，那么这个省略号也会被截断。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| text-overflow | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/text-overflow)
\n
"
},
"top"
:{
"name"
:
"## top
\n
"
,
"description"
:
"
\n
top样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
top: <length> | <percentage> | auto;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
这个关键字表示：
\n
\n
对于绝对定位元素，元素将忽略此属性已bottom属性为准，如果此时设置height: auto，将基于内容需要的高度设置高度；如果bottom也为auto的话，元素的垂直位置就是它假如作为静态 (即 static) 元素时该在的位置。
\n
对于相对定位元素，元素相对正常位置的偏移量将基于bottom属性；如果bottom也为auto的话，元素将不会有偏移。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| top | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/top)
\n
"
},
"transform"
:{
"name"
:
"## transform
\n
"
,
"description"
:
"
\n
CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transform: <transform-list>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`rotate(
\\
<angle
\\
>)`
\n\n\n\n
`rotateX(
\\
<angle
\\
>)`
\n\n\n\n
`rotateY(
\\
<angle
\\
>)`
\n\n\n\n
`rotateZ(
\\
<angle
\\
>)`
\n\n\n\n
`scale(
\\
<number
\\
>
\\
<number
\\
>)`
\n\n\n\n
`scaleX(
\\
<number
\\
>)`
\n\n\n\n
`scaleY(
\\
<number
\\
>)`
\n\n\n\n
`translate(
\\
<length/percentage
\\
>
\\
<length/percentage
\\
>)`
\n\n\n\n
`translateX(
\\
<length/percentage
\\
>)`
\n\n\n\n
`translateY(
\\
<length/percentage
\\
>)`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| transform | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transform)
\n
"
},
"transform-origin"
:{
"name"
:
"## transform-origin
\n
"
,
"description"
:
"
\n
transform-origin CSS 属性让你更改一个元素变形的原点。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transform-origin: <length> | <percentage> | 关键字(top/left/right/bottom/center);
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`top`
\n\n\n\n
`left`
\n\n\n\n
`right`
\n\n\n\n
`bottom`
\n\n\n\n
`center`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| transform-origin | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transform-origin)
\n
"
},
"transition"
:{
"name"
:
"## transition
\n
"
,
"description"
:
"
\n
transition CSS 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性 (en-US)。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transition: <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`all`
\n
每一个能够经历改变的属性都会应用。
\n\n\n
`none`
\n
不会发生转变。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| transition | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition)
\n
"
},
"transition-delay"
:{
"name"
:
"## transition-delay
\n
"
,
"description"
:
"
\n
CSS 的transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transition-delay: <time>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| transition-delay | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition-delay)
\n
"
},
"transition-duration"
:{
"name"
:
"## transition-duration
\n
"
,
"description"
:
"
\n
transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s，表示不出现过渡动画。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transition-duration: <time>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| transition-duration | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition-duration)
\n
"
},
"transition-property"
:{
"name"
:
"## transition-property
\n
"
,
"description"
:
"
\n
transition-property 指定应用过渡属性的名称。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transition-property: <single-transition-property>#;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`width`
\n\n\n\n
`height`
\n\n\n\n
`margin`
\n\n\n\n
`margin-top`
\n\n\n\n
`margin-bottom`
\n\n\n\n
`margin-left`
\n\n\n\n
`margin-right`
\n\n\n\n
`left`
\n\n\n\n
`right`
\n\n\n\n
`top`
\n\n\n\n
`bottom`
\n\n\n\n
`padding`
\n\n\n\n
`padding-left`
\n\n\n\n
`padding-right`
\n\n\n\n
`padding-top`
\n\n\n\n
`padding-bottom`
\n\n\n\n
`opacity`
\n\n\n\n
`background-color`
\n\n\n\n
`border-color`
\n\n\n\n
`border-top-color`
\n\n\n\n
`border-bottom-color`
\n\n\n\n
`border-left-color`
\n\n\n\n
`border-right-color`
\n\n\n\n
`transform`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| transition-property | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition-property)
\n
"
},
"transition-timing-function"
:{
"name"
:
"## transition-timing-function
\n
"
,
"description"
:
"
\n
CSS 属性受到 transition effect的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个 transition 变化过程中，变化速度可以不断改变。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transition-timing-function: <easing-function>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`ease`
\n\n\n\n
`ease-in`
\n\n\n\n
`ease-out`
\n\n\n\n
`ease-in-out`
\n\n\n\n
`linear`
\n\n\n\n
`cubic-bezier`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| transition-timing-function | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition-timing-function)
\n
"
},
"visibility"
:{
"name"
:
"## visibility
\n
"
,
"description"
:
"
\n
visibility CSS 属性显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 <table> 中的行或列。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
visibility: visible | hidden;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`visible`
\n
元素框可见。
\n\n\n
`hidden`
\n
元素框不可见（不绘制），但仍然影响常规的布局。如果将其子元素的 visibility 设置为 visible，则该子元素依然可见。元素无法获得焦点（例如通过 tab 索引进行键盘导航）。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| visibility | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/visibility)
\n
"
},
"width"
:{
"name"
:
"## width
\n
"
,
"description"
:
"
\n
width 属性用于设置元素的宽度。width 默认设置内容区域的宽度，但如果 box-sizing 属性被设置为 border-box，就转而设置边框区域的宽度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
width: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`fit-content`
\n
取以下两种值中的较大值：
\n
\n
固有的最小宽度
\n
固有首选宽度（max-content）和可用宽度（available）两者中的较小值
\n
\n
可表示为：min(max-content, max(min-content,
\\
<length-percentage
\\
>))
\n\n\n
`max-content`
\n
元素内容固有的（intrinsic）合适宽度。
\n\n\n
`min-content`
\n
元素内容固有的最小宽度。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| fit-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| max-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| min-content | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/width)
\n
"
},
"z-index"
:{
"name"
:
"## z-index
\n
"
,
"description"
:
"
\n
CSS z-index 属性设置定位元素及其后代元素或 flex 项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
z-index: <integer>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
盒子不会创建一个新的局部层叠上下文。盒子在当前层叠上下文的层叠等级是 0。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| z-index | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/z-index)
\n
"
},
"text-decoration-thickness"
:{
"name"
:
"## text-decoration-thickness
\n
"
,
"description"
:
"
\n
CSS 属性 text-decoration-thickness 用于设置元素中文本所使用的装饰线（如 line-through、underline 或 overline）的笔触厚度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
text-decoration-thickness: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| text-decoration-thickness | 5.0 | √ | x | 9.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
"
},
"lines"
:{
"name"
:
"## lines
\n
"
,
"description"
:
"
\n
text 组件专有样式，设置文本组件最大行数
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
lines: <integer>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| lines | 5.0 | x | 3.9.0 | 9.0 | x | - |
\n
"
,
"reference"
:
""
}}
{
"align-content"
:{
"name"
:
"## align-content
\n
"
,
"description"
:
"
\n
CSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
align-content: center | flex-start | flex-end | space-between | space-around | stretch;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`center`
\n
所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
\n\n\n
`flex-start`
\n
所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
\n\n\n
`flex-end`
\n
所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
\n\n\n
`space-between`
\n
所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。
\n\n\n
`space-around`
\n
所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
\n\n\n
`stretch`
\n
拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| align-content | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/align-content)
\n
"
},
"align-items"
:{
"name"
:
"## align-items
\n
"
,
"description"
:
"
\n
CSS align-items 属性将所有直接子节点上的 align-self 值设置为一个组。align-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
align-items: center | flex-start | flex-end | stretch | baseline;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`center`
\n
元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
\n\n\n
`flex-start`
\n
元素向侧轴起点对齐。
\n\n\n
`flex-end`
\n
元素向侧轴终点对齐。
\n\n\n
`stretch`
\n
弹性项包含外边距的交叉轴尺寸被拉升至行高
\n\n\n
`baseline`
\n
所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| align-items | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| baseline | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/align-items)
\n
"
},
"align-self"
:{
"name"
:
"## align-self
\n
"
,
"description"
:
"
\n
CSS 属性 align-self 会对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items 的值。In Grid, it aligns the item inside the grid area. 在 Flexbox 中，会按照 cross axis（当前 flex 元素排列方向的垂直方向）进行排列。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
align-self: auto | center | flex-start | flex-end | stretch | baseline;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
设置为父元素的 align-items 值。
\n\n\n
`center`
\n
flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 尺寸大于 flex 容器，将在两个方向均等溢出。
\n\n\n
`flex-start`
\n
flex 元素会对齐到 cross-axis 的首端。
\n\n\n
`flex-end`
\n
flex 元素会对齐到 cross-axis 的尾端。
\n\n\n
`stretch`
\n
如果 Flex 项目的 cross size 属性计算为 auto，并且两个横轴边距都不是 auto，则 Flex 项目将被拉伸。
\n\n\n
`baseline`
\n
如果弹性项目的内联轴与交叉轴相同，则该值与“flex-start”相同。否则，它参与基线对齐。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| align-self | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| baseline | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
""
},
"background"
:{
"name"
:
"## background
\n
"
,
"description"
:
"
\n
background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
background: <'background-color'> | <'background-image'>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`fixed`
\n
背景相对于视口是固定的。 在没有视口的分页媒体中，“固定”背景相对于页面框是固定的，因此会在每个页面上复制。
\n\n\n
`local`
\n
背景相对于元素的内容是固定的：如果元素具有滚动机制，则背景随元素的内容滚动。
\n\n\n
`none`
\n
值“none”算作图像层，但不绘制任何内容。
\n\n\n
`scroll`
\n
背景相对于元素本身是固定的，并且不会随其内容滚动。（它有效地附加到元素的边框。）
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| background | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/background)
\n
"
},
"background-clip"
:{
"name"
:
"## background-clip
\n
"
,
"description"
:
"
\n
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
background-clip: border-box | padding-box | content-box;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`border-box`
\n
背景延伸至边框外沿（但是在边框下层）。
\n\n\n
`padding-box`
\n
背景延伸至内边距（padding）外沿。不会绘制到边框处。
\n\n\n
`content-box`
\n
背景被裁剪至内容区（content box）外沿。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| background-clip | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| padding-box | 5.0 | √ | x | 9.0 | √ | x |
\n
| content-box | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/background-clip)
\n
"
},
"background-color"
:{
"name"
:
"## background-color
\n
"
,
"description"
:
"
\n
CSS属性中的 background-color 会设置元素的背景色，属性的值为颜色值或关键字
\"
transparent
\"
二者选其一。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
background-color: <color>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| background-color | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/background-color)
\n
"
},
"background-image"
:{
"name"
:
"## background-image
\n
"
,
"description"
:
"
\n
CSS background-image 属性用于为一个元素设置一个或者多个背景图像。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
background-image: <gradient>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`linear-gradient`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| background-image | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/background-image)
\n
"
},
"border"
:{
"name"
:
"## border
\n
"
,
"description"
:
"
\n
CSS 的 border 属性是一个用于设置各种单独的边界属性的简写属性。border 可以用于设置一个或多个以下属性的值：border-width、border-style、border-color。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border: <'border-width'> || <'border-style'> || <'border-color'>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border)
\n
"
},
"border-bottom"
:{
"name"
:
"## border-bottom
\n
"
,
"description"
:
"
\n
border-bottom 简写属性把下边框的所有属性：border-bottom-color，border-bottom-style 与 border-bottom-width 设置到了一个声明中。这些属性描述了元素的下边框样式。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-bottom: <'border-width'> || <'border-style'> || <'border-color'>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-bottom | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom)
\n
"
},
"border-bottom-color"
:{
"name"
:
"## border-bottom-color
\n
"
,
"description"
:
"
\n
border-bottom-color 属性设置一个元素底部边框的颜色。应当指出，在多数情况下，CSS 简写属性 border-color 或 border-bottom 更方便实用。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-bottom-color: <color>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-bottom-color | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom-color)
\n
"
},
"border-bottom-left-radius"
:{
"name"
:
"## border-bottom-left-radius
\n
"
,
"description"
:
"
\n
border-bottom-left-radius 这个 css 属性设置元素左下角的圆角。圆角可以是圆或椭圆（注：应为圆或椭圆的一部分），或者当其中一个值为 0 时，圆角将不被设置，这时这个角将展示为直角。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-bottom-left-radius: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-bottom-left-radius | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius)
\n
"
},
"border-bottom-right-radius"
:{
"name"
:
"## border-bottom-right-radius
\n
"
,
"description"
:
"
\n
border-bottom-right-radius CSS 属性设置元素右下角的圆角。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-bottom-right-radius: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-bottom-right-radius | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius)
\n
"
},
"border-bottom-style"
:{
"name"
:
"## border-bottom-style
\n
"
,
"description"
:
"
\n
border-bottom-style CSS 属性设置元素底部边框的线条样式。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-bottom-style: <enum>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`solid`
\n\n\n\n
`dashed`
\n\n\n\n
`dotted`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-bottom-style | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom-style)
\n
"
},
"border-bottom-width"
:{
"name"
:
"## border-bottom-width
\n
"
,
"description"
:
"
\n
CSS 属性 border-bottom-width 设置一个元素的底部边框宽度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-bottom-width: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-bottom-width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-bottom-width)
\n
"
},
"border-color"
:{
"name"
:
"## border-color
\n
"
,
"description"
:
"
\n
CSS 属性 border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color、border-right-color、border-bottom-color、border-left-color。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-color: <color>{1,4};
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-color | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-color)
\n
"
},
"border-left"
:{
"name"
:
"## border-left
\n
"
,
"description"
:
"
\n
CSS 属性 border-left 是属性border-left-color, border-left-style, 和border-left-width的三者的缩写。这些属性都是在描述一个元素的左边的边框border。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-left: <'border-width'> || <'border-style'> || <'border-color'>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-left | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-left)
\n
"
},
"border-left-color"
:{
"name"
:
"## border-left-color
\n
"
,
"description"
:
"
\n
border-left-color 属性设置元素的左边框颜色。值得注意的是，在大数情况下使用 border-color 或 border-left 更加方便和普遍。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-left-color: <color>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-left-color | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-left-color)
\n
"
},
"border-left-style"
:{
"name"
:
"## border-left-style
\n
"
,
"description"
:
"
\n
border-left-style CSS 属性设置元素左边框的线条样式。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-left-style: <enum>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`solid`
\n\n\n\n
`dashed`
\n\n\n\n
`dotted`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-left-style | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-left-style)
\n
"
},
"border-left-width"
:{
"name"
:
"## border-left-width
\n
"
,
"description"
:
"
\n
CSS 的 border-left-width 属性用来设置盒子的左边框的宽度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-left-width: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-left-width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-left-width)
\n
"
},
"border-radius"
:{
"name"
:
"## border-radius
\n
"
,
"description"
:
"
\n
CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-radius: <length>{1,4};
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-radius | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-radius)
\n
"
},
"border-right"
:{
"name"
:
"## border-right
\n
"
,
"description"
:
"
\n
CSS 属性 border-right 是属性border-right-color, border-right-style, 和border-right-width的三者的缩写。这些属性都是在描述一个元素的右边的边框border。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-right: <'border-width'> || <'border-style'> || <'border-color'>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-right | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-right)
\n
"
},
"border-right-color"
:{
"name"
:
"## border-right-color
\n
"
,
"description"
:
"
\n
border-right-color CSS 属性用来设置元素右边的 border. 这个属性的值也可以通过简写的 CSS 属性 border-color 或border-right来设置。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-right-color: <color>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-right-color | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-right-color)
\n
"
},
"border-right-style"
:{
"name"
:
"## border-right-style
\n
"
,
"description"
:
"
\n
border-right-style 是 border 中的一个 CSS 子属性，描述的是右边框的样式 border.
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-right-style: <enum>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`solid`
\n\n\n\n
`dashed`
\n\n\n\n
`dotted`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-right-style | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-right-style)
\n
"
},
"border-right-width"
:{
"name"
:
"## border-right-width
\n
"
,
"description"
:
"
\n
CSS 的**border-right-width** 用来设置盒子右边框的宽度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-right-width: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-right-width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-right-width)
\n
"
},
"border-style"
:{
"name"
:
"## border-style
\n
"
,
"description"
:
"
\n
border-style 是一个 CSS 简写属性，用来设定元素所有边框的样式。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-style: <enum>{1,4};
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`solid`
\n\n\n\n
`dashed`
\n\n\n\n
`dotted`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-style | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-style)
\n
"
},
"border-top"
:{
"name"
:
"## border-top
\n
"
,
"description"
:
"
\n
CSS 属性 border-top是属性 border-top-color, border-top-style, 和border-top-width 的三者的缩写。这些属性都是在描述一个元素的上方的边框border。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-top: <'border-width'> || <'border-style'> || <'border-color'>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-top | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top)
\n
"
},
"border-top-color"
:{
"name"
:
"## border-top-color
\n
"
,
"description"
:
"
\n
border-top-color 属性用以设置某元素顶部 border的颜色。通常，用border-color 或 border-top 设置该颜色更为便捷可取。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-top-color: <color>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-top-color | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top-color)
\n
"
},
"border-top-left-radius"
:{
"name"
:
"## border-top-left-radius
\n
"
,
"description"
:
"
\n
border-top-left-radius 用来设置元素左上角的圆角效果。这段圆弧（角）可以是圆或椭圆的一部分。如果其中有一个值为 0，那么将无圆角效果（见 border-top-left-radius 取值方式)。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-top-left-radius: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-top-left-radius | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius)
\n
"
},
"border-top-right-radius"
:{
"name"
:
"## border-top-right-radius
\n
"
,
"description"
:
"
\n
border-top-right-radius 属性设置元素的右上角弧形，这个圆弧可能是一个椭圆，或者其中一个值是 0 的话，就是没有圆弧，换句话就是说拐角是方形的。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-top-right-radius: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-top-right-radius | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top-right-radius)
\n
"
},
"border-top-style"
:{
"name"
:
"## border-top-style
\n
"
,
"description"
:
"
\n
border-top-style CSS 设置元素上边框的 border.
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-top-style: <enum>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`solid`
\n\n\n\n
`dashed`
\n\n\n\n
`dotted`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-top-style | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top-style)
\n
"
},
"border-top-width"
:{
"name"
:
"## border-top-width
\n
"
,
"description"
:
"
\n
css 属性 border-top-width 是用于设置盒模型的上边框的宽度
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-top-width: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-top-width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-top-width)
\n
"
},
"border-width"
:{
"name"
:
"## border-width
\n
"
,
"description"
:
"
\n
border-width 属性可以设置盒子模型的边框宽度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
border-width: <length>{1,4};
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| border-width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/border-width)
\n
"
},
"bottom"
:{
"name"
:
"## bottom
\n
"
,
"description"
:
"
\n
bottom样式属性定义了定位元素下外边距边界与其包含块下边界之间的偏移，非定位元素设置此属性无效。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
bottom: <length> | <percentage> | auto;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
对于非替换元素，该值的效果取决于哪些相关属性也具有值“auto”
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| bottom | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/bottom)
\n
"
},
"box-shadow"
:{
"name"
:
"## box-shadow
\n
"
,
"description"
:
"
\n
CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
box-shadow: <shadow>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`inset`
\n
如果没有指定inset，默认阴影在边框外，即阴影向外扩散。
\n
使用 inset 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| box-shadow | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/box-shadow)
\n
"
},
"box-sizing"
:{
"name"
:
"## box-sizing
\n
"
,
"description"
:
"
\n
CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
box-sizing: content-box | border-box;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`content-box`
\n
CSS2.1 指定的宽度和高度行为。指定的宽度和高度（以及各自的最小/最大属性）分别应用于元素内容框的宽度和高度。
\n\n\n
`border-box`
\n
该元素上指定的宽度和高度（以及各自的最小/最大属性）决定了该元素的边框。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| box-sizing | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/box-sizing)
\n
"
},
"color"
:{
"name"
:
"## color
\n
"
,
"description"
:
"
\n
CSS color 属性设置元素的文本以及文本装饰的前景色颜色值，并设置 currentcolor 值。currentcolor 可以用作其他属性的间接值，且为其他颜色属性（如 border-color）的默认值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
color: <color>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| color | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/color)
\n
"
},
"display"
:{
"name"
:
"## display
\n
"
,
"description"
:
"
\n
CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
display: flex | none;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`flex`
\n
该元素生成一个主要的 Flex 容器框并建立一个 Flex 格式化上下文。
\n\n\n
`none`
\n
该元素及其后代不显示。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| display | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/display)
\n
"
},
"flex"
:{
"name"
:
"## flex
\n
"
,
"description"
:
"
\n
flex CSS 简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
flex: initial | auto | none | [ <'flex-grow'> <'flex-shrink'>? <'flex-basis'> ];
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`initial`
\n
元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为
\"
flex: 0 1 auto
\"
。
\n\n\n
`auto`
\n
元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为
\"
flex: 1 1 auto
\"
.
\n\n\n
`none`
\n
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为
\"
flex: 0 0 auto
\"
。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| flex | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex)
\n
"
},
"flex-basis"
:{
"name"
:
"## flex-basis
\n
"
,
"description"
:
"
\n
CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
flex-basis: <number> | <length> | <percentage> | auto;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
检索主尺寸属性的值作为使用的“flex-basis”。
\n\n\n
`content`
\n
基于 flex 的元素的内容自动调整大小。
\n
\n
**备注：**由于最初规范中没有包括这个值，在一些早期的浏览器实现的 flex 布局中，content 值无效，可以利用设置 (width 或 height) 为 auto 达到同样的效果。
\n
\n
\n
备注： 简史
\n
\n
最初，
\"
flex-basis:auto
\"
的含义是
\"
参照我的width和height属性
\"
.
\n
在此之后，
\"
flex-basis:auto
\"
的含义变成了自动尺寸，而
\"
main-size
\"
变成了
\"
参照我的width和height属性
\"
。实际执行于 bug 1032922.
\n
然后呢，这个更改又在 bug 1093316 中被撤销了，所以
\"
auto
\"
变回了原来的含义; 而一个新的关键字 'content' 变成了自动尺寸。 (Firefox bug 1105111 包括了增加这个关键字).
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| flex-basis | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| content | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-basis)
\n
"
},
"flex-direction"
:{
"name"
:
"## flex-direction
\n
"
,
"description"
:
"
\n
CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
flex-direction: row | row-reverse | column | column-reverse;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`row`
\n
flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
\n\n\n
`row-reverse`
\n
表现和 row 相同，但是置换了主轴起点和主轴终点
\n\n\n
`column`
\n
flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
\n\n\n
`column-reverse`
\n
表现和column相同，但是置换了主轴起点和主轴终点
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| flex-direction | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-direction)
\n
"
},
"flex-flow"
:{
"name"
:
"## flex-flow
\n
"
,
"description"
:
"
\n
CSS flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
flex-flow: <'flex-direction'> || <'flex-wrap'>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`column`
\n
Flex容器的主轴与当前写入模式的块轴具有相同的方向。
\n\n\n
`column-reverse`
\n
与“column”相同，只是交换了主起点和主终点方向。
\n\n\n
`row`
\n
Flex容器的主轴与当前书写模式的内联轴具有相同的方向。
\n\n\n
`row-reverse`
\n
与“row”相同，只是交换了主起点和主终点方向。
\n\n\n
`nowrap`
\n
Flex 容器是单行的。
\n\n\n
`wrap`
\n
Flexbox 是多行的。
\n\n\n
`wrap-reverse`
\n
与“wrap”相同，只是交叉起点和交叉终点方向交换了。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| flex-flow | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-flow)
\n
"
},
"flex-grow"
:{
"name"
:
"## flex-grow
\n
"
,
"description"
:
"
\n
CSS 属性 flex-grow CSS 设置 flex 项 主尺寸 的 flex 增长系数。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
flex-grow: <number>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| flex-grow | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-grow)
\n
"
},
"flex-shrink"
:{
"name"
:
"## flex-shrink
\n
"
,
"description"
:
"
\n
CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
flex-shrink: <number>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| flex-shrink | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-shrink)
\n
"
},
"flex-wrap"
:{
"name"
:
"## flex-wrap
\n
"
,
"description"
:
"
\n
CSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
flex-wrap: nowrap | wrap | wrap-reverse;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`nowrap`
\n
flex 的元素被摆放到到一行，这可能导致 flex 容器溢出。cross-start 会根据 flex-direction 的值等价于 start 或 before。为该属性的默认值。
\n\n\n
`wrap`
\n\n\n\n
`wrap-reverse`
\n
和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| flex-wrap | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-wrap)
\n
"
},
"font-family"
:{
"name"
:
"## font-family
\n
"
,
"description"
:
"
\n
CSS 属性 font-family 允许你通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
font-family: <family-name>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`cursive`
\n
草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。
\n
例如：Brush Script MT、Brush Script Std、Lucida Calligraphy、Lucida Handwriting、Apple Chancery、cursive。
\n\n\n
`fantasy`
\n
Fantasy 字体主要是那些具有特殊艺术效果的字体。
\n
例如：Papyrus、Herculanum、Party LET、Curlz MT、Harrington、fantasy。
\n\n\n
`monospace`
\n
等宽字体，即字体中每个字宽度相同。
\n
例如：Fira Mono、DejaVu Sans Mono、Menlo、Consolas、Liberation Mono、Monaco、Lucida Console、monospace。
\n\n\n
`sans-serif`
\n
无衬线字体，即笔画结尾是平滑的字体。
\n
例如：Open Sans、Fira Sans、Lucida Sans、Lucida Sans Unicode、Trebuchet MS、Liberation Sans、Nimbus Sans L、sans-serif。
\n\n\n
`serif`
\n
带衬线字体，笔画结尾有特殊的装饰线或衬线。
\n
例如：Lucida Bright、Lucida Fax、Palatino、Palatino Linotype、Palladio、URW Palladio、serif。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| font-family | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-family)
\n
"
},
"font-size"
:{
"name"
:
"## font-size
\n
"
,
"description"
:
"
\n
font-size CSS 属性设置字体大小。更改字体大小还会更新字体大小相关的 <length> 单位，例如 em、ex 等。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
font-size: <length>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`large`
\n\n\n\n
`larger`
\n\n\n\n
`medium`
\n\n\n\n
`small`
\n\n\n\n
`smaller`
\n\n\n\n
`x-large`
\n\n\n\n
`x-small`
\n\n\n\n
`xx-large`
\n\n\n\n
`xx-small`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| font-size | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-size)
\n
"
},
"font-style"
:{
"name"
:
"## font-style
\n
"
,
"description"
:
"
\n
font-style CSS 属性允许你选择 font-family 字体下的 italic 或 oblique 样式。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
font-style: italic | normal;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`italic`
\n
选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代。
\n\n\n
`normal`
\n
选择 font-family 的常规字体。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| font-style | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-style)
\n
"
},
"font-weight"
:{
"name"
:
"## font-weight
\n
"
,
"description"
:
"
\n
font-weight CSS 属性指定了字体的粗细程度。一些字体只提供 normal 和 bold 两种值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
font-weight: normal | bold | 400 | 700;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`normal`
\n
正常粗细。与 400 等值。
\n\n\n
`bold`
\n
加粗。与 700 等值。
\n\n\n
`400`
\n
普通的
\n\n\n
`700`
\n
大胆的
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| font-weight | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-weight)
\n
"
},
"height"
:{
"name"
:
"## height
\n
"
,
"description"
:
"
\n
height CSS 属性指定了一个元素的高度。默认情况下，这个属性决定的是内容区（ content area）的高度，但是，如果将 box-sizing 设置为 border-box , 这个属性决定的将是边框区域（border area）的高度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
height: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`fit-content`
\n
将 fill-content 公式中的可用位置替换为特定的参数以进行使用，如：min(max-content, max(min-content, ))
\n\n\n
`max-content`
\n
设置为允许的最大高度。
\n\n\n
`min-content`
\n
设置为允许的最小高度。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| height | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| fit-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| max-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| min-content | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/height)
\n
"
},
"justify-content"
:{
"name"
:
"## justify-content
\n
"
,
"description"
:
"
\n
CSS justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
justify-content: center | flex-start | flex-end | space-between | space-around;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`center`
\n
伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
\n\n\n
`flex-start`
\n
元素紧密地排列在弹性容器的主轴起始侧。仅应用于弹性布局的项目。对于不是弹性容器里的元素，此值将被视为 start。
\n\n\n
`flex-end`
\n
元素紧密地排列在弹性容器的主轴结束侧。仅应用于弹性布局的元素。对于不是弹性容器里的元素，此值将被视为 end。
\n\n\n
`space-between`
\n
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
\n\n\n
`space-around`
\n
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| justify-content | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/justify-content)
\n
"
},
"left"
:{
"name"
:
"## left
\n
"
,
"description"
:
"
\n
CSS **left**属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移，非定位元素设置此属性无效。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
left: <length> | <percentage> | auto;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
这个关键字表示：
\n
\n
对于绝对定位元素，元素将忽略此属性而以right属性为准，如果此时设置width: auto，将基于内容需要的宽度设置宽度；如果right也为auto的话，元素的水平位置就是它假如作为静态 (即 static) 元素时该在的位置。
\n
对于相对定位元素，元素相对正常位置的偏移量将基于right属性；如果right也为auto的话，元素将不会有偏移。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| left | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/left)
\n
"
},
"letter-spacing"
:{
"name"
:
"## letter-spacing
\n
"
,
"description"
:
"
\n
CSS 的 letter-spacing 属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。letter-spacing 的正值会导致字符分布得更远，而 letter-spacing 的负值会使字符更接近。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
letter-spacing: <length>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`normal`
\n
此间距是按照当前字体的正常间距确定的。和 0 不同的是，normal 会让用户代理调整文字之间空间来对齐文字。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| letter-spacing | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/letter-spacing)
\n
"
},
"line-height"
:{
"name"
:
"## line-height
\n
"
,
"description"
:
"
\n
line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
line-height: <length> | <number>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`normal`
\n
取决于用户代理。桌面浏览器（包括 Firefox）使用默认值，约为 1.2，这取决于元素的 font-family。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| line-height | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/line-height)
\n
"
},
"margin"
:{
"name"
:
"## margin
\n
"
,
"description"
:
"
\n
margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
margin: [ <length> | <percentage> ]{1,4};
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| margin | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/margin)
\n
"
},
"margin-bottom"
:{
"name"
:
"## margin-bottom
\n
"
,
"description"
:
"
\n
用于设置边距区域厚度值的简写属性。如果 left 省略，则与 right 相同。如果省略bottom，则与top相同；如果省略right，则与top相同。边距属性允许使用负值，但可能存在特定于实现的限制。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
margin-bottom: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
由浏览器自己选择一个合适的值。参见 margin。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| margin-bottom | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/margin-bottom)
\n
"
},
"margin-left"
:{
"name"
:
"## margin-left
\n
"
,
"description"
:
"
\n
margin-left 属性 设置与元素相关联的盒子模型的左外边距。这个值可以为负值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
margin-left: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| margin-left | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/margin-left)
\n
"
},
"margin-right"
:{
"name"
:
"## margin-right
\n
"
,
"description"
:
"
\n
margin-right 属性 设置与元素相关联的盒子模型的右外边距。这个值可以为负值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
margin-right: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
auto 关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。如果有几组 margin-left 和 margin-right 设置为 auto，那么最后计算的空间分布，会根据 display，float，position 属性，自动生成以下几种情况：
\n
\n
\n
\n
Value of display
\n
Value of float
\n
Value of position
\n
Computed value of auto
\n
Comment
\n
\n
\n
\n
\n
inline, inline-block, inline-table
\n
any
\n
static or relative
\n
0
\n
Inline layout mode
\n
\n
\n
block, inline, inline-block, block, table, inline-table, list-item, table-caption
\n
any
\n
static or relative
\n
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.
\n
Block layout mode
\n
\n
\n
block, inline, inline-block, block, table, inline-table, list-item, table-caption
\n
left or right
\n
static or relative
\n
0
\n
Block layout mode (floating element)
\n
\n
\n
any table-*, except table-caption
\n
any
\n
any
\n
0
\n
Internal table-* elements don't have margins, use border-spacing instead
\n
\n
\n
any, except flex, inline-flex, or table-*
\n
any
\n
fixed or absolute
\n
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.
\n
Absolutely positioned layout mode
\n
\n
\n
flex, inline-flex
\n
any
\n
any
\n
0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins.
\n
Flexbox layout mode
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| margin-right | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/margin-right)
\n
"
},
"margin-top"
:{
"name"
:
"## margin-top
\n
"
,
"description"
:
"
\n
margin-top CSS 属性用于设置元素的顶部外边距外边距区域。正值使它离相邻元素更远，而负值使它更靠近相邻元素。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
margin-top: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
浏览器选择一个合适的值来使用。参见 margin。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| margin-top | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/margin-top)
\n
"
},
"max-height"
:{
"name"
:
"## max-height
\n
"
,
"description"
:
"
\n
CSS属性 max-height 设置元素的最大高度。它防止height属性的使用值（used value）大于 max-height 的指定值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
max-height: <length>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`fit-content`
\n
根据写入模式使用 fit-content 内联大小或 fit-content 块大小。
\n\n\n
`max-content`
\n
根据写入模式使用最大内容内联大小或最大内容块大小。
\n\n\n
`min-content`
\n
根据写入模式使用最小内容内联大小或最小内容块大小。
\n\n\n
`auto`
\n\n\n\n
`none`
\n
盒子的高度没有限制。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| max-height | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| fit-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| max-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| min-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| auto | 5.0 | √ | x | 9.0 | √ | x |
\n
| none | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/max-height)
\n
"
},
"max-width"
:{
"name"
:
"## max-width
\n
"
,
"description"
:
"
\n
max-width 属性用来给元素设置最大宽度值。定义了 max-width 的元素会在达到 max-width 值之后避免进一步按照 width 属性设置变大。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
max-width: <length>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`fit-content`
\n\n\n\n
`max-content`
\n\n\n\n
`min-content`
\n\n\n\n
`auto`
\n\n\n\n
`none`
\n
盒子的宽度没有限制。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| max-width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| fit-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| max-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| min-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| auto | 5.0 | √ | x | 9.0 | √ | x |
\n
| none | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/max-width)
\n
"
},
"min-height"
:{
"name"
:
"## min-height
\n
"
,
"description"
:
"
\n
CSS 属性 min-height 能够设置元素的最小高度。这样能够防止 height 属性的应用值小于 min-height 的值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
min-height: <length>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`fit-content`
\n
根据写入模式使用 fit-content 内联大小或 fit-content 块大小。
\n\n\n
`max-content`
\n
根据写入模式使用最大内容内联大小或最大内容块大小。
\n\n\n
`min-content`
\n
根据写入模式使用最小内容内联大小或最小内容块大小。
\n\n\n
`auto`
\n\n\n\n
`none`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| min-height | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| fit-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| max-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| min-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| auto | 5.0 | √ | x | 9.0 | √ | x |
\n
| none | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/min-height)
\n
"
},
"min-width"
:{
"name"
:
"## min-width
\n
"
,
"description"
:
"
\n
min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
min-width: <length>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`fit-content`
\n
等同于 min(max-content, max(min-content, fill-available).
\n\n\n
`max-content`
\n
固有首选宽度。
\n\n\n
`min-content`
\n
固有最小宽度
\n\n\n
`auto`
\n
用于弹性元素的默认最小宽度。相比其他布局中以0为默认值，auto能为弹性布局指明更合理的默认表现。
\n\n\n
`none`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| min-width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| fit-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| max-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| min-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| auto | 5.0 | √ | x | 9.0 | √ | x |
\n
| none | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/min-width)
\n
"
},
"opacity"
:{
"name"
:
"## opacity
\n
"
,
"description"
:
"
\n
opacity 属性指定了一个元素的不透明度。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
opacity: <alpha-value>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| opacity | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/opacity)
\n
"
},
"overflow"
:{
"name"
:
"## overflow
\n
"
,
"description"
:
"
\n
overflow 是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
overflow: visible | hidden;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`visible`
\n
内容不能被裁减并且可能渲染到边距盒（padding）的外部。
\n\n\n
`hidden`
\n
如果需要，内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。内容可以以编程的方式滚动（例如，通过设置 scrollLeft 等属性的值或 scrollTo() 方法）, 因此该元素仍然是一个滚动的容器。
\n\n\n
`scroll`
\n
如果需要，内容将被裁减以适应边距（padding）盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。
\n\n\n
`auto`
\n
取决于用户代理。如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。
\n\n\n
`clip`
\n
类似于 hidden，内容将以元素的边距（padding）盒进行裁剪。clip 和 hidden 之间的区别是 clip 关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。如果你希望开启一个新的格式化上下文，你可以使用 display: flow-root 来这样做。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| overflow | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| scroll | 5.0 | √ | x | 9.0 | √ | x |
\n
| auto | 5.0 | √ | x | 9.0 | √ | x |
\n
| clip | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/overflow)
\n
"
},
"padding"
:{
"name"
:
"## padding
\n
"
,
"description"
:
"
\n
padding CSS 简写属性控制元素所有四条边的内边距区域。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
padding: [ <length> | <percentage> ]{1,4};
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| padding | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding)
\n
"
},
"padding-bottom"
:{
"name"
:
"## padding-bottom
\n
"
,
"description"
:
"
\n
CSS 属性 padding-bottom 是指一个元素在内边距区域（padding area）中下方的高度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
padding-bottom: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| padding-bottom | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-bottom)
\n
"
},
"padding-left"
:{
"name"
:
"## padding-left
\n
"
,
"description"
:
"
\n
CSS 属性 padding-left 是指一个元素在内边距区域（padding area）中左边的宽度。内边距（padding）是指一个元素的内容和边框之间的区域。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
padding-left: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| padding-left | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-left)
\n
"
},
"padding-right"
:{
"name"
:
"## padding-right
\n
"
,
"description"
:
"
\n
CSS 属性 padding-right 是指一个元素在内边距区域（padding area）中右边的宽度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
padding-right: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| padding-right | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-right)
\n
"
},
"padding-top"
:{
"name"
:
"## padding-top
\n
"
,
"description"
:
"
\n
CSS 属性 padding-top 是指一个元素在内边距区域（padding area）中上方的高度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
padding-top: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| padding-top | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-top)
\n
"
},
"pointer-events"
:{
"name"
:
"## pointer-events
\n
"
,
"description"
:
"
\n
pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
pointer-events: auto | none;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
与pointer-events属性未指定时的表现效果相同，对于 SVG 内容，该值与visiblePainted效果相同
\n\n\n
`none`
\n
元素永远不会成为鼠标事件的target (en-US)。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| pointer-events | 5.0 | x | 3.9.0 | 9.0 | x | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/pointer-events)
\n
"
},
"position"
:{
"name"
:
"## position
\n
"
,
"description"
:
"
\n
CSS position 属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
position: relative | absolute | fixed | static | sticky;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`relative`
\n
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
\n\n\n
`absolute`
\n
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
\n\n\n
`fixed`
\n
元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。
\n\n\n
`static`
\n
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
\n\n\n
`sticky`
\n
元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。
\n
该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见 Github issue on W3C CSSWG）。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| position | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| static | 5.0 | √ | x | 9.0 | √ | x |
\n
| sticky | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/position)
\n
"
},
"right"
:{
"name"
:
"## right
\n
"
,
"description"
:
"
\n
right CSS 属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移，非定位元素设置此属性无效。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
right: <length> | <percentage> | auto;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
这个关键字表示：
\n
\n
对于绝对定位元素，元素将忽略此属性而以 left 属性为准，如果此时设置 width: auto，将基于内容需要的宽度设置宽度；如果 left 也为 auto 的话，元素的水平位置就是它假如作为静态（即 static）元素时该在的位置。
\n
对于相对定位元素，元素相对正常位置的偏移量将基于 left 属性；如果 left 也为 auto 的话，元素将不会有偏移。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| right | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/right)
\n
"
},
"text-align"
:{
"name"
:
"## text-align
\n
"
,
"description"
:
"
\n
text-align CSS 属性设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 vertical-align 类似，但是是水平方向的。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
text-align: left | center | right;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`left`
\n
行内内容向左侧边对齐。
\n\n\n
`center`
\n
行内内容居中。
\n\n\n
`right`
\n
行内内容向右侧边对齐。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| text-align | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/text-align)
\n
"
},
"text-decoration"
:{
"name"
:
"## text-decoration
\n
"
,
"description"
:
"
\n
text-decoration 简写 CSS 属性设置文本上的装饰性线条的外观。它是 text-decoration-line、text-decoration-color、text-decoration-style 和较新的 text-decoration-thickness 属性的缩写。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`dashed`
\n
产生虚线样式。
\n\n\n
`dotted`
\n
产生一条虚线。
\n\n\n
`double`
\n
产生双线。
\n\n\n
`line-through`
\n
每行文本中间都有一条线。
\n\n\n
`none`
\n
不产生任何线条。
\n\n\n
`overline`
\n
每行文本上方都有一行。
\n\n\n
`solid`
\n
产生实线。
\n\n\n
`underline`
\n
每行文本都带有下划线。
\n\n\n
`wavy`
\n
产生一条波浪线。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| text-decoration | 5.0 | √ | x | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/text-decoration)
\n
"
},
"text-decoration-color"
:{
"name"
:
"## text-decoration-color
\n
"
,
"description"
:
"
\n
CSS 属性 text-decoration-color 用于设置文本修饰线的颜色，文本修饰线是通过 text-decoration-line 属性指定的。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
text-decoration-color: <color>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| text-decoration-color | 5.0 | √ | x | 9.0 | √ | - |
\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
"
},
"text-decoration-line"
:{
"name"
:
"## text-decoration-line
\n
"
,
"description"
:
"
\n
CSS 属性 text-decoration-line 用于设置元素中的文本的修饰类型。当要设置多个线修饰属性时，用 text-decoration 简写属性会比分别写多个属性更方便。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
text-decoration-line: underline | line-through | overline;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`underline`
\n
在文本的下方有一条修饰线。
\n\n\n
`line-through`
\n
有一条贯穿文本中间的修饰线。
\n\n\n
`overline`
\n
在文本的上方有一条修饰线。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| text-decoration-line | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| overline | 5.0 | √ | x | 9.0 | √ | 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
"
},
"text-decoration-style"
:{
"name"
:
"## text-decoration-style
\n
"
,
"description"
:
"
\n
CSS 属性 text-decoration-style 用于设置由 text-decoration-line 设定的线的样式。线的样式会应用到所有被 text-decoration-line 设定的线，不能为其中的每条线设置不同的样式。当要设置多个线修饰属性时，用 text-decoration 简写属性会比分别写多个属性更方便。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
text-decoration-style: solid | dashed | dotted | wavy;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`solid`
\n
产生实线。
\n\n\n
`dashed`
\n
产生虚线样式。
\n\n\n
`dotted`
\n
产生一条虚线。
\n\n\n
`wavy`
\n
产生一条波浪线。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| text-decoration-style | 5.0 | √ | x | 9.0 | √ | - |
\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
"
},
"text-overflow"
:{
"name"
:
"## text-overflow
\n
"
,
"description"
:
"
\n
text-overflow CSS 属性用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
text-overflow: clip | ellipsis;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`clip`
\n
默认值。这个关键字会在内容区域的极限处截断文本，因此可能会在单词的中间发生截断。如果你的目标浏览器支持 text-overflow: ''，为了能在两个单词过渡处截断，你可以使用一个空字符串值（''）作为 text-overflow 属性的值。
\n\n\n
`ellipsis`
\n
这个关键字会用一个省略号（'…'、U+2026 HORIZONTAL ELLIPSIS）来表示被截断的文本。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小以至于连省略号都容纳不下，那么这个省略号也会被截断。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| text-overflow | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/text-overflow)
\n
"
},
"top"
:{
"name"
:
"## top
\n
"
,
"description"
:
"
\n
top样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
top: <length> | <percentage> | auto;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
这个关键字表示：
\n
\n
对于绝对定位元素，元素将忽略此属性已bottom属性为准，如果此时设置height: auto，将基于内容需要的高度设置高度；如果bottom也为auto的话，元素的垂直位置就是它假如作为静态 (即 static) 元素时该在的位置。
\n
对于相对定位元素，元素相对正常位置的偏移量将基于bottom属性；如果bottom也为auto的话，元素将不会有偏移。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| top | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/top)
\n
"
},
"transform"
:{
"name"
:
"## transform
\n
"
,
"description"
:
"
\n
CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transform: <transform-list>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`rotate(
\\
<angle
\\
>)`
\n\n\n\n
`rotateX(
\\
<angle
\\
>)`
\n\n\n\n
`rotateY(
\\
<angle
\\
>)`
\n\n\n\n
`rotateZ(
\\
<angle
\\
>)`
\n\n\n\n
`scale(
\\
<number
\\
>
\\
<number
\\
>)`
\n\n\n\n
`scaleX(
\\
<number
\\
>)`
\n\n\n\n
`scaleY(
\\
<number
\\
>)`
\n\n\n\n
`translate(
\\
<length/percentage
\\
>
\\
<length/percentage
\\
>)`
\n\n\n\n
`translateX(
\\
<length/percentage
\\
>)`
\n\n\n\n
`translateY(
\\
<length/percentage
\\
>)`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| transform | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transform)
\n
"
},
"transform-origin"
:{
"name"
:
"## transform-origin
\n
"
,
"description"
:
"
\n
transform-origin CSS 属性让你更改一个元素变形的原点。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transform-origin: <length> | <percentage> | 关键字(top/left/right/bottom/center);
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`top`
\n\n\n\n
`left`
\n\n\n\n
`right`
\n\n\n\n
`bottom`
\n\n\n\n
`center`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| transform-origin | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transform-origin)
\n
"
},
"transition"
:{
"name"
:
"## transition
\n
"
,
"description"
:
"
\n
transition CSS 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性 (en-US)。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transition: <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`all`
\n
每一个能够经历改变的属性都会应用。
\n\n\n
`none`
\n
不会发生转变。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| transition | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition)
\n
"
},
"transition-delay"
:{
"name"
:
"## transition-delay
\n
"
,
"description"
:
"
\n
CSS 的transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transition-delay: <time>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| transition-delay | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition-delay)
\n
"
},
"transition-duration"
:{
"name"
:
"## transition-duration
\n
"
,
"description"
:
"
\n
transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s，表示不出现过渡动画。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transition-duration: <time>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| transition-duration | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition-duration)
\n
"
},
"transition-property"
:{
"name"
:
"## transition-property
\n
"
,
"description"
:
"
\n
transition-property 指定应用过渡属性的名称。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transition-property: <single-transition-property>#;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`width`
\n\n\n\n
`height`
\n\n\n\n
`margin`
\n\n\n\n
`margin-top`
\n\n\n\n
`margin-bottom`
\n\n\n\n
`margin-left`
\n\n\n\n
`margin-right`
\n\n\n\n
`left`
\n\n\n\n
`right`
\n\n\n\n
`top`
\n\n\n\n
`bottom`
\n\n\n\n
`padding`
\n\n\n\n
`padding-left`
\n\n\n\n
`padding-right`
\n\n\n\n
`padding-top`
\n\n\n\n
`padding-bottom`
\n\n\n\n
`opacity`
\n\n\n\n
`background-color`
\n\n\n\n
`border-color`
\n\n\n\n
`border-top-color`
\n\n\n\n
`border-bottom-color`
\n\n\n\n
`border-left-color`
\n\n\n\n
`border-right-color`
\n\n\n\n
`transform`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| transition-property | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition-property)
\n
"
},
"transition-timing-function"
:{
"name"
:
"## transition-timing-function
\n
"
,
"description"
:
"
\n
CSS 属性受到 transition effect的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个 transition 变化过程中，变化速度可以不断改变。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transition-timing-function: <easing-function>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`ease`
\n\n\n\n
`ease-in`
\n\n\n\n
`ease-out`
\n\n\n\n
`ease-in-out`
\n\n\n\n
`linear`
\n\n\n\n
`cubic-bezier`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| transition-timing-function | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition-timing-function)
\n
"
},
"visibility"
:{
"name"
:
"## visibility
\n
"
,
"description"
:
"
\n
visibility CSS 属性显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 <table> 中的行或列。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
visibility: visible | hidden;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`visible`
\n
元素框可见。
\n\n\n
`hidden`
\n
元素框不可见（不绘制），但仍然影响常规的布局。如果将其子元素的 visibility 设置为 visible，则该子元素依然可见。元素无法获得焦点（例如通过 tab 索引进行键盘导航）。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| visibility | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/visibility)
\n
"
},
"width"
:{
"name"
:
"## width
\n
"
,
"description"
:
"
\n
width 属性用于设置元素的宽度。width 默认设置内容区域的宽度，但如果 box-sizing 属性被设置为 border-box，就转而设置边框区域的宽度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
width: <length> | <percentage>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`fit-content`
\n
取以下两种值中的较大值：
\n
\n
固有的最小宽度
\n
固有首选宽度（max-content）和可用宽度（available）两者中的较小值
\n
\n
可表示为：min(max-content, max(min-content,
\\
<length-percentage
\\
>))
\n\n\n
`max-content`
\n
元素内容固有的（intrinsic）合适宽度。
\n\n\n
`min-content`
\n
元素内容固有的最小宽度。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| width | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
| fit-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| max-content | 5.0 | √ | x | 9.0 | √ | x |
\n
| min-content | 5.0 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/width)
\n
"
},
"z-index"
:{
"name"
:
"## z-index
\n
"
,
"description"
:
"
\n
CSS z-index 属性设置定位元素及其后代元素或 flex 项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
z-index: <integer>;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`auto`
\n
盒子不会创建一个新的局部层叠上下文。盒子在当前层叠上下文的层叠等级是 0。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| z-index | 5.0 | √ | 3.9.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/z-index)
\n
"
},
"text-decoration-thickness"
:{
"name"
:
"## text-decoration-thickness
\n
"
,
"description"
:
"
\n
CSS 属性 text-decoration-thickness 用于设置元素中文本所使用的装饰线（如 line-through、underline 或 overline）的笔触厚度。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
text-decoration-thickness: <length>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| text-decoration-thickness | 5.0 | √ | x | 9.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
"
},
"lines"
:{
"name"
:
"## lines
\n
"
,
"description"
:
"
\n
text 组件专有样式，设置文本组件最大行数
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
lines: <integer>;
\n
```
\n
"
,
"values"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- | :- |
\n
| lines | 5.0 | x | 3.9.0 | 9.0 | x | - |
\n
"
,
"reference"
:
""
}}
\ No newline at end of file
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑！
取消
想要评论请
注册
或
登录
