diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md index 1e088157f6f1f349d8aa8b203f27265032260dde..6a17f49df84211a01daebfe044f34a544c0ccdc5 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md @@ -53,7 +53,7 @@ | [start \| end]6+ | <length> \| <percentage> | - | start \| end需要配合position样式使用，来确定元素的偏移位置。
- start属性规定元素的起始边缘。该属性定义了定位元素起始外边距边界与其包含块起始边界之间的偏移。
- end属性规定元素的结尾边缘。该属性定义了一个定位元素的结尾边距边界与其包含块结尾边界之间的偏移。 | | z-index6+ | number | - | 表示对于同一父节点其子节点的渲染顺序。数值越大，渲染数据越靠后。
z-index不支持auto，并且opacity等其他样式不会影响z-index的渲染顺序。 | | image-fill6+ | <color> | - | 为svg图片填充颜色，支持组件范围（与设置图片资源的属性）：button（icon属性）、piece（icon属性）、search（icon属性）、input（headericon属性）、textarea（headericon属性）、image（src属性）、toolbar-item(icon属性)。
svg图片文件内的fill属性颜色值在渲染时将被替换为image-fill所配的颜色值，且仅对svg图片内显示声明的fill属性生效。 | -| clip-path6+ | [ <geometry-box> \|\| <basic-shape> ] \| none | - | 设置组件的裁剪区域。区域内的部分显示，区域外的不显示。
<geometry-box>：表示裁剪区域的作用范围，默认为border-box。可选值为：
- margin-box：margin计算入长宽尺寸内。
- border-box：border计算入长宽尺寸内。
- padding-box：padding计算入长宽尺寸内。
- content-box：margin/border/padding不计算入长宽尺寸内。
<basic-shape>：表示裁剪的形状。包含以下类型：
- inset，格式为：inset( <percentage>{1,4} [ round <'border-radius'> ]? )。
- circle，格式为：circle( [ <percentage> ]? [ at <percentage> <percentage> ]? )。
- ellipse，格式为：ellipse( [ <percentage>{2} ]? [ at <percentage> <percentage> ]? )。
- polygon，格式为：polygon( [ <percentage> <percentage> ]\# )
- path，格式为：path( <string> )。 | +| clip-path6+ | [ <geometry-box> \| <basic-shape> ] \| none | - | 设置组件的裁剪区域。区域内的部分显示，区域外的不显示。
<geometry-box>：表示裁剪区域的作用范围，默认为border-box。可选值为：
- margin-box：margin计算入长宽尺寸内。
- border-box：border计算入长宽尺寸内。
- padding-box：padding计算入长宽尺寸内。
- content-box：margin/border/padding不计算入长宽尺寸内。
<basic-shape>：表示裁剪的形状。包含以下类型：
- inset，格式为：inset( <percentage>{1,4} [ round <'border-radius'> ]? )。
- circle，格式为：circle( [ <percentage> ]? [ at <percentage> <percentage> ]? )。
- ellipse，格式为：ellipse( [ <percentage>{2} ]? [ at <percentage> <percentage> ]? )。
- polygon，格式为：polygon( [ <percentage> <percentage> ]\# )
- path，格式为：path( <string> )。 | | mask-image6+ | - <linear-gradient>
- string | - | 设置渐变色遮罩或本地图片设置。
设置渐变色遮罩，示例：
linear-gradient(to left, black, white)
设置纯色遮罩，示例：
linear-gradient(to right, grey , grey)
设置本地svg图片为遮罩，示例：url(common/mask.svg) | | mask-size6+ | - string
- <length><length>
- <percentage> <percentage> | auto | 设置遮罩图片显示大小，仅当mask-image为图片资源时有效。
string可选值：
- contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
- cover：把图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
- auto：保持原图的比例不变。
length值参数方式：设置图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
百分比参数方式：以原图宽高的百分比来设置图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 | | mask-position6+ | - string string
- <length> <length>
- <percentage> <percentage> | 0px 0px | 设置遮罩图片显示位置，仅当mask-image为图片资源时有效。关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
string可选值：
- left：水平方向上最左侧。
- right：水平方向上最右侧。
- top：竖直方向上最顶部。
- bottom：竖直方向上最底部。
- center：水平方向或竖直方向上中间位置。
length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px)  。如果仅规定了一个值，另外一个值将是50%。
百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
可以混合使用<percentage>和<length>。 |