> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.
# 自定义样式介绍
> 页面介绍了不同版本（免费版、轻享版、专业版、专属版）的功能对比，特别是自定义页面样式的能力。还详细解释了CSS布局相关属性如内边距、外边距及边框等的使用方法。
| **能力** | **免费版** | **轻享版** | **专业版** | **专属版** |
| ------- | ------- | ------- | ------- | ------- |
| 自定义页面样式 | 不支持 | 不支持 | 支持 | 支持 |
## 1. 简介
目前只有**图文展示**、**布局容器**、**分组组件**有样式设置，可以对表单组件进行布局排版，达到更美观的效果
## 2. 功能介绍
### 2.1 源码编辑
当部分 CSS 样式在设置器中无法满足需求的时候，源码编辑支持编写 CSS 样式代码来自定义样式；
源码编辑和右侧的设置器是完全同步更改的，编辑完，即刻生效，两侧同步修改
案例参考：[怎么修改单行文本组件的样式大小](https://www.yuque.com/yida/subject/amsqtc)
### 2.2 默认状态
| **属性** | **描述** |
| ------- | -------------------- |
| :active | 向被激活的元素添加样式。 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 |
### 2.3 布局
#### 2.3.1 CSS 框模型概述
#### 2.3.2 CSS 内边距属性
| **属性** | **描述** |
| ------------------------------------------------------------------------- | -------------------------- |
| [padding](http://www.w3school.com.cn/cssref/pr_padding.asp) | 简写属性。作用是在一个声明中设置元素的所内边距属性。 |
| [padding-bottom](http://www.w3school.com.cn/cssref/pr_padding-bottom.asp) | 设置元素的下内边距。 |
| [padding-left](http://www.w3school.com.cn/cssref/pr_padding-left.asp) | 设置元素的左内边距。 |
| [padding-right](http://www.w3school.com.cn/cssref/pr_padding-right.asp) | 设置元素的右内边距。 |
| [padding-top](http://www.w3school.com.cn/cssref/pr_padding-top.asp) | 设置元素的上内边距。 |
#### 2.3.3 CSS 外边距属性
| **属性** | **描述** |
| ----------------------------------------------------------------------- | --------------------- |
| [margin](http://www.w3school.com.cn/cssref/pr_margin.asp) | 简写属性。在一个声明中设置所有外边距属性。 |
| [margin-bottom](http://www.w3school.com.cn/cssref/pr_margin-bottom.asp) | 设置元素的下外边距。 |
| [margin-left](http://www.w3school.com.cn/cssref/pr_margin-left.asp) | 设置元素的左外边距。 |
| [margin-right](http://www.w3school.com.cn/cssref/pr_margin-right.asp) | 设置元素的右外边距。 |
| [margin-top](http://www.w3school.com.cn/cssref/pr_margin-top.asp) | 设置元素的上外边距。 |
#### 2.3.4 CSS 边框属性
| **属性** | 描述 |
| ----------------------------------------------------------------------------------- | ------------------------------------- |
| [border](http://www.w3school.com.cn/cssref/pr_border.asp) | 简写属性，把针对四个边的属性设置在一个声明。 |
| [border-style](http://www.w3school.com.cn/cssref/pr_border-style.asp) | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| [border-width](http://www.w3school.com.cn/cssref/pr_border-width.asp) | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| [border-color](http://www.w3school.com.cn/cssref/pr_border-color.asp) | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| [border-bottom](http://www.w3school.com.cn/cssref/pr_border-bottom.asp) | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| [border-bottom-color](http://www.w3school.com.cn/cssref/pr_border-bottom_color.asp) | 设置元素的下边框的颜色。 |
| [border-bottom-style](http://www.w3school.com.cn/cssref/pr_border-bottom_style.asp) | 设置元素的下边框的样式。 |
| [border-bottom-width](http://www.w3school.com.cn/cssref/pr_border-bottom_width.asp) | 设置元素的下边框的宽度。 |
| [border-left](http://www.w3school.com.cn/cssref/pr_border-left.asp) | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| [border-left-color](http://www.w3school.com.cn/cssref/pr_border-left_color.asp) | 设置元素的左边框的颜色。 |
| [border-left-style](http://www.w3school.com.cn/cssref/pr_border-left_style.asp) | 设置元素的左边框的样式。 |
| [border-left-width](http://www.w3school.com.cn/cssref/pr_border-left_width.asp) | 设置元素的左边框的宽度。 |
| [border-right](http://www.w3school.com.cn/cssref/pr_border-right.asp) | 简写属性，用于把右边框的所有属性设置到一个声明中。 |
| [border-right-color](http://www.w3school.com.cn/cssref/pr_border-right_color.asp) | 设置元素的右边框的颜色。 |
| [border-right-style](http://www.w3school.com.cn/cssref/pr_border-right_style.asp) | 设置元素的右边框的样式。 |
| [border-right-width](http://www.w3school.com.cn/cssref/pr_border-right_width.asp) | 设置元素的右边框的宽度。 |
| [border-top](http://www.w3school.com.cn/cssref/pr_border-top.asp) | 简写属性，用于把上边框的所有属性设置到一个声明中。 |
| [border-top-color](http://www.w3school.com.cn/cssref/pr_border-top_color.asp) | 设置元素的上边框的颜色。 |
| [border-top-style](http://www.w3school.com.cn/cssref/pr_border-top_style.asp) | 设置元素的上边框的样式。 |
| [border-top-width](http://www.w3school.com.cn/cssref/pr_border-top_width.asp) | 设置元素的上边框的宽度。 |
### 2.4 显示
#### 2.4.1 block
块级元素，总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；
宽度(**width**)、高度(**height**)、内边距(**padding**)和外边距(**margin**)都可控制；
#### 2.4.2 inline-block
内联块元素，和相邻的内联元素在同一行，表现为同行显示；
宽度(**width**)、高度(**height**)、内边距(**padding**)和外边距(**margin**)都可控制；
#### 2.4.3 inline
内联元素，和相邻的内联元素在同一行；
宽度(**width**)、高度(**height**)、内边距的\*\*top/bottom(padding-top/padding-bottom)**和外边距的**top/bottom(margin-top/margin-bottom)\*\*都不可改变，就是里面文字或图片的大小；
#### 2.4.4 flex（非技术同学尽量使用分栏布局排版）
弹性布局，可以简便、完整、响应式地实现各种页面布局。
flex布局的元素，称为flex容器，容器默认存在两根轴：水平的主轴和垂直的交叉轴。
**Direction：row** 主轴为水平方向，起点在左端（默认值）
**Direction：column** 主轴为水平方向，起点在右端
**Direction：row-reverse**主轴为垂直方向，起点在上沿
**Direction：column-reverse**主轴为垂直方向，起点在下沿
**Align：flex-start** 交叉轴的起点对齐
**Align：flex-end** 交叉轴的终点对齐
**Align：center** 交叉轴的中点对齐
**Align：baseline** 项目的第一行文字的基线对齐
**Align：stretch** 如果项目未设置高度或设为 auto，将占满整个容器的高度（默认值）
**Justify：flex-start** 左对齐（默认值）
**Justify：flex-end** 右对齐
**Justify：center** 居中
**Justify：space-between** 两端对齐，项目之间的间隔都相等
**Justify：space-around**每个项目两侧的间隔相等。
注：详细教程请见 [**Flex布局语法教程**](https://www.yuque.com/yida-old/help/shdd40)
### 2.5 文字
**(1) 字体**：文字的字体；
**(2) 字重**：文字的粗细；
**(3) 样式**：文字的样式（正常、斜体）；
**(4) 颜色**：文字的颜色；
**(5) 大小**：文字的大小；
**(6) 行高**：文字所在行的高度；
**(7) 对齐**：文字的对齐方式（左对齐，居中，右对齐，两端对齐）；
**(8) 修饰**：文字修饰（正常，下划线，删除线）。
### 2.6 背景
**(1) 填充色**：背景的颜色；
**(2) 图片**：以图片作为背景。
### 2.7 边框
**(1) 线型**：边框的线型（实线、点线、虚线）；
**(2) 宽度**：边框的宽度；
**(3) 颜色**：边框的颜色；
**(4) 圆角**：边框圆角的大小。
### 2.8 效果
**(1) 透明度**：元素的透明效果，值越小越透明；
**(2) 鼠标手势**：鼠标在该元素上展示的鼠标样式（指针、手势）。
### 2.9 阴影
**(1) 颜色**：阴影的颜色；
**(2) X**：阴影在水平方向的偏移；
**(3) Y**：阴影在垂直方向上的偏移；
**(4) Blur**：阴影模糊距离,值越大阴影的边缘就越模糊；
**(5) Spread**：阴影扩展半径,如果值为正则整个阴影都延展扩大,值为负则缩小。
> 😋如果上述帮助文档未能解决您的问题，请联系 [幸福的棉花糖](https://yuque.com/yanxin)