diff --git a/zh-cn/application-dev/reference/apis/js-apis-arkui-inspector.md b/zh-cn/application-dev/reference/apis/js-apis-arkui-inspector.md
index 8335e83616d81f4fc9ef3f73f81f9d4e19fd59e2..8fb448542e1e272f929928266abd1e7f30bb9d56 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-arkui-inspector.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-arkui-inspector.md
@@ -76,42 +76,42 @@ off(type: 'layout', callback?: () => void): void
**示例：**
- ```js
-import inspector from '@ohos.arkui.inspector';
-
-@Entry
-@Component
-struct ImageExample {
- build() {
- Column() {
- Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
- Row({ space: 5 }) {
- Image($r('app.media.app_icon'))
- .width(110)
- .height(110)
- .border({ width: 1 })
- .id('IMAGE_ID')
+ ```ts
+ import inspector from '@ohos.arkui.inspector'
+
+ @Entry
+ @Component
+ struct ImageExample {
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
+ Row({ space: 5 }) {
+ Image($r('app.media.app_icon'))
+ .width(110)
+ .height(110)
+ .border({ width: 1 })
+ .id('IMAGE_ID')
+ }
}
- }
- }.height(320).width(360).padding({ right: 10, top: 10 })
- }
+ }.height(320).width(360).padding({ right: 10, top: 10 })
+ }
- listener = inspector.createComponentObserver('IMAGE_ID')
+ listener = inspector.createComponentObserver('IMAGE_ID')
- aboutToAppear() {
- let FuncLayout = this.onLayoutComplete.bind(this) // bind current js instance
- let FuncDraw = this.onDrawComplete.bind(this) // bind current js instance
+ aboutToAppear() {
+ let FuncLayout = this.onLayoutComplete.bind(this) // bind current js instance
+ let FuncDraw = this.onDrawComplete.bind(this) // bind current js instance
- this.listener.on('layout', FuncLayout)
- this.listener.on('draw', FuncDraw)
- }
+ this.listener.on('layout', FuncLayout)
+ this.listener.on('draw', FuncDraw)
+ }
- onLayoutComplete() {
- // do something here
- }
+ onLayoutComplete() {
+ // do something here
+ }
- onDrawComplete() {
- // do something here
+ onDrawComplete() {
+ // do something here
+ }
}
-}
- ```
\ No newline at end of file
+ ```
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/imagespan.png b/zh-cn/application-dev/reference/arkui-ts/figures/imagespan.png
index 6b0684be4d1e785c4301f97ca50016b0ccd83623..a1d4478e5f2a6d6c90cab54e3505705ceda032b0 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/imagespan.png and b/zh-cn/application-dev/reference/arkui-ts/figures/imagespan.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
index acd61622968079f481b7e07914cefd421e148b7b..1fe3575b6885936a52079839a91aab5bb6dc7692 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
@@ -23,10 +23,10 @@
| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例，值为1则完全是深褐色的，值为0图像无变化。 （百分比）
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| hueRotate | number \| string | '0deg' | 色相旋转效果，输入参数为旋转角度。
取值范围：(-∞, +∞)
**说明：**
色调旋转360度会显示原始颜色。先将色调旋转180 度，然后再旋转-180度会显示原始颜色。数据类型为number时，值为90和'90deg'效果一致。
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| colorBlend 8+ | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| sphericalEffect10+ | [number] | - | 设置组件的图像球面化程度。
取值范围：[0,1]。
**说明：**
1. 如果value等于0则图像保持原样，如果value等于1则图像为完全球面化效果。在0和1之间，数值越大，则球面化程度越高。
`value < 0 `或者` value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。
2. 如果组件的图像使用异步加载，则不支持球面效果。例如Image组件默认使用异步加载，如果要使用球面效果，就要设置`syncLoad`为`true`，但是这种做法不推荐。`backgroundImage`也是使用异步加载，所以如果设置了`backgroundImage`，不支持球面效果。
3. 如果组件设置了阴影，不支持球面效果。
此接口为系统接口。 |
-| lightUpEffect10+ | [number] | - | 设置组件图像亮起程度。
取值范围：[0,1]。
如果value等于0则图像为全黑，如果value等于1则图像为全亮效果。0到1之间数值越大，表示图像亮度越高。`value < 0` 或者 `value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。
此接口为系统接口。|
-| pixelStretchEffect10+ | [PixelStretchEffectOptions](ts-types.md#PixelStretchEffectOptions) | - | 设置组件的图像边缘像素扩展距离。
参数`options`包括上下左右四个方向的边缘像素扩展距离。
**说明：**
1. 如果距离为正值，表示向外扩展，放大原来图像大小。上下左右四个方向分别用边缘像素填充，填充的距离即为设置的边缘扩展的距离。
2. 如果距离为负值，表示内缩，但是最终图像大小不变。
内缩方式：
图像根据`options`的设置缩小，缩小大小为四个方向边缘扩展距离的绝对值。
图像用边缘像素扩展到原来大小。
3. 对`options`的输入约束：
上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩，方向一致。
所有方向的输入均为百分比或者具体值，不支持百分比和具体值混用。
所有异常情况下，显示为{0，0，0，0}效果，即跟原图保持一致。
此接口为系统接口。 |
-| linearGradientBlur10+ |
value: number,
{
fractionStops:Array,
direction:[GradientDirection](ts-appendix-enums.md#gradientdirection)
}
| - | 为当前组件添加内容线性渐变模糊效果，
-value为模糊半径，模糊半径越大越模糊，为0时不模糊。取值范围：[0, +∞)
线性梯度模糊包含两个部分fractionStops和direction
-fractionStops数组中保存的每一个二元数组（取值0-1，小于0则为0，大于0则为1）表示[模糊程度, 模糊位置]；模糊位置需严格递增，开发者传入的数据不符合规范会记录日志，渐变模糊数组中二元数组个数必须大于等于2，否则渐变模糊不生效
-direction为渐变模糊方向，默认值为[GradientDirection](ts-appendix-enums.md#gradientdirection).Bottom
从API version 10开始，该接口支持在ArkTS卡片中使用。 |
+| sphericalEffect10+ | number | - | 设置组件的图像球面化程度。
取值范围：[0,1]。
**说明：**
1. 如果value等于0则图像保持原样，如果value等于1则图像为完全球面化效果。在0和1之间，数值越大，则球面化程度越高。
`value < 0 `或者` value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。
2. 如果组件的图像使用异步加载，则不支持球面效果。例如Image组件默认使用异步加载，如果要使用球面效果，就要设置`syncLoad`为`true`，但是这种做法不推荐。`backgroundImage`也是使用异步加载，所以如果设置了`backgroundImage`，不支持球面效果。
3. 如果组件设置了阴影，不支持球面效果。
此接口为系统接口。 |
+| lightUpEffect10+ | number | - | 设置组件图像亮起程度。
取值范围：[0,1]。
如果value等于0则图像为全黑，如果value等于1则图像为全亮效果。0到1之间数值越大，表示图像亮度越高。`value < 0` 或者 `value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。
此接口为系统接口。|
+| pixelStretchEffect10+ | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | - | 设置组件的图像边缘像素扩展距离。
参数`options`包括上下左右四个方向的边缘像素扩展距离。
**说明：**
1. 如果距离为正值，表示向外扩展，放大原来图像大小。上下左右四个方向分别用边缘像素填充，填充的距离即为设置的边缘扩展的距离。
2. 如果距离为负值，表示内缩，但是最终图像大小不变。
内缩方式：
图像根据`options`的设置缩小，缩小大小为四个方向边缘扩展距离的绝对值。
图像用边缘像素扩展到原来大小。
3. 对`options`的输入约束：
上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩，方向一致。
所有方向的输入均为百分比或者具体值，不支持百分比和具体值混用。
所有异常情况下，显示为{0，0，0，0}效果，即跟原图保持一致。
此接口为系统接口。 |
+| linearGradientBlur10+ |
value: number,
{
fractionStops:Array,
direction:[GradientDirection](ts-appendix-enums.md#gradientdirection)
}
| - | 为当前组件添加内容线性渐变模糊效果，
-value为模糊半径，模糊半径越大越模糊，为0时不模糊。取值范围：[0, 60]
线性梯度模糊包含两个部分fractionStops和direction
-fractionStops数组中保存的每一个二元数组（取值0-1，小于0则为0，大于0则为1）表示[模糊程度, 模糊位置]；模糊位置需严格递增，开发者传入的数据不符合规范会记录日志，渐变模糊数组中二元数组个数必须大于等于2，否则渐变模糊不生效
-direction为渐变模糊方向，默认值为[GradientDirection](ts-appendix-enums.md#gradientdirection).Bottom
从API version 10开始，该接口支持在ArkTS卡片中使用。 |
## ShadowOptions对象说明