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 9404ac3a4efcefca10ee2f039581bba3e34444c7..061007a8399ffc1c834da33fb2d650eae7b303df 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 @@ -41,7 +41,7 @@ | backdrop-filter5+ | string | - | 语法：backdrop-filter: blur(px)
通过这个样式可以设置当前组件布局范围的背景模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。
示例：
- backdrop-filter: blur(10px) | | window-filter5+ | string | - | 语法：window-filter: blur(percent), style5+
通过这个样式可以设置当前组件布局范围的窗口模糊程度和模糊样式，如果没有设置值，则默认是0%(不模糊)，多块模糊区域时不支持设置不同的模糊值和模糊样式。style可选值：small_light(默认值), medium_light, large_light, xlarge_light, small_dark, medium_dark, large_dark, xlarge_dark。
示例：
- window-filter: blur(50%)
- window-filter: blur(10%), large_light | | opacity | number | 1 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | -| display | string | flex | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。
-inline9+：元素会被显示为内联元素，元素前后没有换行符
-block9+：元素将显示为块级元素，元素前后会带有换行符，容器组件默认为block
-inline-block9+：设置为行内盒子，在同一行展示，可以设置宽高，基础组件默认为inline-block | +| display | string | flex | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。
-inline9+：元素会被显示为内联元素，元素前后没有换行符。
-block9+：元素将显示为块级元素，元素前后会带有换行符，容器组件默认为block。
-inline-block9+：设置为行内盒子，在同一行展示，可以设置宽高，基础组件默认为inline-block。 | | visibility | string | visible | 是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：
- visible：元素正常显示。
- hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> visibility和display样式都设置时，仅display生效。 | | flex | number \| string | - | 规定当前组件如何适应父组件中的可用空间。
flex可以指定1个、2个5+或3个5+值。
单值语法：
- 一个无单位数：用来设置组件的flex-grow。
- 一个有效的宽度值5+：用来设置组件的flex-basis。
双值语法5+：
第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：
- 一个无单位数：用来设置组件的flex-shrink。
- 一个有效的宽度值：用来设置组件的flex-basis。
三值语法5+：
第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。 | | flex-grow | number | 0 | 设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。 | @@ -71,19 +71,19 @@ ## 示例 -### box-sizing 示例： +- box-sizing -```html -
- - contentBox - - - borderBox - -
-``` + ```html +
+ + contentBox + + + borderBox + +
+ ``` -### box-sizing运行效果： +- 运行效果： -![zh-cn_image_0000001214837129](figures\zh-cn_image_0000001214837129.png) +![zh-cn_image_0000001214837129](figures/zh-cn_image_0000001214837129.png)