1# 通用样式 2 3> **说明：** 4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6组件普遍支持的可以在style或css中设置组件外观样式。 7 8 9| 名称 | 类型 | 默认值 | 描述 | 10| ---------------------------------------- | ---------------------------------------- | ------------ | ---------------------------------------- | 11| width | <length> \| <percentage> | - | 设置组件自身的宽度。<br/>缺省时使用元素自身内容需要的宽度。<br/> | 12| height | <length> \| <percentage> | - | 设置组件自身的高度。<br/>缺省时使用元素自身内容需要的高度。<br/> | 13| min-width<sup>5+</sup> | <length> \| <percentage><sup>6+</sup> | 0 | 设置元素的最小宽度。 | 14| min-height<sup>5+</sup> | <length> \| <percentage><sup>6+</sup> | 0 | 设置元素的最小高度。 | 15| max-width<sup>5+</sup> | <length> \| <percentage><sup>6+</sup> | - | 设置元素的最大宽度。默认无限制。 | 16| max-height<sup>5+</sup> | <length> \| <percentage><sup>6+</sup> | - | 设置元素的最大高度。默认无限制。 | 17| padding | <length> \| <percentage><sup>5+</sup> | 0 | 使用简写属性设置所有的内边距属性。<br/>该属性可以有1到4个值：<br/>- 指定一个值时，该值指定四个边的内边距。<br/>- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | 18| padding-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | 设置左、上、右、下内边距属性。 | 19| padding-[start\|end] | <length> \| <percentage><sup>5+</sup> | 0 | 设置起始和末端内边距属性。 | 20| margin | <length> \| <percentage><sup>5+</sup> | 0 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。<br/>- 只有一个值时，这个值会被指定给全部的四个边。<br/>- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。<br/>- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | 21| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | 设置左、上、右、下外边距属性。 | 22| margin-[start\|end] | <length> \| <percentage><sup>5+</sup> | 0 | 设置起始和末端外边距属性。 | 23| border | - | 0 | 使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。 | 24| border-style | string | solid | 使用简写属性设置所有边框的样式，可选值为：<br/>- dotted：显示为一系列圆点，圆点半径为border-width的一半。<br/>- dashed：显示为一系列短的方形虚线。<br/>- solid：显示为一条实线。 | 25| border-[left\|top\|right\|bottom]-style | string | solid | 分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。 | 26| border-[left\|top\|right\|bottom] | - | - | 使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。 | 27| border-width | <length> | 0 | 使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。 | 28| border-[left\|top\|right\|bottom]-width | <length> | 0 | 分别设置左、上、右、下四个边框的宽度。 | 29| border-color | <color> | black | 使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。 | 30| border-[left\|top\|right\|bottom]-color | <color> | black | 分别设置左、上、右、下四个边框的颜色。 | 31| border-radius | <length> | - | border-radius属性设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left\|top\|right\|bottom]-width，border-[left\|top\|right\|bottom]-color ，border-[left\|top\|right\|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。<br/>顺序为左下、右下、左上和右上。 | 32| border-[top\|bottom]-[left\|right]-radius | <length> | - | 分别设置左上，右上，右下和左下四个角的圆角半径。 | 33| background | <linear-gradient> | - | 仅支持设置[渐变样式](../arkui-js/js-components-common-gradient.md)，与background-color、background-image不兼容。 | 34| background-color | <color> | - | 设置背景颜色。 | 35| background-image | string | - | 设置背景图片。与background-color、background不兼容，支持网络图片资源和本地图片资源地址。<br/>示例：<br/>- background-image: url("/common/background.png")<br>不支持svg格式图片。 | 36| background-size | - string<br/>- <length> <length><br/>- <percentage> <percentage> | auto | 设置背景图片的大小。<br/>- string可选值：<br/> - contain：把图片扩展至最大尺寸，以使其高度和宽度完全适用内容区域。<br/> - cover：把背景图片扩展至足够大，以使背景图片完全覆盖背景区域；背景图片的某些部分也许无法显示在背景定位区域中。<br/> - auto：保持原图的比例不变。<br/>- length值参数方式：<br/> 设置背景图片的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。<br/>- 百分比参数方式：<br/> 以父元素的百分比来设置背景图片的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 | 37| background-repeat | string | repeat | 针对重复背景图片样式进行设置，背景图片默认在水平和垂直方向上重复。<br/>- repeat：在水平轴和竖直轴上同时重复绘制图片。<br/>- repeat-x：只在水平轴上重复绘制图片。<br/>- repeat-y：只在竖直轴上重复绘制图片。<br/>- no-repeat：不会重复绘制图片。 | 38| background-position | - string string<br/>- <length> <length><br/>- <percentage> <percentage> | 0px 0px | - 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<br/> - left：水平方向上最左侧。<br/> - right：水平方向上最右侧。<br/> - top：竖直方向上最顶部。<br/> - bottom：竖直方向上最底部。<br/> - center：水平方向或竖直方向上中间位置。<br/>- length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。<br/>- 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。<br/>- 可以混合使用<percentage>和<length>。 | 39| box-shadow<sup>5+</sup> | string | 0 | 语法：box-shadow: h-shadow v-shadow blur spread color<br/>通过这个样式可以设置当前组件的阴影样式，包括水平位置(必填)、垂直位置(必填)、模糊半径(可选，默认值为0)、阴影延展距离(可选，默认值为0)、阴影颜色(可选，默认值为黑色)。<br/>示例：<br/>- box-shadow :10px 20px 5px 10px \#888888<br/>- box-shadow :100px 100px 30px red<br/>- box-shadow :-100px -100px 0px 40px | 40| filter<sup>5+</sup> | string | - | 语法：filter: blur(px)<br/>通过这个样式可以设置当前组件布局范围的内容模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。<br/>示例：<br/>- filter: blur(10px) | 41| backdrop-filter<sup>5+</sup> | string | - | 语法：backdrop-filter: blur(px)<br/>通过这个样式可以设置当前组件布局范围的背景模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。<br/>示例：<br/>- backdrop-filter: blur(10px) | 42| window-filter<sup>5+</sup> | string | - | 语法：window-filter: blur(percent), style<sup>5+</sup><br/>通过这个样式可以设置当前组件布局范围的窗口模糊程度和模糊样式，如果没有设置值，则默认是0%(不模糊)，多块模糊区域时不支持设置不同的模糊值和模糊样式。style可选值：small_light(默认值), medium_light, large_light, xlarge_light, small_dark, medium_dark, large_dark, xlarge_dark。<br/>示例：<br/>- window-filter: blur(50%)<br/>- window-filter: blur(10%), large_light | 43| opacity | number | 1 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | 44| display | string | flex | 确定一个元素所产生的框的类型，可选值为：<br/>- flex：弹性布局。<br/>- none：不渲染此元素。<br />- grid：网格布局（仅div支持display样式设置为grid）。 | 45| visibility | string | visible | 是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：<br/>- visible：元素正常显示。<br/>- hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。<br/>visibility和display样式都设置时，仅display生效。 | 46| flex | number \| string | - | 规定当前组件如何适应父组件中的可用空间。<br/>flex可以指定1个、2个<sup>5+</sup>或3个<sup>5+</sup>值。<br/>单值语法：<br/>- 一个无单位数：用来设置组件的flex-grow。<br/>- 一个有效的宽度值<sup>5+</sup>：用来设置组件的flex-basis。<br/>双值语法<sup>5+</sup>：<br/>第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：<br/>- 一个无单位数：用来设置组件的flex-shrink。<br/>- 一个有效的宽度值：用来设置组件的flex-basis。<br/>三值语法<sup>5+</sup>：<br/>第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。<br/>仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item><sup>5+</sup>时生效。 | 47| flex-grow | number | 0 | 设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。<br/>仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item><sup>5+</sup>时生效。 | 48| flex-shrink | number | 1 | 设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。<br/>仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item><sup>5+</sup>时生效。 | 49| flex-basis | <length> | - | 设置组件在主轴方向上的初始大小。<br/>仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item><sup>5+</sup>时生效。 | 50| align-self<sup>6+</sup> | string | - | 设置自身在父元素交叉轴上的对齐方式，该样式会覆盖父元素的align-items样式，仅在父容器为div、list。可选值为：<br/>- stretch 弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>- flex-start 元素向交叉轴起点对齐。<br/>- flex-end 元素向交叉轴终点对齐。<br/>- center 元素在交叉轴居中。<br/>- baseline 元素在交叉轴基线对齐。 | 51| position | string | relative | 设置元素的定位类型，不支持动态变更。<br/>- fixed：相对与整个界面进行定位。<br/>- absolute：相对于父元素进行定位，仅在父容器为<div>、<stack>时生效。<br/>- relative：相对于其正常位置进行定位。 | 52| [left \| top \| right \| bottom] | <length> \| <percentage><sup>6+</sup> | - | left\|top\|right\|bottom需要配合position样式使用，来确定元素的偏移位置。<br/>- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。<br/>- right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。<br/>- bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。 | 53| [start \| end]<sup>6+</sup> | <length> \| <percentage> | - | start \| end需要配合position样式使用，来确定元素的偏移位置。<br/>- start属性规定元素的起始边缘。该属性定义了定位元素起始外边距边界与其包含块起始边界之间的偏移。<br/>- end属性规定元素的结尾边缘。该属性定义了一个定位元素的结尾边距边界与其包含块结尾边界之间的偏移。 | 54| z-index<sup>6+</sup> | number | - | 表示对于同一父节点其子节点的渲染顺序。数值越大，渲染数据越靠后。<br/>z-index不支持auto，并且opacity等其他样式不会影响z-index的渲染顺序。 | 55| image-fill<sup>6+</sup> | <color> | - | 为svg图片填充颜色，支持组件范围（与设置图片资源的属性）：button（icon属性）、piece（icon属性）、search（icon属性）、input（headericon属性）、textarea（headericon属性）、image（src属性）、toolbar-item(icon属性)。<br/>svg图片文件内的fill属性颜色值在渲染时将被替换为image-fill所配的颜色值，且仅对svg图片内显示声明的fill属性生效。 | 56| clip-path<sup>6+</sup> | [ <geometry-box> \| <basic-shape> ] \| none | - | 设置组件的裁剪区域。区域内的部分显示，区域外的不显示。<br/><geometry-box>：表示裁剪区域的作用范围，默认为border-box。可选值为：<br/>- margin-box：margin计算入长宽尺寸内。<br/>- border-box：border计算入长宽尺寸内。<br/>- padding-box：padding计算入长宽尺寸内。<br/>- content-box：margin/border/padding不计算入长宽尺寸内。<br/><basic-shape>：表示裁剪的形状。包含以下类型：<br/>- inset，格式为：inset( <percentage>{1,4} [ round <'border-radius'> ]? )。<br/>- circle，格式为：circle( [ <percentage> ]? [ at <percentage> <percentage> ]? )。<br/>- ellipse，格式为：ellipse( [ <percentage>{2} ]? [ at <percentage> <percentage> ]? )。<br/>- polygon，格式为：polygon( [ <percentage> <percentage> ]\# )<br/>- path，格式为：path( <string> )。 | 57| mask-image<sup>6+</sup> | - <linear-gradient><br/>- string | - | 设置渐变色遮罩或本地图片设置。<br/>设置渐变色遮罩，示例：<br/>linear-gradient(to left, black, white)<br/>设置纯色遮罩，示例：<br/>linear-gradient(to right, grey , grey)<br/>设置本地svg图片为遮罩，示例：url(common/mask.svg) | 58| mask-size<sup>6+</sup> | - string<br/>- <length><length><br/>- <percentage> <percentage> | auto | 设置遮罩图片显示大小，仅当mask-image为图片资源时有效。<br/>string可选值：<br/>- contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。<br/>- cover：把图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。<br/>- auto：保持原图的比例不变。<br/>length值参数方式：设置图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。<br/>百分比参数方式：以原图宽高的百分比来设置图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 | 59| mask-position<sup>6+</sup> | - string string<br/>- <length> <length><br/>- <percentage> <percentage> | 0px 0px | 设置遮罩图片显示位置，仅当mask-image为图片资源时有效。关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<br/>string可选值：<br/>- left：水平方向上最左侧。<br/>- right：水平方向上最右侧。<br/>- top：竖直方向上最顶部。<br/>- bottom：竖直方向上最底部。<br/>- center：水平方向或竖直方向上中间位置。<br/>length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。<br/>百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。<br/>可以混合使用<percentage>和<length>。 | 60| border-image-source<sup>7+</sup> | string | - | 指定元素的边框图片。<br/>示例：<br/>border-image-source: url("/common/images/border.png") | 61| border-image-slice<sup>7+</sup> | <length> \| <percentage> | 0 | 指定图片的边界内向偏移。<br/>该属性可以有1到4个值：<br/>指定一个值时，该值指定四个边的内偏移。<br/>指定两个值时，第一个值指定上下两边的内偏移，第二个指定左右两边的内偏移。<br/>指定三个值时，第一个指定上边的内偏移，第二个指定左右两边的内偏移，第三个指定下边的内偏移。<br/>指定四个值时分别为上、右、下、左边的内偏移（顺时针顺序）。 | 62| border-image-width<sup>7+</sup> | <length> \| <percentage> | 0 | 指定图片边界的宽度。<br/>指定一个值时，该值指定四个边的宽度。<br/>指定两个值时，第一个值指定上下两边的宽度 ，第二个指定左右两边的宽度。<br/>指定三个值时，第一个指定上边的宽度 ，第二个指定左右两边的宽度 ，第三个指定下边的宽度。<br/>指定四个值时分别为上、右、下、左边的宽度 （顺时针顺序）。 | 63| border-image-outset<sup>7+</sup> | <length> \| <percentage> | 0 | 指定边框图像可超出边框的大小。<br/>指定一个值时，边框图像在四个方向超出边框的距离。<br/>指定两个值时，第一个值指定上下两边的边框图像超出边框的距离，第二个指定左右两边的 。<br/>指定三个值时，第一个指定上边的边框图像超出边框的距离 ，第二个指定左右两边的边框图像超出边框的距离 ，第三个指定下边的边框图像超出边框的距离 。<br/>指定四个值时分别为上、右、下、左边的边框图像超出边框的距离 （顺时针顺序）。 | 64| border-image-repeat<sup>7+</sup> | string | stretch | 定义图片如何填充边框。<br/>stretch: 拉伸图片以填充边框。<br/>repeat：平铺图片以填充边框。<br/>round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。<br/> | 65| border-image<sup>7+</sup> | string | - | 简写属性，可以选择以下两种设置方式：<br/>- 设置图片边框的每个属性。包含图像的边界向内偏移，图像边界的宽度，边框图像可超出边框盒的大小，图片如何填充边框，顺序设置为 border-image-source ,border-image-slice,border-image-width,border-image-outset,border-image-repeat，不设置的值为默认值。<br/>- 渐变色边框<br/> 示例:<br/> border-image: linear-gradient(red, yellow) 10px | 66| box-sizing<sup>9+</sup> | string | border-box | 设置组件的边框类型。<br/>content-box：标准盒子模型。设置的width和height只包含内容的宽和高，不包含边框（border）和内边距（padding）。<br/>border-box：设置的width和height包含内容，边框（border）和内边距（padding），即：组件内容区的实际宽度 = width - (border + padding) 。 | 67 68 69> **说明：** 70> 通用样式都不是必填项。 71 72## 示例 73 74### box-sizing 75 76```html 77<div class="container" onswipe="touchMove"> 78 <text style="margin: 10px; box-sizing: content-box; width: 300px;height: 300px; border-color: blue; border-width: 20px;"> 79 contentBox 80 </text> 81 <text style="margin: 10px; box-sizing: border-box; width: 300px;height: 300px;border-color: blue; border-width: 20px;"> 82 borderBox 83 </text> 84</div> 85``` 86 87 88
