• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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({ radius: 10, color: Color.Gray, offsetX: 20, offsetY: 20 })
36      }
37      .width('100%')
38      .height('100%')
39      .justifyContent(FlexAlign.Center)
40    }
41    .height('100%')
42  }
43}
44```
45
46
47
48![zh-cn_image_0000001598502322](figures/zh-cn_image_0000001598502322.png)
49