• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 阴影
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @CCFFWW-->
5<!--Designer: @yangfan229-->
6<!--Tester: @lxl007-->
7<!--Adviser: @HelloCrease-->
8
9
10阴影接口[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时，无阴影效果。
11
12
13
14```ts
15@Entry
16@Component
17struct ShadowOptionDemo {
18  build() {
19    Row() {
20      Column() {
21        Column() {
22          Text('shadowOption').fontSize(12)
23        }
24        .width(100)
25        .aspectRatio(1)
26        .margin(10)
27        .justifyContent(FlexAlign.Center)
28        .backgroundColor(Color.White)
29        .borderRadius(20)
30        .shadow({ radius: 10, color: Color.Gray })
31
32        Column() {
33          Text('shadowOption').fontSize(12)
34        }
35        .width(100)
36        .aspectRatio(1)
37        .margin(10)
38        .justifyContent(FlexAlign.Center)
39        .backgroundColor('#a8a888')
40        .borderRadius(20)
41        .shadow({
42          radius: 10,
43          color: Color.Gray,
44          offsetX: 20,
45          offsetY: 20
46        })
47      }
48      .width('100%')
49      .height('100%')
50      .justifyContent(FlexAlign.Center)
51    }
52    .height('100%')
53  }
54}
55```
56
57
58
59![zh-cn_image_0000001598502322](figures/zh-cn_image_0000001598502322.png)
60