• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# grid-row<a name="EN-US_TOPIC_0000001115814840"></a>
2
3-   [Permission List](#en-us_topic_0000001062811276_section11257113618419)
4-   [Child Component](#en-us_topic_0000001062811276_section9288143101012)
5-   [Attribute](#en-us_topic_0000001062811276_section631751545214)
6-   [Style](#en-us_topic_0000001062811276_section9475356165220)
7-   [Event](#en-us_topic_0000001062811276_section1417950207)
8
9The  **<grid-row\>**  component is a container used as a child component of  **<grid-container\>**. Each  **<grid-col\>**  component is arranged horizontally with  **flex**-related styles. By default, items in the  **<grid-row\>**  component are packed towards the start row and aligned to the start of the cross axis. You can set the items to be displayed in multiple axes.
10
11## Permission List<a name="en-us_topic_0000001062811276_section11257113618419"></a>
12
13None
14
15## Child Component<a name="en-us_topic_0000001062811276_section9288143101012"></a>
16
17Only the  **<grid-col\>**  component is supported.
18
19## Attribute<a name="en-us_topic_0000001062811276_section631751545214"></a>
20
21<a name="en-us_topic_0000001062811276_table20633101642315"></a>
22<table><thead align="left"><tr id="en-us_topic_0000001062811276_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a>Name</p>
23</th>
24<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a>Type</p>
25</th>
26<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"></a>Default Value</p>
27</th>
28<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001062811276_p824610360217"><a name="en-us_topic_0000001062811276_p824610360217"></a><a name="en-us_topic_0000001062811276_p824610360217"></a>Mandatory</p>
29</th>
30<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"></a>Description</p>
31</th>
32</tr>
33</thead>
34<tbody><tr id="en-us_topic_0000001062811276_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"></a>id</p>
35</td>
36<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"></a>string</p>
37</td>
38<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"></a>-</p>
39</td>
40<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p42461736102118"><a name="en-us_topic_0000001062811276_p42461736102118"></a><a name="en-us_topic_0000001062811276_p42461736102118"></a>No</p>
41</td>
42<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"></a>Unique ID of a component.</p>
43</td>
44</tr>
45<tr id="en-us_topic_0000001062811276_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"></a>style</p>
46</td>
47<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"></a>string</p>
48</td>
49<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"></a>-</p>
50</td>
51<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p17246836142119"><a name="en-us_topic_0000001062811276_p17246836142119"></a><a name="en-us_topic_0000001062811276_p17246836142119"></a>No</p>
52</td>
53<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"></a>Style declaration of a component.</p>
54</td>
55</tr>
56<tr id="en-us_topic_0000001062811276_row10634131610230"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"></a>class</p>
57</td>
58<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"></a>string</p>
59</td>
60<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"></a>-</p>
61</td>
62<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p324614367213"><a name="en-us_topic_0000001062811276_p324614367213"></a><a name="en-us_topic_0000001062811276_p324614367213"></a>No</p>
63</td>
64<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"></a>Style class of a component, which is used to refer to a style table.</p>
65</td>
66</tr>
67<tr id="en-us_topic_0000001062811276_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_p1786251117156"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_p1786251117156"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_p1786251117156"></a>ref</p>
68</td>
69<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_p1086241119157"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_p1086241119157"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_p1086241119157"></a>string</p>
70</td>
71<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_p586281111151"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_p586281111151"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_p586281111151"></a>-</p>
72</td>
73<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p1624612362219"><a name="en-us_topic_0000001062811276_p1624612362219"></a><a name="en-us_topic_0000001062811276_p1624612362219"></a>No</p>
74</td>
75<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_p113416153342"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_p113416153342"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_p113416153342"></a>Used to register reference information of child elements<span id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_ph5815920163518"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_ph5815920163518"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_ph5815920163518"></a> or child components</span>. The reference information is registered with the parent component on <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_b08212202354"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_b08212202354"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_b08212202354"></a>$refs</strong>.</p>
76</td>
77</tr>
78<tr id="en-us_topic_0000001062811276_row1863421642313"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"></a>disabled</p>
79</td>
80<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"></a>boolean</p>
81</td>
82<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"></a>false</p>
83</td>
84<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p192476368214"><a name="en-us_topic_0000001062811276_p192476368214"></a><a name="en-us_topic_0000001062811276_p192476368214"></a>No</p>
85</td>
86<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"></a>Whether the component is disabled. If it is disabled, it cannot respond to user interaction.</p>
87</td>
88</tr>
89<tr id="en-us_topic_0000001062811276_row1263451617236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"></a>data</p>
90</td>
91<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"></a>string</p>
92</td>
93<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"></a>-</p>
94</td>
95<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p22471736132114"><a name="en-us_topic_0000001062811276_p22471736132114"></a><a name="en-us_topic_0000001062811276_p22471736132114"></a>No</p>
96</td>
97<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"></a>Attribute set for components to facilitate data storage and reading.</p>
98</td>
99</tr>
100</tbody>
101</table>
102
103## Style<a name="en-us_topic_0000001062811276_section9475356165220"></a>
104
105<a name="en-us_topic_0000001062811276_table1744514388541"></a>
106<table><thead align="left"><tr id="en-us_topic_0000001062811276_row1244614388545"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"></a>Name</p>
107</th>
108<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"></a>Type</p>
109</th>
110<th class="cellrowborder" valign="top" width="8.869113088691131%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"></a>Default Value</p>
111</th>
112<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001062811276_p117421754619"><a name="en-us_topic_0000001062811276_p117421754619"></a><a name="en-us_topic_0000001062811276_p117421754619"></a>Mandatory</p>
113</th>
114<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"></a>Description</p>
115</th>
116</tr>
117</thead>
118<tbody><tr id="en-us_topic_0000001062811276_row15846205765312"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_p12616104254316"><a name="en-us_topic_0000001062811276_p12616104254316"></a><a name="en-us_topic_0000001062811276_p12616104254316"></a>flex-wrap</p>
119</td>
120<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_p1861624216433"><a name="en-us_topic_0000001062811276_p1861624216433"></a><a name="en-us_topic_0000001062811276_p1861624216433"></a>string</p>
121</td>
122<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_p26161242174317"><a name="en-us_topic_0000001062811276_p26161242174317"></a><a name="en-us_topic_0000001062811276_p26161242174317"></a>nowrap</p>
123</td>
124<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p116166424431"><a name="en-us_topic_0000001062811276_p116166424431"></a><a name="en-us_topic_0000001062811276_p116166424431"></a>No</p>
125</td>
126<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_p13616842134313"><a name="en-us_topic_0000001062811276_p13616842134313"></a><a name="en-us_topic_0000001062811276_p13616842134313"></a>Whether flex items in the container are displayed in a single row or multiple rows. Currently, dynamic modification is not supported. Available values are as follows:</p>
127<a name="en-us_topic_0000001062811276_ul136169424431"></a><a name="en-us_topic_0000001062811276_ul136169424431"></a><ul id="en-us_topic_0000001062811276_ul136169424431"><li><strong id="en-us_topic_0000001062811276_b1533419498378"><a name="en-us_topic_0000001062811276_b1533419498378"></a><a name="en-us_topic_0000001062811276_b1533419498378"></a>nowrap</strong>: Items are displayed on a single axis.</li><li><strong id="en-us_topic_0000001062811276_b1843515273716"><a name="en-us_topic_0000001062811276_b1843515273716"></a><a name="en-us_topic_0000001062811276_b1843515273716"></a>wrap</strong>: Items are displayed on multiple axes.</li></ul>
128</td>
129</tr>
130<tr id="en-us_topic_0000001062811276_row175129541536"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_p961654212431"><a name="en-us_topic_0000001062811276_p961654212431"></a><a name="en-us_topic_0000001062811276_p961654212431"></a>justify-content</p>
131</td>
132<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_p86163428431"><a name="en-us_topic_0000001062811276_p86163428431"></a><a name="en-us_topic_0000001062811276_p86163428431"></a>string</p>
133</td>
134<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_p26161142184319"><a name="en-us_topic_0000001062811276_p26161142184319"></a><a name="en-us_topic_0000001062811276_p26161142184319"></a>flex-start</p>
135</td>
136<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p1561694284310"><a name="en-us_topic_0000001062811276_p1561694284310"></a><a name="en-us_topic_0000001062811276_p1561694284310"></a>No</p>
137</td>
138<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_p176161342184317"><a name="en-us_topic_0000001062811276_p176161342184317"></a><a name="en-us_topic_0000001062811276_p176161342184317"></a>How items are aligned along the main axis of the current row in the container. Available values are as follows:</p>
139<a name="en-us_topic_0000001062811276_ul5616174210438"></a><a name="en-us_topic_0000001062811276_ul5616174210438"></a><ul id="en-us_topic_0000001062811276_ul5616174210438"><li><strong id="en-us_topic_0000001062811276_b51288404238"><a name="en-us_topic_0000001062811276_b51288404238"></a><a name="en-us_topic_0000001062811276_b51288404238"></a>flex-start</strong>: Items are packed towards the start row.</li><li><strong id="en-us_topic_0000001062811276_b5644141515401"><a name="en-us_topic_0000001062811276_b5644141515401"></a><a name="en-us_topic_0000001062811276_b5644141515401"></a>flex-end</strong>: Items are packed towards the end row.</li><li><strong id="en-us_topic_0000001062811276_b7864161612403"><a name="en-us_topic_0000001062811276_b7864161612403"></a><a name="en-us_topic_0000001062811276_b7864161612403"></a>center</strong>: Items are centered along the row.</li><li><strong id="en-us_topic_0000001062811276_b88480177406"><a name="en-us_topic_0000001062811276_b88480177406"></a><a name="en-us_topic_0000001062811276_b88480177406"></a>space-between</strong>: Items are positioned with space between the rows.</li><li><strong id="en-us_topic_0000001062811276_b18281819184011"><a name="en-us_topic_0000001062811276_b18281819184011"></a><a name="en-us_topic_0000001062811276_b18281819184011"></a>space-around</strong>: Items are positioned with space before, between, and after the rows.</li></ul>
140</td>
141</tr>
142<tr id="en-us_topic_0000001062811276_row1271417513534"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_p12617942184311"><a name="en-us_topic_0000001062811276_p12617942184311"></a><a name="en-us_topic_0000001062811276_p12617942184311"></a>align-items</p>
143</td>
144<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_p15617194264312"><a name="en-us_topic_0000001062811276_p15617194264312"></a><a name="en-us_topic_0000001062811276_p15617194264312"></a>string</p>
145</td>
146<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_p109218369553"><a name="en-us_topic_0000001062811276_p109218369553"></a><a name="en-us_topic_0000001062811276_p109218369553"></a>flex-start</p>
147</td>
148<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p12617154214437"><a name="en-us_topic_0000001062811276_p12617154214437"></a><a name="en-us_topic_0000001062811276_p12617154214437"></a>No</p>
149</td>
150<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_p9617542124318"><a name="en-us_topic_0000001062811276_p9617542124318"></a><a name="en-us_topic_0000001062811276_p9617542124318"></a>How items are aligned along the cross axis of the current row in the container. Available values are as follows:</p>
151<a name="en-us_topic_0000001062811276_ul166171442134312"></a><a name="en-us_topic_0000001062811276_ul166171442134312"></a><ul id="en-us_topic_0000001062811276_ul166171442134312"><li><strong id="en-us_topic_0000001062811276_b15990175016232"><a name="en-us_topic_0000001062811276_b15990175016232"></a><a name="en-us_topic_0000001062811276_b15990175016232"></a>stretch</strong>: Items are stretched to the same height or width as the container in the cross axis direction. </li><li><strong id="en-us_topic_0000001062811276_b524165320338"><a name="en-us_topic_0000001062811276_b524165320338"></a><a name="en-us_topic_0000001062811276_b524165320338"></a>flex-start</strong>: Items are aligned to the start of the cross axis.</li><li><strong id="en-us_topic_0000001062811276_b676224516400"><a name="en-us_topic_0000001062811276_b676224516400"></a><a name="en-us_topic_0000001062811276_b676224516400"></a>flex-end</strong>: Items are aligned to the end of the cross axis.</li><li><strong id="en-us_topic_0000001062811276_b364214812409"><a name="en-us_topic_0000001062811276_b364214812409"></a><a name="en-us_topic_0000001062811276_b364214812409"></a>center</strong>: Items are aligned in the middle of the cross axis.</li></ul>
152</td>
153</tr>
154<tr id="en-us_topic_0000001062811276_row131157491537"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_p661810427433"><a name="en-us_topic_0000001062811276_p661810427433"></a><a name="en-us_topic_0000001062811276_p661810427433"></a>align-content</p>
155</td>
156<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_p186181042174316"><a name="en-us_topic_0000001062811276_p186181042174316"></a><a name="en-us_topic_0000001062811276_p186181042174316"></a>string</p>
157</td>
158<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_p19618144284315"><a name="en-us_topic_0000001062811276_p19618144284315"></a><a name="en-us_topic_0000001062811276_p19618144284315"></a>flex-start</p>
159</td>
160<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p461804254314"><a name="en-us_topic_0000001062811276_p461804254314"></a><a name="en-us_topic_0000001062811276_p461804254314"></a>No</p>
161</td>
162<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_p13619134216439"><a name="en-us_topic_0000001062811276_p13619134216439"></a><a name="en-us_topic_0000001062811276_p13619134216439"></a>Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:</p>
163<a name="en-us_topic_0000001062811276_ul56191424436"></a><a name="en-us_topic_0000001062811276_ul56191424436"></a><ul id="en-us_topic_0000001062811276_ul56191424436"><li><strong id="en-us_topic_0000001062811276_b6835336414"><a name="en-us_topic_0000001062811276_b6835336414"></a><a name="en-us_topic_0000001062811276_b6835336414"></a>flex-start</strong>: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.</li><li><strong id="en-us_topic_0000001062811276_b16351217154115"><a name="en-us_topic_0000001062811276_b16351217154115"></a><a name="en-us_topic_0000001062811276_b16351217154115"></a>flex-end</strong>: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.</li><li><strong id="en-us_topic_0000001062811276_b122251326204112"><a name="en-us_topic_0000001062811276_b122251326204112"></a><a name="en-us_topic_0000001062811276_b122251326204112"></a>center</strong>: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first row is equal to the spacing between the end of the container's cross axis and the last row.</li><li><strong id="en-us_topic_0000001062811276_b193979315414"><a name="en-us_topic_0000001062811276_b193979315414"></a><a name="en-us_topic_0000001062811276_b193979315414"></a>space-between</strong>: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.</li><li><strong id="en-us_topic_0000001062811276_b1724683484119"><a name="en-us_topic_0000001062811276_b1724683484119"></a><a name="en-us_topic_0000001062811276_b1724683484119"></a>space-around</strong>: All rows are evenly distributed in the container, and the spacing between two adjacent rows is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.</li></ul>
164</td>
165</tr>
166<tr id="en-us_topic_0000001062811276_row7446738195418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"></a>height</p>
167</td>
168<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"></a>&lt;length&gt;<span id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ph11748352163918"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ph11748352163918"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ph11748352163918"></a> | &lt;percentage&gt;</span></p>
169</td>
170<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"></a>-</p>
171</td>
172<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p71741417194619"><a name="en-us_topic_0000001062811276_p71741417194619"></a><a name="en-us_topic_0000001062811276_p71741417194619"></a>No</p>
173</td>
174<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1477601264"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1477601264"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1477601264"></a>Component height.</p>
175<p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p208761554184020"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p208761554184020"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p208761554184020"></a>If this length attribute is not set, the length required for the element content is used. </p>
176</td>
177</tr>
178<tr id="en-us_topic_0000001062811276_row16447238155411"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1124mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1124mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1124mcpsimp"></a>border</p>
179</td>
180<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1126mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1126mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1126mcpsimp"></a>-</p>
181</td>
182<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1128mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1128mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1128mcpsimp"></a>0</p>
183</td>
184<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p11175131715467"><a name="en-us_topic_0000001062811276_p11175131715467"></a><a name="en-us_topic_0000001062811276_p11175131715467"></a>No</p>
185</td>
186<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1130mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1130mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1130mcpsimp"></a>Shorthand attribute to set all borders. You can set <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b79128342503"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b79128342503"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b79128342503"></a>border-width</strong>, <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b9366173919505"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b9366173919505"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b9366173919505"></a>border-style</strong>, and <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b184351248205019"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b184351248205019"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b184351248205019"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p>
187</td>
188</tr>
189<tr id="en-us_topic_0000001062811276_row4447138115414"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1133mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1133mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1133mcpsimp"></a>border-style</p>
190</td>
191<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p513631613319"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p513631613319"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p513631613319"></a>string</p>
192</td>
193<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1137mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1137mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1137mcpsimp"></a>solid</p>
194</td>
195<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p617531717464"><a name="en-us_topic_0000001062811276_p617531717464"></a><a name="en-us_topic_0000001062811276_p617531717464"></a>No</p>
196</td>
197<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p342285712314"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p342285712314"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p342285712314"></a>Shorthand attribute to set the style for all borders. Available values are as follows:</p>
198<a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul1470834505612"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul1470834505612"></a><ul id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul1470834505612"><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b143453286360"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b143453286360"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b143453286360"></a>dotted</strong>: Dotted border. The radius of a dot is half of border-width.</li><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b792117280367"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b792117280367"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b792117280367"></a>dashed</strong>: Dashed border</li></ul>
199<a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul15621125545612"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul15621125545612"></a><ul id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul15621125545612"><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1335862963610"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1335862963610"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1335862963610"></a>solid</strong>: Solid border</li></ul>
200</td>
201</tr>
202<tr id="en-us_topic_0000001062811276_row1656512239262"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p119531437370"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p119531437370"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p119531437370"></a>border-[left|top|right|bottom]-style</p>
203</td>
204<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p129532037175"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p129532037175"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p129532037175"></a>string</p>
205</td>
206<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p495312372717"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p495312372717"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p495312372717"></a>solid</p>
207</td>
208<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p169534375717"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p169534375717"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p169534375717"></a>No</p>
209</td>
210<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p595353718719"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p595353718719"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p595353718719"></a>Styles of the left, top, right, and bottom borders. The available values are <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b17769171311540"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b17769171311540"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b17769171311540"></a>dotted</strong>, <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b237141519547"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b237141519547"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b237141519547"></a>dashed</strong>, and <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b8949161613540"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b8949161613540"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b8949161613540"></a>solid</strong>.</p>
211</td>
212</tr>
213<tr id="en-us_topic_0000001062811276_row19448113811542"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1142mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1142mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1142mcpsimp"></a>border-[left|top|right|bottom]</p>
214</td>
215<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1144mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1144mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1144mcpsimp"></a>-</p>
216</td>
217<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1146mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1146mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1146mcpsimp"></a>-</p>
218</td>
219<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p67303762810"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p67303762810"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p67303762810"></a>No</p>
220</td>
221<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1148mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1148mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1148mcpsimp"></a>Shorthand attribute to set the borders for every side respectively. You can set <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b122415514554"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b122415514554"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b122415514554"></a>border-width</strong>, <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b12296178135513"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b12296178135513"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b12296178135513"></a>border-style</strong>, and <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1129701210553"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1129701210553"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1129701210553"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p>
222</td>
223</tr>
224<tr id="en-us_topic_0000001062811276_row124481638165417"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1151mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1151mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1151mcpsimp"></a>border-width</p>
225</td>
226<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1153mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1153mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1153mcpsimp"></a>&lt;length&gt;</p>
227</td>
228<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1155mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1155mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1155mcpsimp"></a>0</p>
229</td>
230<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p16175131724618"><a name="en-us_topic_0000001062811276_p16175131724618"></a><a name="en-us_topic_0000001062811276_p16175131724618"></a>No</p>
231</td>
232<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1157mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1157mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1157mcpsimp"></a>Shorthand attribute to set the width of all borders<span id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ph07997369365"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ph07997369365"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ph07997369365"></a>, or separately set the width of each border</span>.</p>
233</td>
234</tr>
235<tr id="en-us_topic_0000001062811276_row54481038165410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1160mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1160mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1160mcpsimp"></a>border-[left|top|right|bottom]-width</p>
236</td>
237<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1162mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1162mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1162mcpsimp"></a>&lt;length&gt;</p>
238</td>
239<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1164mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1164mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1164mcpsimp"></a>0</p>
240</td>
241<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p11175151717466"><a name="en-us_topic_0000001062811276_p11175151717466"></a><a name="en-us_topic_0000001062811276_p11175151717466"></a>No</p>
242</td>
243<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1166mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1166mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1166mcpsimp"></a>Attribute to set widths of left, top, right, and bottom borders.</p>
244</td>
245</tr>
246<tr id="en-us_topic_0000001062811276_row1744817385547"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1169mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1169mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1169mcpsimp"></a>border-color</p>
247</td>
248<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1171mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1171mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1171mcpsimp"></a>&lt;color&gt;</p>
249</td>
250<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1173mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1173mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1173mcpsimp"></a>black</p>
251</td>
252<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p1017518177465"><a name="en-us_topic_0000001062811276_p1017518177465"></a><a name="en-us_topic_0000001062811276_p1017518177465"></a>No</p>
253</td>
254<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1175mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1175mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1175mcpsimp"></a>Shorthand attribute to set the color of all borders<span id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ph9587639113619"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ph9587639113619"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ph9587639113619"></a>, or separately set the color of each border</span>.</p>
255</td>
256</tr>
257<tr id="en-us_topic_0000001062811276_row844813835410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1178mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1178mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1178mcpsimp"></a>border-[left|top|right|bottom]-color</p>
258</td>
259<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1180mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1180mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1180mcpsimp"></a>&lt;color&gt;</p>
260</td>
261<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1182mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1182mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1182mcpsimp"></a>black</p>
262</td>
263<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_p11175417184611"><a name="en-us_topic_0000001062811276_p11175417184611"></a><a name="en-us_topic_0000001062811276_p11175417184611"></a>No</p>
264</td>
265<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1184mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1184mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1184mcpsimp"></a>Attribute to set colors of left, top, right, and bottom borders.</p>
266</td>
267</tr>
268<tr id="en-us_topic_0000001062811276_row944813389540"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1187mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1187mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1187mcpsimp"></a>border-radius</p>
269</td>
270<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1189mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1189mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1189mcpsimp"></a>&lt;length&gt;</p>
271</td>
272<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1191mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1191mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1191mcpsimp"></a>-</p>
273</td>
274<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p67306752816"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p67306752816"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p67306752816"></a>No</p>
275</td>
276<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p18998933174117"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p18998933174117"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p18998933174117"></a>Attribute to set the radius of round borders of an element. <span id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ph1249443123611"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ph1249443123611"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ph1249443123611"></a>This attribute cannot be used to set the width or color of a specific border. To set the width or color, you need to set <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b124211434362"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b124211434362"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b124211434362"></a>border-width</strong> or <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b124894383615"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b124894383615"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b124894383615"></a>border-color</strong> for all the borders at the same time.</span></p>
277</td>
278</tr>
279<tr id="en-us_topic_0000001062811276_row104494382546"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1198mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1198mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1198mcpsimp"></a>border-[top|bottom]-[left|right]-radius</p>
280</td>
281<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1200mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1200mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1200mcpsimp"></a>&lt;length&gt;</p>
282</td>
283<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1202mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1202mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1202mcpsimp"></a>-</p>
284</td>
285<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p27305718283"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p27305718283"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p27305718283"></a>No</p>
286</td>
287<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1204mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1204mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1204mcpsimp"></a>Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners</p>
288</td>
289</tr>
290<tr id="en-us_topic_0000001062811276_row1344912384548"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"></a>background</p>
291</td>
292<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"></a>&lt;linear-gradient&gt;</p>
293</td>
294<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"></a>-</p>
295</td>
296<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p15730197132811"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p15730197132811"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p15730197132811"></a>No</p>
297</td>
298<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1213mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1213mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1213mcpsimp"></a>This attribute supports <a href="gradient-styles.md#EN-US_TOPIC_0000001115974726">Gradient Styles</a> only but is not compatible with <strong id="en-us_topic_0000001062811276_b164341937125213"><a name="en-us_topic_0000001062811276_b164341937125213"></a><a name="en-us_topic_0000001062811276_b164341937125213"></a>background-color</strong> or <strong id="en-us_topic_0000001062811276_b44341437205218"><a name="en-us_topic_0000001062811276_b44341437205218"></a><a name="en-us_topic_0000001062811276_b44341437205218"></a>background-image</strong>.</p>
299</td>
300</tr>
301<tr id="en-us_topic_0000001062811276_row15449838185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"></a>background-color</p>
302</td>
303<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"></a>&lt;color&gt;</p>
304</td>
305<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"></a>-</p>
306</td>
307<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p17730577282"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p17730577282"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p17730577282"></a>No</p>
308</td>
309<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"></a>Background color.</p>
310</td>
311</tr>
312<tr id="en-us_topic_0000001062811276_row54491338115412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"></a>background-image</p>
313</td>
314<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"></a>string</p>
315</td>
316<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"></a>-</p>
317</td>
318<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p7730976285"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p7730976285"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p7730976285"></a>No</p>
319</td>
320<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"></a>Background image. Currently, this attribute is not compatible with <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b17699154763620"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b17699154763620"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b17699154763620"></a>background-color</strong> or <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b87001647163613"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b87001647163613"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b87001647163613"></a>background</strong>. Both Internet and local image resources are supported.</p>
321</td>
322</tr>
323<tr id="en-us_topic_0000001062811276_row6449238185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"></a>background-size</p>
324</td>
325<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul1065173641310"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul1065173641310"></a><ul id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul1065173641310"><li>string</li><li>&lt;length&gt; &lt;length&gt;</li><li>&lt;percentage&gt; &lt;percentage&gt;</li></ul>
326</td>
327<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"></a>auto</p>
328</td>
329<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p137309714282"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p137309714282"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p137309714282"></a>No</p>
330</td>
331<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p91971112114318"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p91971112114318"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p91971112114318"></a>Background image size.</p>
332<a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul41331853154111"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul41331853154111"></a><ul id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul41331853154111"><li>The <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1229715499365"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1229715499365"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1229715499365"></a>string</strong> values are as follows:<a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul13611494111"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul13611494111"></a><ul id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul13611494111"><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b4759749163610"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b4759749163610"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b4759749163610"></a>contain</strong>: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.</li><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b136485011365"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b136485011365"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b136485011365"></a>cover</strong>: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background localization area.</li><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1425512535366"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1425512535366"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1425512535366"></a>auto</strong>: The original image width-height ratio is retained.</li></ul>
333</li><li>The two <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b13309145193614"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b13309145193614"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b13309145193614"></a>&lt;length&gt;</strong> values are as follows:<p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1840244924418"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1840244924418"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1840244924418"></a>Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b146661156143617"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b146661156143617"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b146661156143617"></a>auto</strong> by default.</p>
334</li><li>The two <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1667415763613"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1667415763613"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1667415763613"></a>&lt;percentage&gt;</strong> values are as follows:<p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p17936154410457"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p17936154410457"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p17936154410457"></a>Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b17190164371"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b17190164371"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b17190164371"></a>auto</strong> by default.</p>
335</li></ul>
336</td>
337</tr>
338<tr id="en-us_topic_0000001062811276_row94491238155415"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"></a>background-repeat</p>
339</td>
340<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"></a>string</p>
341</td>
342<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"></a>repeat</p>
343</td>
344<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1673015702810"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1673015702810"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1673015702810"></a>No</p>
345</td>
346<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"></a>Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.</p>
347<a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul8236153103612"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul8236153103612"></a><ul id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul8236153103612"><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1363463710"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1363463710"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1363463710"></a>repeat</strong>: Draws images along the x-axis and y-axis at the same time.</li><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b267416916377"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b267416916377"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b267416916377"></a>repeat-x</strong>: Draws images along the x-axis.</li><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b625561011379"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b625561011379"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b625561011379"></a>repeat-y</strong>: Draws images along the y-axis.</li><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1122181133715"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1122181133715"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1122181133715"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul>
348</td>
349</tr>
350<tr id="en-us_topic_0000001062811276_row94491738105419"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"></a>background-position</p>
351</td>
352<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul8874155216502"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul8874155216502"></a><ul id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul8874155216502"><li>string string</li><li>&lt;length&gt; &lt;length&gt;</li><li>&lt;percentage&gt; &lt;percentage&gt;</li></ul>
353</td>
354<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"></a>0px 0px</p>
355</td>
356<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p173010720280"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p173010720280"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p173010720280"></a>No</p>
357</td>
358<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul1590812103363"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul1590812103363"></a><ul id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul1590812103363"><li>Using keywords: If only one keyword is specified, the other value is <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b997011116376"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b997011116376"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b997011116376"></a>center</strong> by default. The two values define the horizontal position and vertical position, respectively.<a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul1453531734716"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul1453531734716"></a><ul id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul1453531734716"><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b0982111273712"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b0982111273712"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b0982111273712"></a>left</strong>: leftmost in the horizontal direction</li><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b866713583912"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b866713583912"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b866713583912"></a>right</strong>: rightmost in the horizontal direction</li><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b5886013193716"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b5886013193716"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b5886013193716"></a>top</strong>: top in the vertical direction</li><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b84197142376"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b84197142376"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b84197142376"></a>bottom</strong>: bottom in the vertical direction</li><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b14894114103710"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b14894114103710"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b14894114103710"></a>center</strong>: center position</li></ul>
359</li></ul>
360<a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul10908121023615"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul10908121023615"></a><ul id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul10908121023615"><li>Using <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b11401615193715"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b11401615193715"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b11401615193715"></a>&lt;length&gt;</strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1341381819379"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1341381819379"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1341381819379"></a>0 0</strong> indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b48671516183714"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b48671516183714"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b48671516183714"></a>50%</strong>.</li><li>Using <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b5492717163712"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b5492717163712"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b5492717163712"></a>&lt;percentage&gt;</strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b164741723183712"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b164741723183712"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b164741723183712"></a>0% 0%</strong> indicates the upper left corner. <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b64022245377"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b64022245377"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b64022245377"></a>100% 100%</strong> indicates the lower right corner. If only one value is specified, the other one is <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b7893424163718"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b7893424163718"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b7893424163718"></a>50%</strong>.</li><li>Using both <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b154811725193718"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b154811725193718"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b154811725193718"></a>&lt;percentage&gt;</strong> and <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b34834254377"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b34834254377"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b34834254377"></a>&lt;length&gt;</strong>.</li></ul>
361</td>
362</tr>
363<tr id="en-us_topic_0000001062811276_row20450143885416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p134581712103910"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p134581712103910"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p134581712103910"></a>opacity</p>
364</td>
365<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"></a>number</p>
366</td>
367<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"></a>1</p>
368</td>
369<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1873011722814"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1873011722814"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1873011722814"></a>No</p>
370</td>
371<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p122515161139"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p122515161139"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p122515161139"></a>Transparency of an element. The value ranges from <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1871715526385"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1871715526385"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b1871715526385"></a>0</strong> to <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b177181452103815"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b177181452103815"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b177181452103815"></a>1</strong>. The value <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b13718155210380"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b13718155210380"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b13718155210380"></a>1</strong> means opaque, and <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b6718152103818"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b6718152103818"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b6718152103818"></a>0</strong> means completely transparent.</p>
372</td>
373</tr>
374<tr id="en-us_topic_0000001062811276_row1450123865418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"></a>display</p>
375</td>
376<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1544115441446"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1544115441446"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1544115441446"></a>string</p>
377<p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"></a></p>
378</td>
379<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"></a>flex</p>
380</td>
381<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p167303762818"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p167303762818"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p167303762818"></a>No</p>
382</td>
383<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p23704018414"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p23704018414"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p23704018414"></a>How and whether to display the box containing an element. Available values are as follows:</p>
384<a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul12227103394916"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul12227103394916"></a><ul id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul12227103394916"><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b57468289377"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b57468289377"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b57468289377"></a>flex</strong>: flexible layout</li><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b18887133293920"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b18887133293920"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b18887133293920"></a>none</strong>: The element is hidden.</li></ul>
385</td>
386</tr>
387<tr id="en-us_topic_0000001062811276_row194503380541"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"></a>visibility</p>
388</td>
389<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p15475737486"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p15475737486"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p15475737486"></a>string</p>
390<p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"></a></p>
391</td>
392<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"></a>visible</p>
393</td>
394<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p57301471281"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p57301471281"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p57301471281"></a>No</p>
395</td>
396<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1568839154517"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1568839154517"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p1568839154517"></a>Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b15844103015378"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b15844103015378"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b15844103015378"></a>display</strong> attribute to <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b4845153013712"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b4845153013712"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b4845153013712"></a>none</strong>.) Available values are as follows:</p>
397<a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul751984164920"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul751984164920"></a><ul id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_ul751984164920"><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b17429331133711"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b17429331133711"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b17429331133711"></a>visible</strong>: The element is visible.</li><li><strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b109191231193710"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b109191231193710"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b109191231193710"></a>hidden</strong>: The element is hidden but still takes up space.</li></ul>
398<div class="note" id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_note4549524649"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_note4549524649"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_note4549524649"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p25499241642"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p25499241642"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_p25499241642"></a>If both <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b719810016405"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b719810016405"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b719810016405"></a>visibility</strong> and <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b187052264018"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b187052264018"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b187052264018"></a>display</strong> are set, only <strong id="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b107788924011"><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b107788924011"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001050791158_b107788924011"></a>display</strong> takes effect.</p>
399</div></div>
400</td>
401</tr>
402</tbody>
403</table>
404
405## Event<a name="en-us_topic_0000001062811276_section1417950207"></a>
406
407<a name="en-us_topic_0000001062811276_table17891151713715"></a>
408<table><thead align="left"><tr id="en-us_topic_0000001062811276_row28923173376"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a>Name</p>
409</th>
410<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a>Parameter</p>
411</th>
412<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a>Triggered when</p>
413</th>
414</tr>
415</thead>
416<tbody><tr id="en-us_topic_0000001062811276_row1089215178377"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a>touchstart</p>
417</td>
418<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p>
419</td>
420<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a>The tapping starts</p>
421</td>
422</tr>
423<tr id="en-us_topic_0000001062811276_row689241763715"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a>touchmove</p>
424</td>
425<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p>
426</td>
427<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a>The tapping moves</p>
428</td>
429</tr>
430<tr id="en-us_topic_0000001062811276_row19892917103710"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a>touchcancel</p>
431</td>
432<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p>
433</td>
434<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a>The tapping is interrupted</p>
435</td>
436</tr>
437<tr id="en-us_topic_0000001062811276_row889215175372"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a>touchend</p>
438</td>
439<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p>
440</td>
441<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a>The tapping ends</p>
442</td>
443</tr>
444<tr id="en-us_topic_0000001062811276_row118931117123719"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a>click</p>
445</td>
446<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a>-</p>
447</td>
448<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a>A component is clicked</p>
449</td>
450</tr>
451<tr id="en-us_topic_0000001062811276_row15893111720379"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a>longpress</p>
452</td>
453<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a>-</p>
454</td>
455<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a>A component is long pressed</p>
456</td>
457</tr>
458<tr id="en-us_topic_0000001062811276_row3893181783710"></tr>
459<tr id="en-us_topic_0000001062811276_row16893917193714"></tr>
460<tr id="en-us_topic_0000001062811276_row189321713378"></tr>
461<tr id="en-us_topic_0000001062811276_row689411711377"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_p12706561061"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_p12706561061"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_p12706561061"></a>swipe<sup id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_sup35424382912"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_sup35424382912"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_sup35424382912"></a>5+</sup></p>
462</td>
463<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_p11711056161"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_p11711056161"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_p11711056161"></a><a href="universal-events.md#en-us_topic_0000001058460527_table111811577714">SwipeEvent</a></p>
464</td>
465<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001062811276_en-us_topic_0000001058460527_p2711556162"><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_p2711556162"></a><a name="en-us_topic_0000001062811276_en-us_topic_0000001058460527_p2711556162"></a>A user quickly swipes on a component.</p>
466</td>
467</tr>
468</tbody>
469</table>
470
471