---
order: 5
navTitle: 设置组件样式
indexTitle: 概述
---
# SuperPage组件的样式设置

SuperPage的组件可以通过**样式设置**来改外观，如文字字体、背景填充、边框、阴影等。

![spg样式设置-示例](./images/2021_07_22_17_22_25_160.gif)

## 风格{#style}

风格是组件所有样式的集合，每一个组件都可以保存多个风格。使用风格能够快速切换组件的外观，当修改风格后，所有应用到该风格的组件外观也将一起变化，具体介绍可参考文档[风格](../../../../data-viz/dash/design/type/basic/style.md)。

![风格切换](./images/2021_07_22_17_39_53_520.gif)

## 字体{#font}

设置文字的字体类型、颜色、大小、横向对齐方向、纵向对齐方向等。

![字体](./images/2021-07-22-17-42-16.png)

## 填充{#filling}

使用**填充**可以设置组件的背景样式，有以下几个选项：

- **无填充**：组件背景不进行填充，组件显示的颜色与上层容器的背景颜色有关
- **颜色填充**：指定组件的背景颜色，可以使用**纯色**或**渐变色**
- **图片填充**：可选择系统图片库中的图片，也可自定义上传图片或使用图片URL，具体可参考文档[图片](../../components/common/image.md)
- **动效填充**：背景以动态的效果展示，除了系统中提供的动效背景外，还可以自定义进行扩展，具体可参考文档[动效背景扩展](../../../../dev/extension/extension-points/animationEffect.md)

![填充](./images/2021_07_23_13_46_04_548.gif)

## 边框{#border}

边框属性用来设置组件的外部边框线，包括边框的位置、线条类型和粗细。

![边框](./images/2021_07_22_18_04_52_931.gif)

- 边框位置：外部整体边框、上边框、有边框、下边框、左边框
- 线条类型：点线、实线、虚线、无
- 线条粗细：数值越大，边框线越粗

:::tip

[列表](../../components/data/list.md)组件的**边框**属性中，可以设置其内部的网格线。

:::

## 圆角{#border-radius}

圆角即使用圆弧替换方角，圆角的大小用圆弧的半径表示。可单独设置圆角的位置及大小。

![圆角](./images/2021-07-22-18-06-55.png)

## 边距{#padding}

用于设置组件边框与其他内容的距离，区分为内边距和外边距，当数值越大时，距离越远：

![边距](./images/2021_07_23_14_34_56_599.gif)

- 内边距：组件的边框与其内容之间的空白距离
- 外边距：组件边框与其他组件之间的空白距离

## 阴影{#shadow}

用于给组件的边框或文字添加阴影效果，分为以下三类：

![阴影](./images/2021-07-21-16-01-03.png)

- 外阴影：组件边框向外扩散的阴影
- 内阴影：组件边框向其内部扩散的阴影
- 文字阴影：为组件内部的文字内容设置阴影

阴影有如下属性：

- 样式：根据上、下、左、右4个方向有9种样式组合
- 颜色：设置阴影的颜色
- X偏移：阴影水平方向上的偏移量
- Y偏移：阴影垂直方向上的偏移量
- 模糊半径：将模糊效果有边缘向两端延伸
- 扩展半径：增加阴影的尺寸

示例地址：[企业查询](https://demo.succbi.com/v5/demo-spg/%E4%BC%81%E4%B8%9A%E4%BF%A1%E6%81%AF%E8%87%AA%E5%8A%A9%E6%9F%A5%E8%AF%A2/%E4%BC%81%E4%B8%9A%E6%9F%A5%E8%AF%A23)

## 条件样式{#condition-style}

当满足不同的条件时，组件的样式可以展示为不同的效果，具体介绍可参考文档[SuperPage组件的条件样式](./condition-style.md)。