Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
643b9fd8
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3178
Star
105
Fork
805
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
93
列表
看板
标记
里程碑
合并请求
68
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
93
Issue
93
列表
看板
标记
里程碑
合并请求
68
合并请求
68
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
643b9fd8
编写于
8月 11, 2023
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: navbar uni-app-x
上级
44ba8c0f
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
667 addition
and
2 deletion
+667
-2
docs/.vuepress/config/navbar.js
docs/.vuepress/config/navbar.js
+1
-1
docs/.vuepress/utils/cssJson.json
docs/.vuepress/utils/cssJson.json
+666
-1
未找到文件。
docs/.vuepress/config/navbar.js
浏览文件 @
643b9fd8
...
...
@@ -45,7 +45,7 @@ export const navbar = [
{
text
:
'
uni-app x
'
,
type
:
'
link
'
,
link
:
'
/uni-app-x/css
'
link
:
'
/uni-app-x/css
/
'
},
{
text
:
'
插件
'
,
...
...
docs/.vuepress/utils/cssJson.json
浏览文件 @
643b9fd8
{
"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-end`
\n
所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
\n\n\n
`flex-start`
\n
所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
\n\n\n
`space-around`
\n
所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
\n\n\n
`space-between`
\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 | 4.4 | √ | 4.0.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
`baseline`
\n
所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。
\n\n\n
`center`
\n
元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
\n\n\n
`flex-end`
\n
元素向侧轴终点对齐。
\n\n\n
`flex-start`
\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-items | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| baseline | 4.4 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/align-items)
\n
"
},
"background"
:{
"name"
:
"## background
\n
"
,
"description"
:
"
\n
background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
background: <color> | <gradient>;
\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 | 4.4 | √ | 4.0.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"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| background-clip | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\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 | 4.4 | √ | 4.0.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
`none`
\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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| border-bottom-style | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| border-left-style | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| border-right-style | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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"
:
""
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| border-top-style | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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\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
| box-shadow | 4.4 | √ | 4.0.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
`border-box`
\n
该元素上指定的宽度和高度（以及各自的最小/最大属性）决定了该元素的边框。
\n\n\n
`content-box`
\n
CSS2.1 指定的宽度和高度行为。指定的宽度和高度（以及各自的最小/最大属性）分别应用于元素内容框的宽度和高度。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| box-sizing | 4.4 | √ | 4.0.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
color CSS 属性设置颜色值的前景色以及文本装饰，并设置<currentcolor> (en-US)值。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 | 4.4 | √ | 4.0.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
`block`
\n
元素生成一个块级盒子
\n\n\n
`contents`
\n
元素本身不会生成任何盒子，但它的子元素和伪元素仍然正常生成盒子。
\n\n\n
`flex`
\n
该元素生成一个主要的 Flex 容器框并建立一个 Flex 格式化上下文。
\n\n\n
`flexbox`
\n
该元素使用流布局（块内联布局）来布局其内容。标准化为“柔性”。
\n\n\n
`flow-root`
\n
该元素生成一个块容器框，并使用流布局来布局其内容。
\n\n\n
`grid`
\n
该元素生成主网格容器框，并建立网格格式化上下文。
\n\n\n
`inline`
\n
该元素生成一个内联级别的框。
\n\n\n
`inline-block`
\n
内联块级元素，其本身作为单个内联框流动，类似于替换元素。内联块的内部被格式化为块框，并且框本身被格式化为内联框。
\n\n\n
`inline-flex`
\n
内联级弹性容器。
\n\n\n
`inline-flexbox`
\n
内联级弹性容器。标准化为“内联柔性”
\n\n\n
`inline-table`
\n
包含表格框的内联级表格包装框。
\n\n\n
`list-item`
\n
一个或多个块框和一个标记框。
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
`none`
\n
该元素及其后代不显示。
\n\n\n
`ruby`
\n
该元素生成一个主要的 ruby 容器框，并建立一个 ruby 格式化上下文。
\n\n\n
`ruby-base`
\n\n\n\n
`ruby-base-container`
\n\n\n\n
`ruby-text`
\n\n\n\n
`ruby-text-container`
\n\n\n\n
`run-in`
\n
该元素生成一个插入框。插入元素的行为类似于内联或块，具体取决于周围的元素。
\n\n\n
`table`
\n
该元素生成包含附加生成的表框的主表包装框，并建立表格式化上下文。
\n\n\n
`table-caption`
\n\n\n\n
`table-cell`
\n\n\n\n
`table-column`
\n\n\n\n
`table-column-group`
\n\n\n\n
`table-footer-group`
\n\n\n\n
`table-header-group`
\n\n\n\n
`table-row`
\n\n\n\n
`table-row-group`
\n\n\n\n\n\n\n\n\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| display | 4.4 | √ | 4.0.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
`auto`
\n
元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为
\"
flex: 1 1 auto
\"
.
\n\n\n
`content`
\n
表示根据弹性项目的内容自动调整大小。
\n\n\n
`none`
\n
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为
\"
flex: 0 0 auto
\"
。
\n\n\n
`initial`
\n
元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为
\"
flex: 0 1 auto
\"
。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| flex | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| content | 4.4 | √ | 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
`column`
\n
flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
\n\n\n
`column-reverse`
\n
表现和column相同，但是置换了主轴起点和主轴终点
\n\n\n
`row`
\n
flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
\n\n\n
`row-reverse`
\n
表现和 row 相同，但是置换了主轴起点和主轴终点
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| flex-direction | 4.4 | √ | 4.0.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
`nowrap`
\n
Flex 容器是单行的。
\n\n\n
`row`
\n
Flex容器的主轴与当前书写模式的内联轴具有相同的方向。
\n\n\n
`row-reverse`
\n
与“row”相同，只是交换了主起点和主终点方向。
\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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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
flex 元素 被打断到多个行中。cross-start 会根据 flex-direction 的值等价于 start 或before。cross-end 为确定的 cross-start 的另一端。
\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 | 4.4 | √ | 4.0.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
`system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`
\n\n\n\n
`Arial, Helvetica, sans-serif`
\n\n\n\n
`Cambria, Cochin, Georgia, Times, 'Times New Roman', serif`
\n\n\n\n
`'Courier New', Courier, monospace`
\n\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
`'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif`
\n\n\n\n
`Georgia, 'Times New Roman', Times, serif`
\n\n\n\n
`'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif`
\n\n\n\n
`Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif`
\n\n\n\n
`'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif`
\n\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
`'Segoe UI', Tahoma, Geneva, Verdana, sans-serif`
\n\n\n\n
`serif`
\n
带衬线字体，笔画结尾有特殊的装饰线或衬线。
\n
例如：Lucida Bright、Lucida Fax、Palatino、Palatino Linotype、Palladio、URW Palladio、serif。
\n\n\n
`'Times New Roman', Times, serif`
\n\n\n\n
`'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif`
\n\n\n\n
`Verdana, Geneva, Tahoma, sans-serif`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| font-family | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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
选择一种标记为“斜体”的字体，如果不是，则选择标记为“斜体”的字体
\n\n\n
`normal`
\n
选择被分类为“正常”的面孔。
\n\n\n
`oblique`
\n
选择一种标记为“斜体”的字体，如果不是，则选择标记为“斜体”的字体。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| font-style | 4.4 | √ | 4.0.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
`100`
\n
薄的
\n\n\n
`200`
\n
超轻（超轻）
\n\n\n
`300`
\n
光
\n\n\n
`400`
\n
普通的
\n\n\n
`500`
\n
中等的
\n\n\n
`600`
\n
半粗体（半粗体）
\n\n\n
`700`
\n
大胆的
\n\n\n
`800`
\n
超粗体（超粗体）
\n\n\n
`900`
\n
黑色（重）
\n\n\n
`bold`
\n
与700相同
\n\n\n
`bolder`
\n
指定比继承值更粗的面的粗细。
\n\n\n
`lighter`
\n
指定比继承值更轻的面的权重。
\n\n\n
`normal`
\n
与400相同
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| font-weight | 4.4 | √ | 4.0.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
`auto`
\n
高度取决于其他属性的值。
\n\n\n
`fit-content`
\n
根据写入模式使用 fit-content 内联大小或 fit-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 | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| fit-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| max-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| min-content | 4.4 | √ | 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
`start`
\n
物品在主轴上朝向对齐容器的起始边缘彼此齐平地包装。
\n\n\n
`end`
\n
物品沿主轴线朝向对准容器的端部边缘彼此齐平地包装。
\n\n\n
`left`
\n
物品沿主轴线朝向对齐容器的左边缘彼此齐平地包装。
\n\n\n
`right`
\n
物品沿主轴线朝向对齐容器的右边缘彼此齐平地包装。
\n\n\n
`safe`
\n
如果项目的大小溢出对齐容器，则该项目会像启动对齐模式一样进行对齐。
\n\n\n
`unsafe`
\n
无论项目和对齐容器的相对大小如何，都会遵循给定的对齐值。
\n\n\n
`stretch`
\n
如果对齐主题的组合大小小于对齐容器的大小，则任何自动调整大小的对齐主题的大小均等（不按比例）增加，同时仍然遵守 max-height/max-width （或等效功能）施加的约束，以便组合大小恰好填充对齐容器。
\n\n\n
`space-evenly`
\n
物品沿主轴线均匀分布在对齐容器内。
\n\n\n
`flex-end`
\n
Flex 商品在生产线末端进行包装。
\n\n\n
`flex-start`
\n
Flex 商品包装在生产线的开头。
\n\n\n
`space-around`
\n
Flex 项目均匀分布在行中，两端各有一半的空间。
\n\n\n
`space-between`
\n
Flex 项目均匀分布在行中。
\n\n\n
`baseline`
\n
指定参与第一基线对齐。
\n\n\n
`first baseline`
\n
指定参与第一基线对齐。
\n\n\n
`last baseline`
\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 | 4.4 | √ | 4.0.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
对于 non-replaced 元素，该值的效果取决于哪些相关属性也具有“自动”的值
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| left | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/left)
\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>;
\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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| margin-bottom | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| margin-right | 4.4 | √ | 4.0.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\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| margin-top | 4.4 | √ | 4.0.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
`none`
\n
盒子的高度没有限制。
\n\n\n
`fit-content`
\n
根据写入模式使用 fit-content 内联大小或 fit-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
| max-height | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| fit-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| max-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| min-content | 4.4 | √ | 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
`none`
\n
盒子的宽度没有限制。
\n\n\n
`fit-content`
\n
Use the fit-content inline size or fit-content block size, as appropriate to the writing mode.
\n\n\n
`max-content`
\n
Use the max-content inline size or max-content block size, as appropriate to the writing mode.
\n\n\n
`min-content`
\n
Use the min-content inline size or min-content block size, as appropriate to the writing mode.
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| max-width | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| fit-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| max-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| min-content | 4.4 | √ | 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
`auto`
\n\n\n\n
`fit-content`
\n
根据写入模式使用 fit-content 内联大小或 fit-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
| min-height | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| fit-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| max-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| min-content | 4.4 | √ | 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
`auto`
\n\n\n\n
`fit-content`
\n
使用 fit-content 的内联尺寸或 fit-content 的块大小，适合writing-mode。
\n\n\n
`max-content`
\n
Use the max-content inline size or max-content block size, as appropriate to the writing mode.
\n\n\n
`min-content`
\n
Use the min-content inline size or min-content block size, as appropriate to the writing mode.
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| min-width | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| fit-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| max-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| min-content | 4.4 | √ | 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 | 4.4 | √ | 4.0.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
`auto`
\n
“auto”值的行为取决于 UA，但应该为溢出的框提供滚动机制。
\n\n\n
`hidden`
\n
内容被剪切，并且不应提供滚动机制来查看剪切区域之外的内容。
\n\n\n\n\n
`scroll`
\n
内容被剪辑，如果用户代理使用屏幕上可见的滚动机制（例如滚动条或平移器），则无论其任何内容是否被剪辑，都应该为框显示该机制。
\n\n\n
`visible`
\n
内容不会被剪裁，即，它可能会呈现在内容框之外。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| overflow | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-top)
\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
`absolute`
\n
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
\n\n\n
`fixed`
\n
元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。
\n\n\n\n\n
`relative`
\n
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
\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\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| position | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| static | 4.4 | √ | x | 9.0 | √ | x |
\n
| sticky | 4.4 | √ | 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 | 4.4 | √ | 4.0.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 属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
text-align: left | center | right;
\n
```
\n
"
,
"values"
:
"
\n
### 属性值
\n\n
`center`
\n
内联内容在行框内居中。
\n\n\n
`end`
\n
内联内容与行框的末端边缘对齐。
\n\n\n
`justify`
\n
文本根据“text-justify”属性指定的方法进行对齐。
\n\n\n
`left`
\n
内联内容与行框的左边缘对齐。在垂直文本中，“左”与行框的边缘对齐，该边缘将是从左到右文本的起始边缘。
\n\n\n
`right`
\n
内联内容与行框的右边缘对齐。在垂直文本中，“右”与行框的边缘对齐，该边缘将是从左到右文本的结束边缘。
\n\n\n
`start`
\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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 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 | 4.4 | √ | 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
`line-through`
\n
每行文本中间都有一条线。
\n\n\n
`none`
\n
既不产生也不抑制文本装饰。
\n\n\n
`overline`
\n
每行文本上方都有一行。
\n\n\n
`underline`
\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 | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| overline | 4.4 | √ | 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
`dashed`
\n
产生虚线样式。
\n\n\n
`dotted`
\n
产生一条虚线。
\n\n\n
`double`
\n
产生双线。
\n\n\n
`none`
\n
不产生任何线条。
\n\n\n
`solid`
\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 | 4.4 | √ | 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
剪辑溢出的内联内容。角色可能仅部分呈现。
\n\n\n
`ellipsis`
\n
渲染省略号字符 (U+2026) 以表示剪辑的内联内容。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| text-overflow | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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
`matrix()`
\n
以六个值的变换矩阵的形式指定 2D 变换。Matrix(a,b,c,d,e,f) 相当于应用变换矩阵
\\
[abcdef
\\
]
\n\n\n
`matrix3d()`
\n
将 3D 变换指定为由 16 个值（按列优先顺序）组成的 4x4 齐次矩阵。
\n\n\n
`none`
\n\n\n\n
`perspective()`
\n
指定透视投影矩阵。
\n\n\n
`rotate()`
\n
按参数中指定的角度指定关于元素原点的 2D 旋转，如 Transform-origin 属性所定义。
\n\n\n
`rotate3d()`
\n
指定围绕前 3 个参数描述的
\\
[x,y,z
\\
] 方向向量按最后一个参数中指定的角度进行顺时针 3D 旋转。
\n\n\n
`rotateX('angle')`
\n
指定绕 X 轴顺时针旋转给定角度。
\n\n\n
`rotateY('angle')`
\n
指定绕 Y 轴顺时针旋转给定角度。
\n\n\n
`rotateZ('angle')`
\n
指定绕 Z 轴顺时针旋转给定角度。
\n\n\n
`scale()`
\n
通过 2 个参数描述的
\\
[sx,sy
\\
] 缩放向量指定 2D 缩放操作。如果未提供第二个参数，则其值等于第一个参数。
\n\n\n
`scale3d()`
\n
通过 3 个参数描述的
\\
[sx,sy,sz
\\
] 缩放向量指定 3D 缩放操作。
\n\n\n
`scaleX()`
\n
使用
\\
[sx,1
\\
] 缩放向量指定缩放操作，其中 sx 作为参数给出。
\n\n\n
`scaleY()`
\n
使用
\\
[sy,1
\\
] 缩放向量指定缩放操作，其中 sy 作为参数给出。
\n\n\n
`scaleZ()`
\n
使用
\\
[1,1,sz
\\
] 缩放向量指定缩放操作，其中 sz 作为参数给出。
\n\n\n
`skew()`
\n
指定沿 X 轴和 Y 轴的倾斜变换。第一个角度参数指定 X 轴上的倾斜。第二个角度参数指定 Y 轴上的倾斜。如果未给出第二个参数，则 Y 角度使用值 0（即：Y 轴上没有倾斜）。
\n\n\n
`skewX()`
\n
指定沿 X 轴按给定角度进行倾斜变换。
\n\n\n
`skewY()`
\n
指定沿 Y 轴按给定角度进行倾斜变换。
\n\n\n
`translate()`
\n
通过向量
\\
[tx, ty
\\
] 指定 2D 平移，其中 tx 是第一个平移值参数，ty 是可选的第二个平移值参数。
\n\n\n
`translate3d()`
\n
通过向量
\\
[tx,ty,tz
\\
] 指定 3D 平移，其中 tx、ty 和 tz 分别是第一、第二和第三平移值参数。
\n\n\n
`translateX()`
\n
指定 X 方向上给定量的平移。
\n\n\n
`translateY()`
\n
指定 Y 方向上给定量的平移。
\n\n\n
`translateZ()`
\n
指定 Z 方向上给定量的平移。请注意，translateZ 翻译值中不允许使用百分比值，如果存在，则计算为 0。
\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 | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transform)
\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: <single-transition>#;
\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 | 4.4 | √ | 4.0.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属性规定了在过渡效果开始作用之前需要等待的时间。值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的 css 属性（transition-property）
\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 | 4.4 | √ | 4.0.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，表示不出现过渡动画。可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。
\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 | 4.4 | √ | 4.0.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
`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-property | 4.4 | √ | 4.0.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 变化过程中，变化速度可以不断改变。这条加速度曲线被<timing-function> (en-US)所定义，之后作用到每个 CSS 属性的过渡。你可以规定多个 timing function，通过使用 transition-property属性，可以根据主列表 (transition property 的列表) 给每个 CSS 属性应用相应的 timing function.如果 timing function 的个数比主列表中数量少，缺少的值被设置为初始值（ease） 。如果 timing function 比主列表要多，timing function 函数列表会被截断至合适的大小。这两种情况下声明的 CSS 属性都是有效的。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transition-timing-function: <easing-function>#;
\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-timing-function | 4.4 | √ | 4.0.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
`collapse`
\n
特定桌子。 如果在行，行组，列或列组以外的其他元素上使用，则“collapse”的含义与“hidden”相同。
\n\n\n
`hidden`
\n
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout.
\n\n\n
`visible`
\n
The generated box is visible.
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| visibility | 4.4 | √ | 4.0.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
`auto`
\n
宽度取决于其他属性的值。
\n\n\n
`fit-content`
\n
根据写入模式使用 fit-content 内联大小或 fit-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
| width | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| fit-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| max-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| min-content | 4.4 | √ | 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
z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
z-index: <integer>;
\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
| z-index | 4.4 | √ | 4.0.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 | 4.4 | √ | 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"
:
""
,
"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 | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
""
}}
\ No newline at end of file
{
"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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| baseline | 4.4 | √ | x | 9.0 | √ | x |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/align-items)
\n
"
},
"background"
:
{
"name"
:
"## background
\n
"
,
"description"
:
"
\n
background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
background: <color> | <gradient>;
\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 | 4.4 | √ | 4.0.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\n\n\n
`content-box`
\n\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| background-clip | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| padding-box | 4.4 | √ | x | 9.0 | √ | x |
\n
| content-box | 4.4 | √ | 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 | 4.4 | √ | 4.0.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
`none`
\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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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
color CSS 属性设置颜色值的前景色以及文本装饰，并设置<currentcolor> (en-US)值。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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| content | 4.4 | √ | 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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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
flex 元素 被打断到多个行中。cross-start 会根据 flex-direction 的值等价于 start 或before。cross-end 为确定的 cross-start 的另一端。
\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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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
选择一种标记为“斜体”的字体，如果不是，则选择标记为“斜体”的字体
\n\n\n
`normal`
\n
选择被分类为“正常”的面孔。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| font-style | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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
根据写入模式使用 fit-content 内联大小或 fit-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 | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| fit-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| max-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| min-content | 4.4 | √ | 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
Flex 商品包装在生产线的开头。
\n\n\n
`flex-end`
\n
Flex 商品在生产线末端进行包装。
\n\n\n
`space-between`
\n
Flex 项目均匀分布在行中。
\n\n\n
`space-around`
\n
Flex 项目均匀分布在行中，两端各有一半的空间。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| justify-content | 4.4 | √ | 4.0.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
对于 non-replaced 元素，该值的效果取决于哪些相关属性也具有“自动”的值
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| left | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/left)
\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>;
\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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| margin-bottom | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| margin-right | 4.4 | √ | 4.0.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\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| margin-top | 4.4 | √ | 4.0.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
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| max-height | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| fit-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| max-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| min-content | 4.4 | √ | 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
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| max-width | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| fit-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| max-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| min-content | 4.4 | √ | 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
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| min-height | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| fit-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| max-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| min-content | 4.4 | √ | 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
使用 fit-content 的内联尺寸或 fit-content 的块大小，适合writing-mode。
\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
| min-width | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| fit-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| max-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| min-content | 4.4 | √ | 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 | 4.4 | √ | 4.0.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
内容不会被剪裁，即，它可能会呈现在内容框之外。
\n\n\n
`hidden`
\n
内容被剪切，并且不应提供滚动机制来查看剪切区域之外的内容。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| overflow | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-top)
\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 | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| static | 4.4 | √ | x | 9.0 | √ | x |
\n
| sticky | 4.4 | √ | 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 | 4.4 | √ | 4.0.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 属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 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 | 4.4 | √ | 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 | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| overline | 4.4 | √ | 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 | 4.4 | √ | 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
剪辑溢出的内联内容。角色可能仅部分呈现。
\n\n\n
`ellipsis`
\n
渲染省略号字符 (U+2026) 以表示剪辑的内联内容。
\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| text-overflow | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.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 | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
"
\n
### 参见
\n
- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transform)
\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: <single-transition>#;
\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 | 4.4 | √ | 4.0.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属性规定了在过渡效果开始作用之前需要等待的时间。值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的 css 属性（transition-property）
\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 | 4.4 | √ | 4.0.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，表示不出现过渡动画。可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。
\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 | 4.4 | √ | 4.0.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
`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-property | 4.4 | √ | 4.0.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 变化过程中，变化速度可以不断改变。这条加速度曲线被<timing-function> (en-US)所定义，之后作用到每个 CSS 属性的过渡。你可以规定多个 timing function，通过使用 transition-property属性，可以根据主列表 (transition property 的列表) 给每个 CSS 属性应用相应的 timing function.如果 timing function 的个数比主列表中数量少，缺少的值被设置为初始值（ease） 。如果 timing function 比主列表要多，timing function 函数列表会被截断至合适的大小。这两种情况下声明的 CSS 属性都是有效的。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
transition-timing-function: <easing-function>#;
\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-timing-function | 4.4 | √ | 4.0.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\n
"
,
"compatibility"
:
"### 兼容性
\n\n
#### uni-app 兼容性
\n
| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :-| :-| :-| :-| :-| :-| :-|
\n
| visibility | 4.4 | √ | 4.0.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
根据写入模式使用 fit-content 内联大小或 fit-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
| width | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
| fit-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| max-content | 4.4 | √ | x | 9.0 | √ | x |
\n
| min-content | 4.4 | √ | 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
z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。
\n
"
,
"syntax"
:
"
\n
### 语法
\n
```
\n
z-index: <integer>;
\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
| z-index | 4.4 | √ | 4.0.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 | 4.4 | √ | 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"
:
""
,
"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 | 4.4 | √ | 4.0.0 | 9.0 | √ | - |
\n
"
,
"reference"
:
""
}
}
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑！
取消
想要评论请
注册
或
登录
