1# 阴影
2
3
4阴影接口[shadow](../reference/apis-arkui/arkui-ts/ts-universal-attributes-image-effect.md#shadow)可以为当前组件添加阴影效果,该接口支持两种类型参数,开发者可配置[ShadowOptions](../reference/apis-arkui/arkui-ts/ts-universal-attributes-image-effect.md#shadowoptions对象说明)自定义阴影效果。ShadowOptions模式下,当radius = 0 或者 color 的透明度为0时,无阴影效果。
5
6
7
8```ts
9@Entry
10@Component
11struct ShadowOptionDemo {
12  build() {
13    Row() {
14      Column() {
15        Column() {
16          Text('shadowOption').fontSize(12)
17        }
18        .width(100)
19        .aspectRatio(1)
20        .margin(10)
21        .justifyContent(FlexAlign.Center)
22        .backgroundColor(Color.White)
23        .borderRadius(20)
24        .shadow({ radius: 10, color: Color.Gray })
25
26        Column() {
27          Text('shadowOption').fontSize(12)
28        }
29        .width(100)
30        .aspectRatio(1)
31        .margin(10)
32        .justifyContent(FlexAlign.Center)
33        .backgroundColor('#a8a888')
34        .borderRadius(20)
35        .shadow({
36          radius: 10,
37          color: Color.Gray,
38          offsetX: 20,
39          offsetY: 20
40        })
41      }
42      .width('100%')
43      .height('100%')
44      .justifyContent(FlexAlign.Center)
45    }
46    .height('100%')
47  }
48}
49```
50
51
52
53![zh-cn_image_0000001598502322](figures/zh-cn_image_0000001598502322.png)
54