• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# piece<a name="EN-US_TOPIC_0000001162414629"></a>
2
3-   [Child Component](#en-us_topic_0000001060517794_section9288143101012)
4-   [Attribute](#en-us_topic_0000001060517794_section2907183951110)
5-   [Style](#en-us_topic_0000001060517794_section17756476592)
6-   [Event](#en-us_topic_0000001060517794_section19137152119)
7-   [Example Code](#en-us_topic_0000001060517794_section118886119320)
8
9An entrance piece that can contain images and text. It is usually used to display receivers, for example, email recipients or message recipients.
10
11>![](public_sys-resources/icon-note.gif) **NOTE:**
12>This component is supported since API version 5.
13
14## Child Component<a name="en-us_topic_0000001060517794_section9288143101012"></a>
15
16None
17
18## Attribute<a name="en-us_topic_0000001060517794_section2907183951110"></a>
19
20<a name="en-us_topic_0000001060517794_table20633101642315"></a>
21<table><thead align="left"><tr id="en-us_topic_0000001060517794_row663331618238"><th class="cellrowborder" valign="top" width="14.5014501450145%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a>Name</p>
22</th>
23<th class="cellrowborder" valign="top" width="12.62126212621262%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a>Type</p>
24</th>
25<th class="cellrowborder" valign="top" width="8.03080308030803%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"></a>Default Value</p>
26</th>
27<th class="cellrowborder" valign="top" width="6.64066406640664%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001060517794_p154141646194"><a name="en-us_topic_0000001060517794_p154141646194"></a><a name="en-us_topic_0000001060517794_p154141646194"></a>Mandatory</p>
28</th>
29<th class="cellrowborder" valign="top" width="58.2058205820582%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"></a>Description</p>
30</th>
31</tr>
32</thead>
33<tbody><tr id="en-us_topic_0000001060517794_row1875918426407"><td class="cellrowborder" valign="top" width="14.5014501450145%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_p15759174219407"><a name="en-us_topic_0000001060517794_p15759174219407"></a><a name="en-us_topic_0000001060517794_p15759174219407"></a>content</p>
34</td>
35<td class="cellrowborder" valign="top" width="12.62126212621262%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_p14759184212400"><a name="en-us_topic_0000001060517794_p14759184212400"></a><a name="en-us_topic_0000001060517794_p14759184212400"></a>string</p>
36</td>
37<td class="cellrowborder" valign="top" width="8.03080308030803%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_p575913424403"><a name="en-us_topic_0000001060517794_p575913424403"></a><a name="en-us_topic_0000001060517794_p575913424403"></a>-</p>
38</td>
39<td class="cellrowborder" valign="top" width="6.64066406640664%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p24156461792"><a name="en-us_topic_0000001060517794_p24156461792"></a><a name="en-us_topic_0000001060517794_p24156461792"></a>Yes</p>
40</td>
41<td class="cellrowborder" valign="top" width="58.2058205820582%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_p1975944244011"><a name="en-us_topic_0000001060517794_p1975944244011"></a><a name="en-us_topic_0000001060517794_p1975944244011"></a>Text content of the operational piece.</p>
42</td>
43</tr>
44<tr id="en-us_topic_0000001060517794_row1401171483915"><td class="cellrowborder" valign="top" width="14.5014501450145%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_p637566151211"><a name="en-us_topic_0000001060517794_p637566151211"></a><a name="en-us_topic_0000001060517794_p637566151211"></a>closable</p>
45</td>
46<td class="cellrowborder" valign="top" width="12.62126212621262%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_p134021148395"><a name="en-us_topic_0000001060517794_p134021148395"></a><a name="en-us_topic_0000001060517794_p134021148395"></a>boolean</p>
47</td>
48<td class="cellrowborder" valign="top" width="8.03080308030803%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_p1840211418393"><a name="en-us_topic_0000001060517794_p1840211418393"></a><a name="en-us_topic_0000001060517794_p1840211418393"></a>false</p>
49</td>
50<td class="cellrowborder" valign="top" width="6.64066406640664%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p1415746595"><a name="en-us_topic_0000001060517794_p1415746595"></a><a name="en-us_topic_0000001060517794_p1415746595"></a>No</p>
51</td>
52<td class="cellrowborder" valign="top" width="58.2058205820582%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_p19402201416398"><a name="en-us_topic_0000001060517794_p19402201416398"></a><a name="en-us_topic_0000001060517794_p19402201416398"></a>Whether to display the delete icon for the operational piece. When users click the delete icon, it triggers the close event.</p>
53</td>
54</tr>
55<tr id="en-us_topic_0000001060517794_row78648123418"><td class="cellrowborder" valign="top" width="14.5014501450145%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_p173023953412"><a name="en-us_topic_0000001060517794_p173023953412"></a><a name="en-us_topic_0000001060517794_p173023953412"></a>icon</p>
56</td>
57<td class="cellrowborder" valign="top" width="12.62126212621262%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_p530216953412"><a name="en-us_topic_0000001060517794_p530216953412"></a><a name="en-us_topic_0000001060517794_p530216953412"></a>string</p>
58</td>
59<td class="cellrowborder" valign="top" width="8.03080308030803%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_p3302149133418"><a name="en-us_topic_0000001060517794_p3302149133418"></a><a name="en-us_topic_0000001060517794_p3302149133418"></a>-</p>
60</td>
61<td class="cellrowborder" valign="top" width="6.64066406640664%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p103024953410"><a name="en-us_topic_0000001060517794_p103024953410"></a><a name="en-us_topic_0000001060517794_p103024953410"></a>No</p>
62</td>
63<td class="cellrowborder" valign="top" width="58.2058205820582%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_p230211914342"><a name="en-us_topic_0000001060517794_p230211914342"></a><a name="en-us_topic_0000001060517794_p230211914342"></a>URL of the delete icon of the operational piece. Local paths are supported. The supported image formats are PNG, JPG, and SVG.</p>
64</td>
65</tr>
66<tr id="en-us_topic_0000001060517794_row793142645910"><td class="cellrowborder" valign="top" width="14.5014501450145%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"></a>id</p>
67</td>
68<td class="cellrowborder" valign="top" width="12.62126212621262%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"></a>string</p>
69</td>
70<td class="cellrowborder" valign="top" width="8.03080308030803%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"></a>-</p>
71</td>
72<td class="cellrowborder" valign="top" width="6.64066406640664%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p42461736102118"><a name="en-us_topic_0000001060517794_p42461736102118"></a><a name="en-us_topic_0000001060517794_p42461736102118"></a>No</p>
73</td>
74<td class="cellrowborder" valign="top" width="58.2058205820582%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"></a>Unique ID of a component.</p>
75</td>
76</tr>
77<tr id="en-us_topic_0000001060517794_row5930526135911"><td class="cellrowborder" valign="top" width="14.5014501450145%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"></a>style</p>
78</td>
79<td class="cellrowborder" valign="top" width="12.62126212621262%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"></a>string</p>
80</td>
81<td class="cellrowborder" valign="top" width="8.03080308030803%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"></a>-</p>
82</td>
83<td class="cellrowborder" valign="top" width="6.64066406640664%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p17246836142119"><a name="en-us_topic_0000001060517794_p17246836142119"></a><a name="en-us_topic_0000001060517794_p17246836142119"></a>No</p>
84</td>
85<td class="cellrowborder" valign="top" width="58.2058205820582%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"></a>Style declaration of a component.</p>
86</td>
87</tr>
88<tr id="en-us_topic_0000001060517794_row1993082616599"><td class="cellrowborder" valign="top" width="14.5014501450145%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"></a>class</p>
89</td>
90<td class="cellrowborder" valign="top" width="12.62126212621262%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"></a>string</p>
91</td>
92<td class="cellrowborder" valign="top" width="8.03080308030803%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"></a>-</p>
93</td>
94<td class="cellrowborder" valign="top" width="6.64066406640664%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p324614367213"><a name="en-us_topic_0000001060517794_p324614367213"></a><a name="en-us_topic_0000001060517794_p324614367213"></a>No</p>
95</td>
96<td class="cellrowborder" valign="top" width="58.2058205820582%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"></a><a name="en-us_topic_0000001060517794_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>
97</td>
98</tr>
99<tr id="en-us_topic_0000001060517794_row59301326115920"><td class="cellrowborder" valign="top" width="14.5014501450145%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_p1786251117156"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_p1786251117156"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_p1786251117156"></a>ref</p>
100</td>
101<td class="cellrowborder" valign="top" width="12.62126212621262%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_p1086241119157"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_p1086241119157"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_p1086241119157"></a>string</p>
102</td>
103<td class="cellrowborder" valign="top" width="8.03080308030803%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_p586281111151"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_p586281111151"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_p586281111151"></a>-</p>
104</td>
105<td class="cellrowborder" valign="top" width="6.64066406640664%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p1624612362219"><a name="en-us_topic_0000001060517794_p1624612362219"></a><a name="en-us_topic_0000001060517794_p1624612362219"></a>No</p>
106</td>
107<td class="cellrowborder" valign="top" width="58.2058205820582%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_p113416153342"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_p113416153342"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_p113416153342"></a>Used to register reference information of child elements<span id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_ph5815920163518"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_ph5815920163518"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050831187_b08212202354"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_b08212202354"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_b08212202354"></a>$refs</strong>.</p>
108</td>
109</tr>
110<tr id="en-us_topic_0000001060517794_row169308267598"><td class="cellrowborder" valign="top" width="14.5014501450145%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"></a>disabled</p>
111</td>
112<td class="cellrowborder" valign="top" width="12.62126212621262%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"></a>boolean</p>
113</td>
114<td class="cellrowborder" valign="top" width="8.03080308030803%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"></a>false</p>
115</td>
116<td class="cellrowborder" valign="top" width="6.64066406640664%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p192476368214"><a name="en-us_topic_0000001060517794_p192476368214"></a><a name="en-us_topic_0000001060517794_p192476368214"></a>No</p>
117</td>
118<td class="cellrowborder" valign="top" width="58.2058205820582%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"></a><a name="en-us_topic_0000001060517794_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>
119</td>
120</tr>
121<tr id="en-us_topic_0000001060517794_row793052617596"><td class="cellrowborder" valign="top" width="14.5014501450145%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"></a>data</p>
122</td>
123<td class="cellrowborder" valign="top" width="12.62126212621262%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"></a>string</p>
124</td>
125<td class="cellrowborder" valign="top" width="8.03080308030803%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"></a>-</p>
126</td>
127<td class="cellrowborder" valign="top" width="6.64066406640664%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p22471736132114"><a name="en-us_topic_0000001060517794_p22471736132114"></a><a name="en-us_topic_0000001060517794_p22471736132114"></a>No</p>
128</td>
129<td class="cellrowborder" valign="top" width="58.2058205820582%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"></a>Attribute set for components to facilitate data storage and reading.</p>
130</td>
131</tr>
132</tbody>
133</table>
134
135## Style<a name="en-us_topic_0000001060517794_section17756476592"></a>
136
137<a name="en-us_topic_0000001060517794_table1744514388541"></a>
138<table><thead align="left"><tr id="en-us_topic_0000001060517794_row1244614388545"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"></a>Name</p>
139</th>
140<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"></a>Type</p>
141</th>
142<th class="cellrowborder" valign="top" width="8.869113088691131%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"></a>Default Value</p>
143</th>
144<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001060517794_p117421754619"><a name="en-us_topic_0000001060517794_p117421754619"></a><a name="en-us_topic_0000001060517794_p117421754619"></a>Mandatory</p>
145</th>
146<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"></a>Description</p>
147</th>
148</tr>
149</thead>
150<tbody><tr id="en-us_topic_0000001060517794_row13446238145410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1070mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1070mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1070mcpsimp"></a>width</p>
151</td>
152<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1072mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1072mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1072mcpsimp"></a>&lt;length&gt;<span id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph597168143913"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph597168143913"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph597168143913"></a> | &lt;percentage&gt;</span></p>
153</td>
154<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p3948114217528"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p3948114217528"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p3948114217528"></a>-</p>
155</td>
156<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p13174101704612"><a name="en-us_topic_0000001060517794_p13174101704612"></a><a name="en-us_topic_0000001060517794_p13174101704612"></a>No</p>
157</td>
158<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p624653010258"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p624653010258"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p624653010258"></a>Component width.</p>
159<p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p84811050134010"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p84811050134010"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p84811050134010"></a>If this attribute is not set, the width required for the element content is used. </p>
160</td>
161</tr>
162<tr id="en-us_topic_0000001060517794_row7446738195418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"></a>height</p>
163</td>
164<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"></a>&lt;length&gt;<span id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph11748352163918"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph11748352163918"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph11748352163918"></a> | &lt;percentage&gt;</span></p>
165</td>
166<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"></a>-</p>
167</td>
168<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p71741417194619"><a name="en-us_topic_0000001060517794_p71741417194619"></a><a name="en-us_topic_0000001060517794_p71741417194619"></a>No</p>
169</td>
170<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1477601264"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1477601264"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1477601264"></a>Component height.</p>
171<p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p208761554184020"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p208761554184020"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p208761554184020"></a>If this length attribute is not set, the length required for the element content is used. </p>
172</td>
173</tr>
174<tr id="en-us_topic_0000001060517794_row18446638145412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1088mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1088mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1088mcpsimp"></a>padding</p>
175</td>
176<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1090mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1090mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1090mcpsimp"></a>&lt;length&gt;</p>
177</td>
178<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1092mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1092mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1092mcpsimp"></a>0</p>
179</td>
180<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p19729127112814"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p19729127112814"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p19729127112814"></a>No</p>
181</td>
182<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><div class="p" id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1094mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1094mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1094mcpsimp"></a>The attribute can have one to four values:<a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul15202134923211"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul15202134923211"></a><ul id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul15202134923211"><li><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p10614155353215"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p10614155353215"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p10614155353215"></a>If you set only one value, it specifies the padding for four sides.</p>
183</li><li><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p10614175393216"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p10614175393216"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p10614175393216"></a>If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.</p>
184</li><li><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p8614205393214"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p8614205393214"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p8614205393214"></a>If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.</p>
185</li><li><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p106141853193215"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p106141853193215"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p106141853193215"></a>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).</p>
186</li></ul>
187</div>
188</td>
189</tr>
190<tr id="en-us_topic_0000001060517794_row24464380544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1097mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1097mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1097mcpsimp"></a>padding-[left|top|right|bottom]</p>
191</td>
192<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1099mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1099mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1099mcpsimp"></a>&lt;length&gt;</p>
193</td>
194<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1101mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1101mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1101mcpsimp"></a>0</p>
195</td>
196<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p11729374289"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p11729374289"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p11729374289"></a>No</p>
197</td>
198<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1103mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1103mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1103mcpsimp"></a>Left, top, right, and bottom padding (in px).</p>
199</td>
200</tr>
201<tr id="en-us_topic_0000001060517794_row1144723845412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p769124717365"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p769124717365"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p769124717365"></a>padding-[start|end]</p>
202</td>
203<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p157617124374"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p157617124374"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p157617124374"></a>&lt;length&gt;</p>
204</td>
205<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1069144703616"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1069144703616"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1069144703616"></a>0</p>
206</td>
207<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1373027182819"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1373027182819"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1373027182819"></a>No</p>
208</td>
209<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1269184753610"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1269184753610"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1269184753610"></a>Start and end padding.</p>
210</td>
211</tr>
212<tr id="en-us_topic_0000001060517794_row11447438175410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1106mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1106mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1106mcpsimp"></a>margin</p>
213</td>
214<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1108mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1108mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1108mcpsimp"></a>&lt;length&gt;</p>
215</td>
216<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1110mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1110mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1110mcpsimp"></a>0</p>
217</td>
218<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p4730774285"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p4730774285"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p4730774285"></a>No</p>
219</td>
220<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1112mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1112mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1112mcpsimp"></a>Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:</p>
221<a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul5333133311105"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul5333133311105"></a><ul id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul5333133311105"><li><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p03345339103"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p03345339103"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p03345339103"></a>If you set only one value, it specifies the margin for all the four sides.</p>
222</li><li><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1133420334108"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1133420334108"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1133420334108"></a>If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.</p>
223</li><li><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p193341533191015"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p193341533191015"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p193341533191015"></a>If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.</p>
224</li><li><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p733412334102"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p733412334102"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p733412334102"></a>If you set four values, they are margins for top, right, bottom, and left sides, respectively.</p>
225</li></ul>
226</td>
227</tr>
228<tr id="en-us_topic_0000001060517794_row144473383544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1115mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1115mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1115mcpsimp"></a>margin-[left|top|right|bottom]</p>
229</td>
230<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1117mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1117mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1117mcpsimp"></a>&lt;length&gt;</p>
231</td>
232<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1119mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1119mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1119mcpsimp"></a>0</p>
233</td>
234<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p773013742811"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p773013742811"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p773013742811"></a>No</p>
235</td>
236<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1121mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1121mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1121mcpsimp"></a>Left, top, right, and bottom margins.</p>
237</td>
238</tr>
239<tr id="en-us_topic_0000001060517794_row944743811541"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p9492107123816"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p9492107123816"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p9492107123816"></a>margin-[start|end]</p>
240</td>
241<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p157617124374_1"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p157617124374_1"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p157617124374_1"></a>&lt;length&gt;</p>
242</td>
243<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1549213793811"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1549213793811"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1549213793811"></a>0</p>
244</td>
245<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p117511744618"><a name="en-us_topic_0000001060517794_p117511744618"></a><a name="en-us_topic_0000001060517794_p117511744618"></a>No</p>
246</td>
247<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1049212715388"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1049212715388"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1049212715388"></a>Start and end margins.</p>
248</td>
249</tr>
250<tr id="en-us_topic_0000001060517794_row16447238155411"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1124mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1124mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1124mcpsimp"></a>border</p>
251</td>
252<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1126mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1126mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1126mcpsimp"></a>-</p>
253</td>
254<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1128mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1128mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1128mcpsimp"></a>0</p>
255</td>
256<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p11175131715467"><a name="en-us_topic_0000001060517794_p11175131715467"></a><a name="en-us_topic_0000001060517794_p11175131715467"></a>No</p>
257</td>
258<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1130mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1130mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1130mcpsimp"></a>Shorthand attribute to set all borders. You can set <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b79128342503"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b79128342503"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b79128342503"></a>border-width</strong>, <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b9366173919505"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b9366173919505"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b9366173919505"></a>border-style</strong>, and <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b184351248205019"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b184351248205019"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b184351248205019"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p>
259</td>
260</tr>
261<tr id="en-us_topic_0000001060517794_row4447138115414"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1133mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1133mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1133mcpsimp"></a>border-style</p>
262</td>
263<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p513631613319"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p513631613319"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p513631613319"></a>string</p>
264</td>
265<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1137mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1137mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1137mcpsimp"></a>solid</p>
266</td>
267<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p617531717464"><a name="en-us_topic_0000001060517794_p617531717464"></a><a name="en-us_topic_0000001060517794_p617531717464"></a>No</p>
268</td>
269<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p342285712314"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p342285712314"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p342285712314"></a>Shorthand attribute to set the style for all borders. Available values are as follows:</p>
270<a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul1470834505612"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul1470834505612"></a><ul id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul1470834505612"><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b143453286360"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b143453286360"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050791158_b792117280367"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b792117280367"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b792117280367"></a>dashed</strong>: Dashed border</li></ul>
271<a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul15621125545612"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul15621125545612"></a><ul id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul15621125545612"><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1335862963610"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1335862963610"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1335862963610"></a>solid</strong>: Solid border</li></ul>
272</td>
273</tr>
274<tr id="en-us_topic_0000001060517794_row1656512239262"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p119531437370"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p119531437370"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p119531437370"></a>border-[left|top|right|bottom]-style</p>
275</td>
276<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p129532037175"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p129532037175"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p129532037175"></a>string</p>
277</td>
278<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p495312372717"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p495312372717"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p495312372717"></a>solid</p>
279</td>
280<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p169534375717"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p169534375717"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p169534375717"></a>No</p>
281</td>
282<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p595353718719"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p595353718719"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p595353718719"></a>Styles of the left, top, right, and bottom borders. The available values are <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b17769171311540"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b17769171311540"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b17769171311540"></a>dotted</strong>, <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b237141519547"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b237141519547"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b237141519547"></a>dashed</strong>, and <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b8949161613540"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b8949161613540"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b8949161613540"></a>solid</strong>.</p>
283</td>
284</tr>
285<tr id="en-us_topic_0000001060517794_row19448113811542"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1142mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1142mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1142mcpsimp"></a>border-[left|top|right|bottom]</p>
286</td>
287<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1144mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1144mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1144mcpsimp"></a>-</p>
288</td>
289<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1146mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1146mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1146mcpsimp"></a>-</p>
290</td>
291<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p67303762810"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p67303762810"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p67303762810"></a>No</p>
292</td>
293<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1148mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1148mcpsimp"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050791158_b122415514554"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b122415514554"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b122415514554"></a>border-width</strong>, <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b12296178135513"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b12296178135513"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b12296178135513"></a>border-style</strong>, and <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1129701210553"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1129701210553"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1129701210553"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p>
294</td>
295</tr>
296<tr id="en-us_topic_0000001060517794_row124481638165417"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1151mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1151mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1151mcpsimp"></a>border-width</p>
297</td>
298<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1153mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1153mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1153mcpsimp"></a>&lt;length&gt;</p>
299</td>
300<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1155mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1155mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1155mcpsimp"></a>0</p>
301</td>
302<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p16175131724618"><a name="en-us_topic_0000001060517794_p16175131724618"></a><a name="en-us_topic_0000001060517794_p16175131724618"></a>No</p>
303</td>
304<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1157mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1157mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1157mcpsimp"></a>Shorthand attribute to set the width of all borders<span id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph07997369365"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph07997369365"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph07997369365"></a>, or separately set the width of each border</span>.</p>
305</td>
306</tr>
307<tr id="en-us_topic_0000001060517794_row54481038165410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1160mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1160mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1160mcpsimp"></a>border-[left|top|right|bottom]-width</p>
308</td>
309<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1162mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1162mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1162mcpsimp"></a>&lt;length&gt;</p>
310</td>
311<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1164mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1164mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1164mcpsimp"></a>0</p>
312</td>
313<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p11175151717466"><a name="en-us_topic_0000001060517794_p11175151717466"></a><a name="en-us_topic_0000001060517794_p11175151717466"></a>No</p>
314</td>
315<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1166mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1166mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1166mcpsimp"></a>Attribute to set widths of left, top, right, and bottom borders.</p>
316</td>
317</tr>
318<tr id="en-us_topic_0000001060517794_row1744817385547"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1169mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1169mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1169mcpsimp"></a>border-color</p>
319</td>
320<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1171mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1171mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1171mcpsimp"></a>&lt;color&gt;</p>
321</td>
322<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1173mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1173mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1173mcpsimp"></a>black</p>
323</td>
324<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p1017518177465"><a name="en-us_topic_0000001060517794_p1017518177465"></a><a name="en-us_topic_0000001060517794_p1017518177465"></a>No</p>
325</td>
326<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1175mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1175mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1175mcpsimp"></a>Shorthand attribute to set the color of all borders<span id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph9587639113619"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph9587639113619"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph9587639113619"></a>, or separately set the color of each border</span>.</p>
327</td>
328</tr>
329<tr id="en-us_topic_0000001060517794_row844813835410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1178mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1178mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1178mcpsimp"></a>border-[left|top|right|bottom]-color</p>
330</td>
331<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1180mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1180mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1180mcpsimp"></a>&lt;color&gt;</p>
332</td>
333<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1182mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1182mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1182mcpsimp"></a>black</p>
334</td>
335<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p11175417184611"><a name="en-us_topic_0000001060517794_p11175417184611"></a><a name="en-us_topic_0000001060517794_p11175417184611"></a>No</p>
336</td>
337<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1184mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1184mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1184mcpsimp"></a>Attribute to set colors of left, top, right, and bottom borders.</p>
338</td>
339</tr>
340<tr id="en-us_topic_0000001060517794_row944813389540"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1187mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1187mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1187mcpsimp"></a>border-radius</p>
341</td>
342<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1189mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1189mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1189mcpsimp"></a>&lt;length&gt;</p>
343</td>
344<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1191mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1191mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1191mcpsimp"></a>-</p>
345</td>
346<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p67306752816"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p67306752816"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p67306752816"></a>No</p>
347</td>
348<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p18998933174117"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p18998933174117"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050791158_ph1249443123611"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph1249443123611"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050791158_b124211434362"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b124211434362"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b124211434362"></a>border-width</strong> or <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b124894383615"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b124894383615"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b124894383615"></a>border-color</strong> for all the borders at the same time.</span></p>
349</td>
350</tr>
351<tr id="en-us_topic_0000001060517794_row104494382546"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1198mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1198mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1198mcpsimp"></a>border-[top|bottom]-[left|right]-radius</p>
352</td>
353<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1200mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1200mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1200mcpsimp"></a>&lt;length&gt;</p>
354</td>
355<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1202mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1202mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1202mcpsimp"></a>-</p>
356</td>
357<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p27305718283"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p27305718283"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p27305718283"></a>No</p>
358</td>
359<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1204mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1204mcpsimp"></a><a name="en-us_topic_0000001060517794_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>
360</td>
361</tr>
362<tr id="en-us_topic_0000001060517794_row1344912384548"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"></a>background</p>
363</td>
364<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"></a>&lt;linear-gradient&gt;</p>
365</td>
366<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"></a>-</p>
367</td>
368<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p15730197132811"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p15730197132811"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p15730197132811"></a>No</p>
369</td>
370<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"><a name="en-us_topic_0000001060517794_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"></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_0000001060517794_b33693522613"><a name="en-us_topic_0000001060517794_b33693522613"></a><a name="en-us_topic_0000001060517794_b33693522613"></a>background-color</strong> or <strong id="en-us_topic_0000001060517794_b11370552262"><a name="en-us_topic_0000001060517794_b11370552262"></a><a name="en-us_topic_0000001060517794_b11370552262"></a>background-image</strong>.</p>
371</td>
372</tr>
373<tr id="en-us_topic_0000001060517794_row15449838185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"></a>background-color</p>
374</td>
375<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"></a>&lt;color&gt;</p>
376</td>
377<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"></a>-</p>
378</td>
379<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p17730577282"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p17730577282"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p17730577282"></a>No</p>
380</td>
381<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"></a>Background color.</p>
382</td>
383</tr>
384<tr id="en-us_topic_0000001060517794_row54491338115412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"></a>background-image</p>
385</td>
386<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"></a>string</p>
387</td>
388<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"></a>-</p>
389</td>
390<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p7730976285"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p7730976285"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p7730976285"></a>No</p>
391</td>
392<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"></a>Background image. Currently, this attribute is not compatible with <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b17699154763620"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b17699154763620"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b17699154763620"></a>background-color</strong> or <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b87001647163613"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b87001647163613"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b87001647163613"></a>background</strong>. Both Internet and local image resources are supported.</p>
393</td>
394</tr>
395<tr id="en-us_topic_0000001060517794_row6449238185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"></a>background-size</p>
396</td>
397<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul1065173641310"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul1065173641310"></a><ul id="en-us_topic_0000001060517794_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>
398</td>
399<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"></a>auto</p>
400</td>
401<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p137309714282"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p137309714282"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p137309714282"></a>No</p>
402</td>
403<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p91971112114318"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p91971112114318"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p91971112114318"></a>Background image size.</p>
404<a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul41331853154111"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul41331853154111"></a><ul id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul41331853154111"><li>The <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1229715499365"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1229715499365"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1229715499365"></a>string</strong> values are as follows:<a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul13611494111"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul13611494111"></a><ul id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul13611494111"><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b4759749163610"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b4759749163610"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050791158_b136485011365"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b136485011365"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050791158_b1425512535366"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1425512535366"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1425512535366"></a>auto</strong>: The original image width-height ratio is retained.</li></ul>
405</li><li>The two <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b13309145193614"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b13309145193614"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b13309145193614"></a>&lt;length&gt;</strong> values are as follows:<p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1840244924418"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1840244924418"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050791158_b146661156143617"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b146661156143617"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b146661156143617"></a>auto</strong> by default.</p>
406</li><li>The two <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1667415763613"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1667415763613"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1667415763613"></a>&lt;percentage&gt;</strong> values are as follows:<p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p17936154410457"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p17936154410457"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050791158_b17190164371"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b17190164371"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b17190164371"></a>auto</strong> by default.</p>
407</li></ul>
408</td>
409</tr>
410<tr id="en-us_topic_0000001060517794_row94491238155415"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"></a>background-repeat</p>
411</td>
412<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"></a>string</p>
413</td>
414<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"></a>repeat</p>
415</td>
416<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1673015702810"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1673015702810"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1673015702810"></a>No</p>
417</td>
418<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"></a><a name="en-us_topic_0000001060517794_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>
419<a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul8236153103612"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul8236153103612"></a><ul id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul8236153103612"><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1363463710"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1363463710"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050791158_b267416916377"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b267416916377"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b267416916377"></a>repeat-x</strong>: Draws images along the x-axis.</li><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b625561011379"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b625561011379"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b625561011379"></a>repeat-y</strong>: Draws images along the y-axis.</li><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1122181133715"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1122181133715"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1122181133715"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul>
420</td>
421</tr>
422<tr id="en-us_topic_0000001060517794_row94491738105419"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"></a>background-position</p>
423</td>
424<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul8874155216502"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul8874155216502"></a><ul id="en-us_topic_0000001060517794_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>
425</td>
426<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"></a>0px 0px</p>
427</td>
428<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p173010720280"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p173010720280"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p173010720280"></a>No</p>
429</td>
430<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul1590812103363"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul1590812103363"></a><ul id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul1590812103363"><li>Using keywords: If only one keyword is specified, the other value is <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b997011116376"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b997011116376"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050791158_ul1453531734716"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul1453531734716"></a><ul id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul1453531734716"><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b0982111273712"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b0982111273712"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b0982111273712"></a>left</strong>: leftmost in the horizontal direction</li><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b866713583912"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b866713583912"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b866713583912"></a>right</strong>: rightmost in the horizontal direction</li><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b5886013193716"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b5886013193716"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b5886013193716"></a>top</strong>: top in the vertical direction</li><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b84197142376"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b84197142376"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b84197142376"></a>bottom</strong>: bottom in the vertical direction</li><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b14894114103710"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b14894114103710"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b14894114103710"></a>center</strong>: center position</li></ul>
431</li></ul>
432<a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul10908121023615"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul10908121023615"></a><ul id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul10908121023615"><li>Using <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b11401615193715"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b11401615193715"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050791158_b1341381819379"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1341381819379"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050791158_b48671516183714"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b48671516183714"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b48671516183714"></a>50%</strong>.</li><li>Using <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b5492717163712"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b5492717163712"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050791158_b164741723183712"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b164741723183712"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b164741723183712"></a>0% 0%</strong> indicates the upper left corner. <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b64022245377"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b64022245377"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050791158_b7893424163718"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b7893424163718"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b7893424163718"></a>50%</strong>.</li><li>Using both <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b154811725193718"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b154811725193718"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b154811725193718"></a>&lt;percentage&gt;</strong> and <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b34834254377"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b34834254377"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b34834254377"></a>&lt;length&gt;</strong>.</li></ul>
433</td>
434</tr>
435<tr id="en-us_topic_0000001060517794_row20450143885416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p134581712103910"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p134581712103910"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p134581712103910"></a>opacity</p>
436</td>
437<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"></a>number</p>
438</td>
439<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"></a>1</p>
440</td>
441<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1873011722814"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1873011722814"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1873011722814"></a>No</p>
442</td>
443<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p122515161139"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p122515161139"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p122515161139"></a>Transparency of an element. The value ranges from <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1871715526385"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1871715526385"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1871715526385"></a>0</strong> to <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b177181452103815"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b177181452103815"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b177181452103815"></a>1</strong>. The value <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b13718155210380"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b13718155210380"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b13718155210380"></a>1</strong> means opaque, and <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b6718152103818"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b6718152103818"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b6718152103818"></a>0</strong> means completely transparent.</p>
444</td>
445</tr>
446<tr id="en-us_topic_0000001060517794_row1450123865418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"></a>display</p>
447</td>
448<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1544115441446"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1544115441446"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1544115441446"></a>string</p>
449<p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"></a></p>
450</td>
451<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"></a>flex</p>
452</td>
453<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p167303762818"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p167303762818"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p167303762818"></a>No</p>
454</td>
455<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p23704018414"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p23704018414"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p23704018414"></a>How and whether to display the box containing an element. Available values are as follows:</p>
456<a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul12227103394916"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul12227103394916"></a><ul id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul12227103394916"><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b57468289377"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b57468289377"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b57468289377"></a>flex</strong>: flexible layout</li><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b18887133293920"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b18887133293920"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b18887133293920"></a>none</strong>: The element is hidden.</li></ul>
457</td>
458</tr>
459<tr id="en-us_topic_0000001060517794_row194503380541"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"></a>visibility</p>
460</td>
461<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p15475737486"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p15475737486"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p15475737486"></a>string</p>
462<p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"></a></p>
463</td>
464<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"></a>visible</p>
465</td>
466<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p57301471281"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p57301471281"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p57301471281"></a>No</p>
467</td>
468<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1568839154517"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1568839154517"></a><a name="en-us_topic_0000001060517794_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_0000001060517794_en-us_topic_0000001050791158_b15844103015378"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b15844103015378"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b15844103015378"></a>display</strong> attribute to <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b4845153013712"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b4845153013712"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b4845153013712"></a>none</strong>.) Available values are as follows:</p>
469<a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul751984164920"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul751984164920"></a><ul id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul751984164920"><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b17429331133711"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b17429331133711"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b17429331133711"></a>visible</strong>: The element is visible.</li><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b109191231193710"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b109191231193710"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b109191231193710"></a>hidden</strong>: The element is hidden but still takes up space.</li></ul>
470<div class="note" id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note4549524649"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note4549524649"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note4549524649"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p25499241642"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p25499241642"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p25499241642"></a>If both <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b719810016405"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b719810016405"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b719810016405"></a>visibility</strong> and <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b187052264018"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b187052264018"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b187052264018"></a>display</strong> are set, only <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b107788924011"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b107788924011"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b107788924011"></a>display</strong> takes effect.</p>
471</div></div>
472</td>
473</tr>
474<tr id="en-us_topic_0000001060517794_row13450113811544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1292mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1292mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1292mcpsimp"></a>flex</p>
475</td>
476<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1294mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1294mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1294mcpsimp"></a>number</p>
477</td>
478<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1296mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1296mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1296mcpsimp"></a>-</p>
479</td>
480<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1373057132812"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1373057132812"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1373057132812"></a>No</p>
481</td>
482<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1298mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1298mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1298mcpsimp"></a>How to divide available space of the parent component for a child component. It is used as a shorthand attribute to set the <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b675073313371"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b675073313371"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b675073313371"></a>flex-grow</strong> attribute of the parent component.</p>
483<div class="note" id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note34891253201520"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note34891253201520"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note34891253201520"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1248915538152"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1248915538152"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1248915538152"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b5392113473716"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b5392113473716"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b5392113473716"></a>&lt;div&gt;</strong>, <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b18394103473713"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b18394103473713"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b18394103473713"></a>&lt;list-item&gt;</strong>, or <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b153951534103716"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b153951534103716"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b153951534103716"></a>&lt;tabs&gt;</strong>.</p>
484</div></div>
485</td>
486</tr>
487<tr id="en-us_topic_0000001060517794_row13450138205418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1301mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1301mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1301mcpsimp"></a>flex-grow</p>
488</td>
489<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1303mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1303mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1303mcpsimp"></a>number</p>
490</td>
491<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1305mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1305mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1305mcpsimp"></a>0</p>
492</td>
493<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p81768178466"><a name="en-us_topic_0000001060517794_p81768178466"></a><a name="en-us_topic_0000001060517794_p81768178466"></a>No</p>
494</td>
495<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p4437122419557"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p4437122419557"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p4437122419557"></a>How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1682343583716"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1682343583716"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1682343583716"></a>0</strong> indicates that the child component does not grow.</p>
496<div class="note" id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note201231734212"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note201231734212"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note201231734212"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p184555314553"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p184555314553"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p184555314553"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1444983613711"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1444983613711"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1444983613711"></a>&lt;div&gt;</strong>, <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b64501936153711"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b64501936153711"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b64501936153711"></a>&lt;list-item&gt;</strong>, or <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1145115367371"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1145115367371"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1145115367371"></a>&lt;tabs&gt;</strong>.</p>
497</div></div>
498</td>
499</tr>
500<tr id="en-us_topic_0000001060517794_row845016384549"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1310mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1310mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1310mcpsimp"></a>flex-shrink</p>
501</td>
502<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1312mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1312mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1312mcpsimp"></a>number</p>
503</td>
504<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1314mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1314mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1314mcpsimp"></a>1</p>
505</td>
506<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p1917613178465"><a name="en-us_topic_0000001060517794_p1917613178465"></a><a name="en-us_topic_0000001060517794_p1917613178465"></a>No</p>
507</td>
508<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1316mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1316mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1316mcpsimp"></a>How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b783242395"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b783242395"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b783242395"></a>0</strong> indicates that the child component does not shrink.</p>
509<div class="note" id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note147160917217"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note147160917217"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note147160917217"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p844914328577"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p844914328577"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p844914328577"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1441723203915"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1441723203915"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1441723203915"></a>&lt;div&gt;</strong>, <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b14282393913"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b14282393913"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b14282393913"></a>&lt;list-item&gt;</strong>, or <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b2043102343910"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b2043102343910"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b2043102343910"></a>&lt;tabs&gt;</strong>.</p>
510</div></div>
511</td>
512</tr>
513<tr id="en-us_topic_0000001060517794_row144511738195411"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1319mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1319mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1319mcpsimp"></a>flex-basis</p>
514</td>
515<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1148910787"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1148910787"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1148910787"></a>&lt;length&gt;</p>
516<p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1321mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1321mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1321mcpsimp"></a></p>
517</td>
518<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1323mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1323mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1323mcpsimp"></a>-</p>
519</td>
520<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_p0176817154612"><a name="en-us_topic_0000001060517794_p0176817154612"></a><a name="en-us_topic_0000001060517794_p0176817154612"></a>No</p>
521</td>
522<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1325mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1325mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1325mcpsimp"></a>Initial length of the flex item on the main axis.</p>
523<div class="note" id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note62848141222"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note62848141222"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note62848141222"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p16711745115718"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p16711745115718"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p16711745115718"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1864241917398"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1864241917398"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1864241917398"></a>&lt;div&gt;</strong>, <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b19648111913920"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b19648111913920"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b19648111913920"></a>&lt;list-item&gt;</strong>, or <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b46497191399"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b46497191399"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b46497191399"></a>&lt;tabs&gt;</strong>.</p>
524</div></div>
525</td>
526</tr>
527<tr id="en-us_topic_0000001060517794_row184519384544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1328mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1328mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1328mcpsimp"></a>position</p>
528</td>
529<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1330mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1330mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1330mcpsimp"></a>string</p>
530</td>
531<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1332mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1332mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1332mcpsimp"></a>relative</p>
532</td>
533<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1173107172814"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1173107172814"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1173107172814"></a>No</p>
534</td>
535<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1334mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1334mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1334mcpsimp"></a>Positioning type of an element. Dynamic changes are not supported.</p>
536<a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul17185232185014"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul17185232185014"></a><ul id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul17185232185014"><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1894911155394"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1894911155394"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1894911155394"></a>fixed</strong>: The element is positioned related to the browser window.</li><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b823115152390"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b823115152390"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b823115152390"></a>absolute</strong>: The element is positioned absolutely to its parent element.</li><li><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b736151417395"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b736151417395"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b736151417395"></a>relative</strong>: The element is positioned relative to its normal position.</li></ul>
537<div class="note" id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note167617191219"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note167617191219"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_note167617191219"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1839092815101"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1839092815101"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1839092815101"></a>The <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b13941713133910"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b13941713133910"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b13941713133910"></a>absolute</strong> attribute takes effect only when the parent component is <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1099913173916"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1099913173916"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b1099913173916"></a>&lt;div&gt;</strong> or <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b181001413123919"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b181001413123919"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b181001413123919"></a>&lt;stack&gt;</strong>.</p>
538</div></div>
539</td>
540</tr>
541<tr id="en-us_topic_0000001060517794_row1545123811547"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1337mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1337mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1337mcpsimp"></a>[left|top<span id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph14927143614712"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph14927143614712"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph14927143614712"></a>|right|bottom</span>]</p>
542</td>
543<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1849062221214"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1849062221214"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p1849062221214"></a>&lt;length&gt;</p>
544</td>
545<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1341mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1341mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1341mcpsimp"></a>-</p>
546</td>
547<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p187314719288"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p187314719288"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_p187314719288"></a>No</p>
548</td>
549<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1343mcpsimp"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1343mcpsimp"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1343mcpsimp"></a><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b481348173914"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b481348173914"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b481348173914"></a>left|top</strong><span id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph4818118173914"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph4818118173914"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ph4818118173914"></a><strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b68143833912"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b68143833912"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b68143833912"></a>|right|bottom</strong></span> must be used together with <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b881916818394"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b881916818394"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b881916818394"></a>position</strong> to determine the offset position of an element.</p>
550<a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul12671003525"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul12671003525"></a><ul id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_ul12671003525"><li>The <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b885117712398"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b885117712398"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b885117712398"></a>left</strong> attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.</li><li>The <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b65591759395"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b65591759395"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b65591759395"></a>top</strong> attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.</li><li>The <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b179013323910"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b179013323910"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b179013323910"></a>right</strong> attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element. </li><li>The <strong id="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b77091602397"><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b77091602397"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001050791158_b77091602397"></a>bottom</strong> attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element. </li></ul>
551</td>
552</tr>
553</tbody>
554</table>
555
556>![](public_sys-resources/icon-note.gif) **NOTE:**
557>By default, text and images are placed in the middle of the  **<piece\>**  component.
558
559## Event<a name="en-us_topic_0000001060517794_section19137152119"></a>
560
561<a name="en-us_topic_0000001060517794_table3674139193020"></a>
562<table><thead align="left"><tr id="en-us_topic_0000001060517794_row14674539123012"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a>Name</p>
563</th>
564<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a>Parameter</p>
565</th>
566<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a>Triggered when</p>
567</th>
568</tr>
569</thead>
570<tbody><tr id="en-us_topic_0000001060517794_row418514431304"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060517794_p11911549133016"><a name="en-us_topic_0000001060517794_p11911549133016"></a><a name="en-us_topic_0000001060517794_p11911549133016"></a>close</p>
571</td>
572<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060517794_p1691204993018"><a name="en-us_topic_0000001060517794_p1691204993018"></a><a name="en-us_topic_0000001060517794_p1691204993018"></a>-</p>
573</td>
574<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060517794_p1891114933015"><a name="en-us_topic_0000001060517794_p1891114933015"></a><a name="en-us_topic_0000001060517794_p1891114933015"></a>Triggered when users click the delete icon of the operational piece. You can delete this component by using the <strong id="en-us_topic_0000001060517794_b1276472010487"><a name="en-us_topic_0000001060517794_b1276472010487"></a><a name="en-us_topic_0000001060517794_b1276472010487"></a>if</strong> directive.</p>
575</td>
576</tr>
577<tr id="en-us_topic_0000001060517794_row336512569516"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a>touchstart</p>
578</td>
579<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p>
580</td>
581<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a>The tapping starts</p>
582</td>
583</tr>
584<tr id="en-us_topic_0000001060517794_row1236519563517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a>touchmove</p>
585</td>
586<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p>
587</td>
588<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a>The tapping moves</p>
589</td>
590</tr>
591<tr id="en-us_topic_0000001060517794_row18365145615516"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a>touchcancel</p>
592</td>
593<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p>
594</td>
595<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a>The tapping is interrupted</p>
596</td>
597</tr>
598<tr id="en-us_topic_0000001060517794_row63651566517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a>touchend</p>
599</td>
600<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p>
601</td>
602<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a>The tapping ends</p>
603</td>
604</tr>
605<tr id="en-us_topic_0000001060517794_row1536575611516"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a>click</p>
606</td>
607<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a>-</p>
608</td>
609<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a>A component is clicked</p>
610</td>
611</tr>
612<tr id="en-us_topic_0000001060517794_row183661256758"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a>longpress</p>
613</td>
614<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a>-</p>
615</td>
616<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a>A component is long pressed</p>
617</td>
618</tr>
619<tr id="en-us_topic_0000001060517794_row5366185613517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_p12706561061"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_p12706561061"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_p12706561061"></a>swipe<sup id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_sup35424382912"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_sup35424382912"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_sup35424382912"></a>5+</sup></p>
620</td>
621<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_p11711056161"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_p11711056161"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_p11711056161"></a><a href="universal-events.md#en-us_topic_0000001058460527_table111811577714">SwipeEvent</a></p>
622</td>
623<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060517794_en-us_topic_0000001058460527_p2711556162"><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_p2711556162"></a><a name="en-us_topic_0000001060517794_en-us_topic_0000001058460527_p2711556162"></a>A user quickly swipes on a component.</p>
624</td>
625</tr>
626</tbody>
627</table>
628
629## Example Code<a name="en-us_topic_0000001060517794_section118886119320"></a>
630
631```
632<!-- xxx.hml-->
633<div>
634  <piece if="{{first}}" content="Huawei"></piece>
635  <piece if="{{second}}" content="Huawei" closable="true" onclose="closeSecond"></piece>
636</div>
637```
638
639```
640// xxx.js
641export default {
642  data: {
643    first: true,
644    second: true
645  },
646  closeSecond(e) {
647    this.second = false;
648  }
649}
650```
651
652![](figures/svid_20210301_193525_1.gif)
653
654