1# popup<a name="EN-US_TOPIC_0000001162494597"></a> 2 3- [Permission List](#en-us_topic_0000001058988948_section11257113618419) 4- [Child Component](#en-us_topic_0000001058988948_s726c642d8f514b0cb5ef8854fe6ac02c) 5- [Attribute](#en-us_topic_0000001058988948_s7ff9da9346504b11aca7015dc689dc67) 6- [Event](#en-us_topic_0000001058988948_section1295913853210) 7- [Style](#en-us_topic_0000001058988948_s472a5052130e49bca059adfe7bb6b96d) 8- [Method](#en-us_topic_0000001058988948_section1970516568131) 9- [Example Code](#en-us_topic_0000001058988948_section29231018162418) 10 11The **<popup\>** component is used to display a pop-up to instruct user operations after a user clicks a bound control. 12 13## Permission List<a name="en-us_topic_0000001058988948_section11257113618419"></a> 14 15None 16 17## Child Component<a name="en-us_topic_0000001058988948_s726c642d8f514b0cb5ef8854fe6ac02c"></a> 18 19All child components are supported. Each **<popup\>** can have only one child component<sup>5+</sup>. 20 21## Attribute<a name="en-us_topic_0000001058988948_s7ff9da9346504b11aca7015dc689dc67"></a> 22 23<a name="en-us_topic_0000001058988948_table20633101642315"></a> 24<table><thead align="left"><tr id="en-us_topic_0000001058988948_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"></a>Name</p> 25</th> 26<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"></a>Type</p> 27</th> 28<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"></a>Default Value</p> 29</th> 30<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001058988948_p824610360217"><a name="en-us_topic_0000001058988948_p824610360217"></a><a name="en-us_topic_0000001058988948_p824610360217"></a>Mandatory</p> 31</th> 32<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"></a>Description</p> 33</th> 34</tr> 35</thead> 36<tbody><tr id="en-us_topic_0000001058988948_row679154543116"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_p15904153153119"><a name="en-us_topic_0000001058988948_p15904153153119"></a><a name="en-us_topic_0000001058988948_p15904153153119"></a>target</p> 37</td> 38<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_p6904205312310"><a name="en-us_topic_0000001058988948_p6904205312310"></a><a name="en-us_topic_0000001058988948_p6904205312310"></a>string</p> 39</td> 40<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_p79041853123118"><a name="en-us_topic_0000001058988948_p79041853123118"></a><a name="en-us_topic_0000001058988948_p79041853123118"></a>-</p> 41</td> 42<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p4904153173110"><a name="en-us_topic_0000001058988948_p4904153173110"></a><a name="en-us_topic_0000001058988948_p4904153173110"></a>Yes</p> 43</td> 44<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_p9904155363115"><a name="en-us_topic_0000001058988948_p9904155363115"></a><a name="en-us_topic_0000001058988948_p9904155363115"></a>ID of the target element. Dynamic switch is not supported.</p> 45</td> 46</tr> 47<tr id="en-us_topic_0000001058988948_row17485184243110"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_p11904175316315"><a name="en-us_topic_0000001058988948_p11904175316315"></a><a name="en-us_topic_0000001058988948_p11904175316315"></a>placement</p> 48</td> 49<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_p1390413531314"><a name="en-us_topic_0000001058988948_p1390413531314"></a><a name="en-us_topic_0000001058988948_p1390413531314"></a>string</p> 50</td> 51<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_p390465317319"><a name="en-us_topic_0000001058988948_p390465317319"></a><a name="en-us_topic_0000001058988948_p390465317319"></a>bottom</p> 52</td> 53<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p1990415317319"><a name="en-us_topic_0000001058988948_p1990415317319"></a><a name="en-us_topic_0000001058988948_p1990415317319"></a>No</p> 54</td> 55<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_p1990410531316"><a name="en-us_topic_0000001058988948_p1990410531316"></a><a name="en-us_topic_0000001058988948_p1990410531316"></a>Position of the pop-up. Available values are as follows:</p> 56<a name="en-us_topic_0000001058988948_ul1190565393119"></a><a name="en-us_topic_0000001058988948_ul1190565393119"></a><ul id="en-us_topic_0000001058988948_ul1190565393119"><li><strong id="en-us_topic_0000001058988948_b15820759192312"><a name="en-us_topic_0000001058988948_b15820759192312"></a><a name="en-us_topic_0000001058988948_b15820759192312"></a>left</strong>: The pop-up is displayed on the left of the target item.</li><li><strong id="en-us_topic_0000001058988948_b16901171419245"><a name="en-us_topic_0000001058988948_b16901171419245"></a><a name="en-us_topic_0000001058988948_b16901171419245"></a>right</strong>: The pop-up is displayed on the right of the target item.</li><li><strong id="en-us_topic_0000001058988948_b1499931915246"><a name="en-us_topic_0000001058988948_b1499931915246"></a><a name="en-us_topic_0000001058988948_b1499931915246"></a>top</strong>: The pop-up is displayed at the top of the target item.</li><li><strong id="en-us_topic_0000001058988948_b4343193516249"><a name="en-us_topic_0000001058988948_b4343193516249"></a><a name="en-us_topic_0000001058988948_b4343193516249"></a>bottom</strong>: The pop-up is displayed at the bottom of the target item.</li><li><strong id="en-us_topic_0000001058988948_b64261744192420"><a name="en-us_topic_0000001058988948_b64261744192420"></a><a name="en-us_topic_0000001058988948_b64261744192420"></a>topLeft</strong>: The pop-up is displayed on the upper left of the target item.</li><li><strong id="en-us_topic_0000001058988948_b612225418245"><a name="en-us_topic_0000001058988948_b612225418245"></a><a name="en-us_topic_0000001058988948_b612225418245"></a>topRight</strong>: The pop-up is displayed on the upper right of the target item.</li><li><strong id="en-us_topic_0000001058988948_b19405122515"><a name="en-us_topic_0000001058988948_b19405122515"></a><a name="en-us_topic_0000001058988948_b19405122515"></a>bottomLeft</strong>: The pop-up is displayed on the bottom left of the target item.</li><li><strong id="en-us_topic_0000001058988948_b1069401942019"><a name="en-us_topic_0000001058988948_b1069401942019"></a><a name="en-us_topic_0000001058988948_b1069401942019"></a>bottomRight</strong>: The pop-up is displayed on the bottom right of the target item.</li></ul> 57</td> 58</tr> 59<tr id="en-us_topic_0000001058988948_row5684114975"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_p156851846718"><a name="en-us_topic_0000001058988948_p156851846718"></a><a name="en-us_topic_0000001058988948_p156851846718"></a>keepalive<sup id="en-us_topic_0000001058988948_sup7289771114"><a name="en-us_topic_0000001058988948_sup7289771114"></a><a name="en-us_topic_0000001058988948_sup7289771114"></a>5+</sup></p> 60</td> 61<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_p13685642077"><a name="en-us_topic_0000001058988948_p13685642077"></a><a name="en-us_topic_0000001058988948_p13685642077"></a>boolean</p> 62</td> 63<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_p16685164777"><a name="en-us_topic_0000001058988948_p16685164777"></a><a name="en-us_topic_0000001058988948_p16685164777"></a>false</p> 64</td> 65<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p1068513410710"><a name="en-us_topic_0000001058988948_p1068513410710"></a><a name="en-us_topic_0000001058988948_p1068513410710"></a>No</p> 66</td> 67<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_p135676462437"><a name="en-us_topic_0000001058988948_p135676462437"></a><a name="en-us_topic_0000001058988948_p135676462437"></a>Whether to retain the pop-up.</p> 68<p id="en-us_topic_0000001058988948_p192681545154318"><a name="en-us_topic_0000001058988948_p192681545154318"></a><a name="en-us_topic_0000001058988948_p192681545154318"></a><strong id="en-us_topic_0000001058988948_b16268845134315"><a name="en-us_topic_0000001058988948_b16268845134315"></a><a name="en-us_topic_0000001058988948_b16268845134315"></a>true</strong>: The pop-up does not disappear when users tap other areas or switch the page. To hide the pop-up, you need to call the <strong id="en-us_topic_0000001058988948_b15268164554320"><a name="en-us_topic_0000001058988948_b15268164554320"></a><a name="en-us_topic_0000001058988948_b15268164554320"></a>hide</strong> method. </p> 69<p id="en-us_topic_0000001058988948_p10685144771"><a name="en-us_topic_0000001058988948_p10685144771"></a><a name="en-us_topic_0000001058988948_p10685144771"></a><strong id="en-us_topic_0000001058988948_b465795984210"><a name="en-us_topic_0000001058988948_b465795984210"></a><a name="en-us_topic_0000001058988948_b465795984210"></a>false</strong>: The pop-up disappears when users tap other areas or switch the page.</p> 70</td> 71</tr> 72<tr id="en-us_topic_0000001058988948_row99782190913"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_p397971910920"><a name="en-us_topic_0000001058988948_p397971910920"></a><a name="en-us_topic_0000001058988948_p397971910920"></a>clickable<sup id="en-us_topic_0000001058988948_sup143370106114"><a name="en-us_topic_0000001058988948_sup143370106114"></a><a name="en-us_topic_0000001058988948_sup143370106114"></a>5+</sup></p> 73</td> 74<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_p149793191095"><a name="en-us_topic_0000001058988948_p149793191095"></a><a name="en-us_topic_0000001058988948_p149793191095"></a>boolean</p> 75</td> 76<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_p197981917920"><a name="en-us_topic_0000001058988948_p197981917920"></a><a name="en-us_topic_0000001058988948_p197981917920"></a>true</p> 77</td> 78<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p1197914193916"><a name="en-us_topic_0000001058988948_p1197914193916"></a><a name="en-us_topic_0000001058988948_p1197914193916"></a>No</p> 79</td> 80<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_p39792192095"><a name="en-us_topic_0000001058988948_p39792192095"></a><a name="en-us_topic_0000001058988948_p39792192095"></a>Whether to display the pop-up when users click the bound control. If this parameter is set to <strong id="en-us_topic_0000001058988948_b12988162164619"><a name="en-us_topic_0000001058988948_b12988162164619"></a><a name="en-us_topic_0000001058988948_b12988162164619"></a>false</strong>, the pop-up can be triggered only by a method call.</p> 81</td> 82</tr> 83<tr id="en-us_topic_0000001058988948_row94796310119"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_p174804313111"><a name="en-us_topic_0000001058988948_p174804313111"></a><a name="en-us_topic_0000001058988948_p174804313111"></a>arrowoffset<sup id="en-us_topic_0000001058988948_sup1520573571311"><a name="en-us_topic_0000001058988948_sup1520573571311"></a><a name="en-us_topic_0000001058988948_sup1520573571311"></a>5+</sup></p> 84</td> 85<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_p1948053131110"><a name="en-us_topic_0000001058988948_p1948053131110"></a><a name="en-us_topic_0000001058988948_p1948053131110"></a><length></p> 86</td> 87<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_p6480831191117"><a name="en-us_topic_0000001058988948_p6480831191117"></a><a name="en-us_topic_0000001058988948_p6480831191117"></a>0</p> 88</td> 89<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p8480153151112"><a name="en-us_topic_0000001058988948_p8480153151112"></a><a name="en-us_topic_0000001058988948_p8480153151112"></a>No</p> 90</td> 91<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_p548093131119"><a name="en-us_topic_0000001058988948_p548093131119"></a><a name="en-us_topic_0000001058988948_p548093131119"></a>Offset of the pop-up window arrow. By default, the arrow is centered. A positive value means that the arrow moves along the language direction (LTR or RTL), and a negative value means that the arrow moves along the opposite direction of the language direction.</p> 92</td> 93</tr> 94<tr id="en-us_topic_0000001058988948_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a>id</p> 95</td> 96<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a>string</p> 97</td> 98<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a>-</p> 99</td> 100<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p42461736102118"><a name="en-us_topic_0000001058988948_p42461736102118"></a><a name="en-us_topic_0000001058988948_p42461736102118"></a>No</p> 101</td> 102<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a>Unique ID of a component.</p> 103</td> 104</tr> 105<tr id="en-us_topic_0000001058988948_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a>style</p> 106</td> 107<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a>string</p> 108</td> 109<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a>-</p> 110</td> 111<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p17246836142119"><a name="en-us_topic_0000001058988948_p17246836142119"></a><a name="en-us_topic_0000001058988948_p17246836142119"></a>No</p> 112</td> 113<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a>Style declaration of a component.</p> 114</td> 115</tr> 116<tr id="en-us_topic_0000001058988948_row10634131610230"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a>class</p> 117</td> 118<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a>string</p> 119</td> 120<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a>-</p> 121</td> 122<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p324614367213"><a name="en-us_topic_0000001058988948_p324614367213"></a><a name="en-us_topic_0000001058988948_p324614367213"></a>No</p> 123</td> 124<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></a>Style class of a component, which is used to refer to a style table.</p> 125</td> 126</tr> 127<tr id="en-us_topic_0000001058988948_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_p1786251117156"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_p1786251117156"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_p1786251117156"></a>ref</p> 128</td> 129<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_p1086241119157"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_p1086241119157"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_p1086241119157"></a>string</p> 130</td> 131<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_p586281111151"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_p586281111151"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_p586281111151"></a>-</p> 132</td> 133<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p1624612362219"><a name="en-us_topic_0000001058988948_p1624612362219"></a><a name="en-us_topic_0000001058988948_p1624612362219"></a>No</p> 134</td> 135<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_p113416153342"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_p113416153342"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_p113416153342"></a>Used to register reference information of child elements<span id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_ph5815920163518"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_ph5815920163518"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_ph5815920163518"></a> or child components</span>. The reference information is registered with the parent component on <strong id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_b08212202354"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_b08212202354"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_b08212202354"></a>$refs</strong>.</p> 136</td> 137</tr> 138<tr id="en-us_topic_0000001058988948_row1863421642313"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"></a>disabled</p> 139</td> 140<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"></a>boolean</p> 141</td> 142<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"></a>false</p> 143</td> 144<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p192476368214"><a name="en-us_topic_0000001058988948_p192476368214"></a><a name="en-us_topic_0000001058988948_p192476368214"></a>No</p> 145</td> 146<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"></a>Whether a component is disabled. If it is disabled, it cannot respond to user interaction.</p> 147</td> 148</tr> 149<tr id="en-us_topic_0000001058988948_row1263451617236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a>data</p> 150</td> 151<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a>string</p> 152</td> 153<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a>-</p> 154</td> 155<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p22471736132114"><a name="en-us_topic_0000001058988948_p22471736132114"></a><a name="en-us_topic_0000001058988948_p22471736132114"></a>No</p> 156</td> 157<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a>Attribute set for a component to facilitate data storage and reading.</p> 158</td> 159</tr> 160</tbody> 161</table> 162 163## Event<a name="en-us_topic_0000001058988948_section1295913853210"></a> 164 165<a name="en-us_topic_0000001058988948_table836435619510"></a> 166<table><thead align="left"><tr id="en-us_topic_0000001058988948_row153658563517"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a>Name</p> 167</th> 168<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a>Parameter</p> 169</th> 170<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a>Triggered when</p> 171</th> 172</tr> 173</thead> 174<tbody><tr id="en-us_topic_0000001058988948_row84115915325"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058988948_p1458817720332"><a name="en-us_topic_0000001058988948_p1458817720332"></a><a name="en-us_topic_0000001058988948_p1458817720332"></a>visibilitychange</p> 175</td> 176<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058988948_p115888783316"><a name="en-us_topic_0000001058988948_p115888783316"></a><a name="en-us_topic_0000001058988948_p115888783316"></a>{ visibility: boolean }</p> 177</td> 178<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058988948_p558817173314"><a name="en-us_topic_0000001058988948_p558817173314"></a><a name="en-us_topic_0000001058988948_p558817173314"></a>Triggered when a pop-up appears or disappears.</p> 179</td> 180</tr> 181<tr id="en-us_topic_0000001058988948_row336512569516"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a>touchstart</p> 182</td> 183<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 184</td> 185<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a>The tapping starts</p> 186</td> 187</tr> 188<tr id="en-us_topic_0000001058988948_row1236519563517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a>touchmove</p> 189</td> 190<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 191</td> 192<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a>The tapping moves</p> 193</td> 194</tr> 195<tr id="en-us_topic_0000001058988948_row18365145615516"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a>touchcancel</p> 196</td> 197<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 198</td> 199<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a>The tapping is interrupted</p> 200</td> 201</tr> 202<tr id="en-us_topic_0000001058988948_row63651566517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a>touchend</p> 203</td> 204<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 205</td> 206<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a>The tapping ends</p> 207</td> 208</tr> 209<tr id="en-us_topic_0000001058988948_row1536575611516"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a>click</p> 210</td> 211<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a>-</p> 212</td> 213<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a>A component is clicked</p> 214</td> 215</tr> 216<tr id="en-us_topic_0000001058988948_row183661256758"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a>longpress</p> 217</td> 218<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a>-</p> 219</td> 220<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a>A component is long pressed</p> 221</td> 222</tr> 223<tr id="en-us_topic_0000001058988948_row5366185613517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_p12706561061"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_p12706561061"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_p12706561061"></a>swipe<sup id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_sup35424382912"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_sup35424382912"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_sup35424382912"></a>5+</sup></p> 224</td> 225<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_p11711056161"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_p11711056161"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_p11711056161"></a><a href="universal-events.md#en-us_topic_0000001058460527_table111811577714">SwipeEvent</a></p> 226</td> 227<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001058460527_p2711556162"><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_p2711556162"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001058460527_p2711556162"></a>A user quickly swipes on a component.</p> 228</td> 229</tr> 230</tbody> 231</table> 232 233## Style<a name="en-us_topic_0000001058988948_s472a5052130e49bca059adfe7bb6b96d"></a> 234 235<a name="en-us_topic_0000001058988948_table1744514388541"></a> 236<table><thead align="left"><tr id="en-us_topic_0000001058988948_row1244614388545"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"></a>Name</p> 237</th> 238<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"></a>Type</p> 239</th> 240<th class="cellrowborder" valign="top" width="8.869113088691131%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"></a>Default Value</p> 241</th> 242<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001058988948_p117421754619"><a name="en-us_topic_0000001058988948_p117421754619"></a><a name="en-us_topic_0000001058988948_p117421754619"></a>Mandatory</p> 243</th> 244<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"></a>Description</p> 245</th> 246</tr> 247</thead> 248<tbody><tr id="en-us_topic_0000001058988948_row18997455123419"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_p16813756183420"><a name="en-us_topic_0000001058988948_p16813756183420"></a><a name="en-us_topic_0000001058988948_p16813756183420"></a>mask-color</p> 249</td> 250<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_p681325683413"><a name="en-us_topic_0000001058988948_p681325683413"></a><a name="en-us_topic_0000001058988948_p681325683413"></a><color></p> 251</td> 252<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_p9813205613419"><a name="en-us_topic_0000001058988948_p9813205613419"></a><a name="en-us_topic_0000001058988948_p9813205613419"></a>#00000000</p> 253</td> 254<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p181345653419"><a name="en-us_topic_0000001058988948_p181345653419"></a><a name="en-us_topic_0000001058988948_p181345653419"></a>No</p> 255</td> 256<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_p12813185616343"><a name="en-us_topic_0000001058988948_p12813185616343"></a><a name="en-us_topic_0000001058988948_p12813185616343"></a>Color configuration of the mask layer. By default, the mask layer is completely transparent.</p> 257</td> 258</tr> 259<tr id="en-us_topic_0000001058988948_row13446238145410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a8bc81ecef4934adf91deb1d6167045d7"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a8bc81ecef4934adf91deb1d6167045d7"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a8bc81ecef4934adf91deb1d6167045d7"></a>width</p> 260</td> 261<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a59692217b9c94353a020a2f0a20f01a7"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a59692217b9c94353a020a2f0a20f01a7"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a59692217b9c94353a020a2f0a20f01a7"></a><length> | <percentage></p> 262</td> 263<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p3948114217528"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p3948114217528"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p3948114217528"></a>-</p> 264</td> 265<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p13174101704612"><a name="en-us_topic_0000001058988948_p13174101704612"></a><a name="en-us_topic_0000001058988948_p13174101704612"></a>No</p> 266</td> 267<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p624653010258"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p624653010258"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p624653010258"></a>Component width.</p> 268<p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p84811050134010"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p84811050134010"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p84811050134010"></a>If this attribute is not set, the width required for the element content is used. </p> 269</td> 270</tr> 271<tr id="en-us_topic_0000001058988948_row7446738195418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a738cc687552c4b8cb1aa9f9e7d9ea8c2"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a738cc687552c4b8cb1aa9f9e7d9ea8c2"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a738cc687552c4b8cb1aa9f9e7d9ea8c2"></a>height</p> 272</td> 273<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a82c5d9c65b3646ec92afe5f0f47a2149"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a82c5d9c65b3646ec92afe5f0f47a2149"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a82c5d9c65b3646ec92afe5f0f47a2149"></a><length><span id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ph11748352163918"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ph11748352163918"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ph11748352163918"></a></span> | <percentage></p> 274</td> 275<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a7e6c7daafecf475888d0420835662eb4"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a7e6c7daafecf475888d0420835662eb4"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a7e6c7daafecf475888d0420835662eb4"></a>-</p> 276</td> 277<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p71741417194619"><a name="en-us_topic_0000001058988948_p71741417194619"></a><a name="en-us_topic_0000001058988948_p71741417194619"></a>No</p> 278</td> 279<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1477601264"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1477601264"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1477601264"></a>Component height.</p> 280<p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p208761554184020"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p208761554184020"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p208761554184020"></a>If this length attribute is not set, the length required for the element content is used. </p> 281</td> 282</tr> 283<tr id="en-us_topic_0000001058988948_row18446638145412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a8ff18465b8f0453c836067e5902b7eb6"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a8ff18465b8f0453c836067e5902b7eb6"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a8ff18465b8f0453c836067e5902b7eb6"></a>padding</p> 284</td> 285<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a53628f36a25a4823a901d5b66860f44e"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a53628f36a25a4823a901d5b66860f44e"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a53628f36a25a4823a901d5b66860f44e"></a><length> | <percentage><sup id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup1886516813013"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup1886516813013"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup1886516813013"></a>5+</sup></p> 286</td> 287<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_adc824deaee924821a47a798b589f22c8"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_adc824deaee924821a47a798b589f22c8"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_adc824deaee924821a47a798b589f22c8"></a>0</p> 288</td> 289<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p19729127112814"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p19729127112814"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p19729127112814"></a>No</p> 290</td> 291<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p157435053316"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p157435053316"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p157435053316"></a>Shorthand attribute to set all padding attributes.</p> 292<div class="p" id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a68a6d5ddc59c49f0aaddd82e75932524"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a68a6d5ddc59c49f0aaddd82e75932524"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a68a6d5ddc59c49f0aaddd82e75932524"></a>The attribute can have one to four values:<a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul15202134923211"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul15202134923211"></a><ul id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul15202134923211"><li><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p10614155353215"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p10614155353215"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p10614155353215"></a>If you set only one value, it specifies the padding for four sides.</p> 293</li><li><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p10614175393216"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p10614175393216"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_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> 294</li><li><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p8614205393214"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p8614205393214"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_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> 295</li><li><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p106141853193215"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p106141853193215"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p106141853193215"></a>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).</p> 296</li></ul> 297</div> 298</td> 299</tr> 300<tr id="en-us_topic_0000001058988948_row24464380544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ab0185a7b5a4944f3b38f8c71c8ca794d"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ab0185a7b5a4944f3b38f8c71c8ca794d"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ab0185a7b5a4944f3b38f8c71c8ca794d"></a>padding-[left|top|right|bottom]</p> 301</td> 302<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a49dd523e2f1b4253a19231e776dc1951"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a49dd523e2f1b4253a19231e776dc1951"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a49dd523e2f1b4253a19231e776dc1951"></a><length> | <percentage><sup id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup19949912807"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup19949912807"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup19949912807"></a>5+</sup></p> 303</td> 304<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_af52ecd93919b4fa08ae4d376e3d544a2"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_af52ecd93919b4fa08ae4d376e3d544a2"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_af52ecd93919b4fa08ae4d376e3d544a2"></a>0</p> 305</td> 306<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p11729374289"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p11729374289"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p11729374289"></a>No</p> 307</td> 308<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a3575ab240d384ab1a21119ea3428ab7d"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a3575ab240d384ab1a21119ea3428ab7d"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a3575ab240d384ab1a21119ea3428ab7d"></a>Left, top, right, and bottom padding (in px).</p> 309</td> 310</tr> 311<tr id="en-us_topic_0000001058988948_row1144723845412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p769124717365"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p769124717365"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p769124717365"></a>padding-[start|end]</p> 312</td> 313<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p157617124374"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p157617124374"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p157617124374"></a><length> | <percentage><sup id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup8490161513019"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup8490161513019"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup8490161513019"></a>5+</sup></p> 314</td> 315<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1069144703616"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1069144703616"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1069144703616"></a>0</p> 316</td> 317<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1373027182819"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1373027182819"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1373027182819"></a>No</p> 318</td> 319<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1269184753610"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1269184753610"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1269184753610"></a>Start and end padding.</p> 320</td> 321</tr> 322<tr id="en-us_topic_0000001058988948_row11447438175410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_afa508e5429d948b2b561943d6b2f0f31"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_afa508e5429d948b2b561943d6b2f0f31"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_afa508e5429d948b2b561943d6b2f0f31"></a>margin</p> 323</td> 324<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a4dab4f9d97a74a27a45b7ef1d2ab08e6"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a4dab4f9d97a74a27a45b7ef1d2ab08e6"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a4dab4f9d97a74a27a45b7ef1d2ab08e6"></a><length> | <percentage><sup id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup1433352175220"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup1433352175220"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup1433352175220"></a>5+</sup></p> 325</td> 326<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a5e3c234d78214e8180b51d237adda154"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a5e3c234d78214e8180b51d237adda154"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a5e3c234d78214e8180b51d237adda154"></a>0</p> 327</td> 328<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p4730774285"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p4730774285"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p4730774285"></a>No</p> 329</td> 330<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a1d350e36a773420baf5ebb930cd5ad66"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a1d350e36a773420baf5ebb930cd5ad66"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a1d350e36a773420baf5ebb930cd5ad66"></a>Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:</p> 331<a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul5333133311105"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul5333133311105"></a><ul id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul5333133311105"><li><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p03345339103"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p03345339103"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p03345339103"></a>If you set only one value, it specifies the margin for all the four sides.</p> 332</li><li><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1133420334108"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1133420334108"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_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> 333</li><li><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p193341533191015"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p193341533191015"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_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> 334</li><li><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p733412334102"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p733412334102"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p733412334102"></a>If you set four values, they are margins for top, right, bottom, and left sides, respectively.</p> 335</li></ul> 336</td> 337</tr> 338<tr id="en-us_topic_0000001058988948_row144473383544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a70939a36b2b04dd8bec21f5bddc8637e"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a70939a36b2b04dd8bec21f5bddc8637e"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a70939a36b2b04dd8bec21f5bddc8637e"></a>margin-[left|top|right|bottom]</p> 339</td> 340<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ae53ac9ac370d483990e04ea9789c1e49"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ae53ac9ac370d483990e04ea9789c1e49"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ae53ac9ac370d483990e04ea9789c1e49"></a><length> | <percentage><sup id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup378331720532"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup378331720532"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup378331720532"></a>5+</sup></p> 341</td> 342<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a180cd037e6174e5c82f35a3a66b6f2ec"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a180cd037e6174e5c82f35a3a66b6f2ec"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a180cd037e6174e5c82f35a3a66b6f2ec"></a>0</p> 343</td> 344<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p773013742811"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p773013742811"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p773013742811"></a>No</p> 345</td> 346<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a487d09add6e54c5c89fa4f22e9318271"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a487d09add6e54c5c89fa4f22e9318271"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a487d09add6e54c5c89fa4f22e9318271"></a>Left, top, right, and bottom margins.</p> 347</td> 348</tr> 349<tr id="en-us_topic_0000001058988948_row944743811541"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p9492107123816"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p9492107123816"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p9492107123816"></a>margin-[start|end]</p> 350</td> 351<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p157617124374_1"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p157617124374_1"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p157617124374_1"></a><length> | <percentage><sup id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup8490161513019_1"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup8490161513019_1"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_sup8490161513019_1"></a>5+</sup></p> 352</td> 353<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1549213793811"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1549213793811"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1549213793811"></a>0</p> 354</td> 355<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p117511744618"><a name="en-us_topic_0000001058988948_p117511744618"></a><a name="en-us_topic_0000001058988948_p117511744618"></a>No</p> 356</td> 357<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1049212715388"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1049212715388"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1049212715388"></a>Start and end margins.</p> 358</td> 359</tr> 360<tr id="en-us_topic_0000001058988948_row16447238155411"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a222bb48f24014f2eb2b16a1a840bbebb"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a222bb48f24014f2eb2b16a1a840bbebb"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a222bb48f24014f2eb2b16a1a840bbebb"></a>border</p> 361</td> 362<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a79b4eaf9983c44d0aad39ff04d0997a8"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a79b4eaf9983c44d0aad39ff04d0997a8"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a79b4eaf9983c44d0aad39ff04d0997a8"></a>-</p> 363</td> 364<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aac320f4f0a42401aa7fa778d9829d77c"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aac320f4f0a42401aa7fa778d9829d77c"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aac320f4f0a42401aa7fa778d9829d77c"></a>0</p> 365</td> 366<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p11175131715467"><a name="en-us_topic_0000001058988948_p11175131715467"></a><a name="en-us_topic_0000001058988948_p11175131715467"></a>No</p> 367</td> 368<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a9cd962871a4c467a8e1ef452621d5cd7"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a9cd962871a4c467a8e1ef452621d5cd7"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a9cd962871a4c467a8e1ef452621d5cd7"></a>Shorthand attribute to set all borders. You can set <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b79128342503"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b79128342503"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b79128342503"></a>border-width</strong>, <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b9366173919505"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b9366173919505"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b9366173919505"></a>border-style</strong>, and <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b184351248205019"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b184351248205019"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b184351248205019"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 369</td> 370</tr> 371<tr id="en-us_topic_0000001058988948_row4447138115414"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a987708c0864a4128af094334f1b024b3"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a987708c0864a4128af094334f1b024b3"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a987708c0864a4128af094334f1b024b3"></a>border-style</p> 372</td> 373<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p513631613319"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p513631613319"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p513631613319"></a>string</p> 374</td> 375<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a2567083af59c40e58e3e4d9b0ddf1485"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a2567083af59c40e58e3e4d9b0ddf1485"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a2567083af59c40e58e3e4d9b0ddf1485"></a>solid</p> 376</td> 377<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p617531717464"><a name="en-us_topic_0000001058988948_p617531717464"></a><a name="en-us_topic_0000001058988948_p617531717464"></a>No</p> 378</td> 379<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p342285712314"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p342285712314"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p342285712314"></a>Shorthand attribute to set the style for all borders. Available values are as follows:</p> 380<a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul1470834505612"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul1470834505612"></a><ul id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul1470834505612"><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b143453286360"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b143453286360"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b143453286360"></a>dotted</strong>: Dotted border. The radius of a dot is half of border-width.</li><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b792117280367"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b792117280367"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b792117280367"></a>dashed</strong>: Dashed border</li></ul> 381<a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul15621125545612"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul15621125545612"></a><ul id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul15621125545612"><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1335862963610"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1335862963610"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1335862963610"></a>solid</strong>: Solid border</li></ul> 382</td> 383</tr> 384<tr id="en-us_topic_0000001058988948_row1656512239262"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p119531437370"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p119531437370"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p119531437370"></a>border-[left|top|right|bottom]-style</p> 385</td> 386<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p129532037175"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p129532037175"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p129532037175"></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_0000001058988948_en-us_topic_0000001059340528_p495312372717"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p495312372717"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p495312372717"></a>solid</p> 389</td> 390<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p169534375717"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p169534375717"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p169534375717"></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_0000001058988948_en-us_topic_0000001059340528_p595353718719"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p595353718719"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p595353718719"></a>Styles of the left, top, right, and bottom borders. The available values are <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b17769171311540"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b17769171311540"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b17769171311540"></a>dotted</strong>, <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b237141519547"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b237141519547"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b237141519547"></a>dashed</strong>, and <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b8949161613540"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b8949161613540"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b8949161613540"></a>solid</strong>.</p> 393</td> 394</tr> 395<tr id="en-us_topic_0000001058988948_row19448113811542"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a8afd82b1aba547d3b0188b749518b2de"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a8afd82b1aba547d3b0188b749518b2de"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a8afd82b1aba547d3b0188b749518b2de"></a>border-[left|top|right|bottom]</p> 396</td> 397<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ac4b8a3b39e5446b5868f1f2989dc9590"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ac4b8a3b39e5446b5868f1f2989dc9590"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ac4b8a3b39e5446b5868f1f2989dc9590"></a>-</p> 398</td> 399<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a3420bc82bd17458ab82fa996ade7064c"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a3420bc82bd17458ab82fa996ade7064c"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a3420bc82bd17458ab82fa996ade7064c"></a>-</p> 400</td> 401<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p67303762810"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p67303762810"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p67303762810"></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_0000001058988948_en-us_topic_0000001059340528_af4178a066c344412afbd38f4b0c44818"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_af4178a066c344412afbd38f4b0c44818"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_af4178a066c344412afbd38f4b0c44818"></a>Shorthand attribute to set the borders for every side respectively. You can set <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b122415514554"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b122415514554"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b122415514554"></a>border-width</strong>, <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b12296178135513"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b12296178135513"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b12296178135513"></a>border-style</strong>, and <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1129701210553"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1129701210553"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1129701210553"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 404</td> 405</tr> 406<tr id="en-us_topic_0000001058988948_row124481638165417"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_adf0e0afedc774afca9cda0e509391029"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_adf0e0afedc774afca9cda0e509391029"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_adf0e0afedc774afca9cda0e509391029"></a>border-width</p> 407</td> 408<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a0782ea2c45eb4864a8df82f30dd2cd5f"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a0782ea2c45eb4864a8df82f30dd2cd5f"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a0782ea2c45eb4864a8df82f30dd2cd5f"></a><length></p> 409</td> 410<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a395cbedd521145bd820b9171ee2dd7ac"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a395cbedd521145bd820b9171ee2dd7ac"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a395cbedd521145bd820b9171ee2dd7ac"></a>0</p> 411</td> 412<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p16175131724618"><a name="en-us_topic_0000001058988948_p16175131724618"></a><a name="en-us_topic_0000001058988948_p16175131724618"></a>No</p> 413</td> 414<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a7ae60621ea3341818a03bfdffa641894"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a7ae60621ea3341818a03bfdffa641894"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a7ae60621ea3341818a03bfdffa641894"></a>Shorthand attribute to set the width of all borders<span id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ph07997369365"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ph07997369365"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ph07997369365"></a>, or separately set the width of each border</span>.</p> 415</td> 416</tr> 417<tr id="en-us_topic_0000001058988948_row54481038165410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a7371edc07c664266a2e1866f31ad0d0c"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a7371edc07c664266a2e1866f31ad0d0c"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a7371edc07c664266a2e1866f31ad0d0c"></a>border-[left|top|right|bottom]-width</p> 418</td> 419<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a2faa532b841948a7b6598542b4eccc7b"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a2faa532b841948a7b6598542b4eccc7b"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a2faa532b841948a7b6598542b4eccc7b"></a><length></p> 420</td> 421<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a87f38cfa47f54bc18c32f9671c0f9ca6"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a87f38cfa47f54bc18c32f9671c0f9ca6"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a87f38cfa47f54bc18c32f9671c0f9ca6"></a>0</p> 422</td> 423<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p11175151717466"><a name="en-us_topic_0000001058988948_p11175151717466"></a><a name="en-us_topic_0000001058988948_p11175151717466"></a>No</p> 424</td> 425<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a20386e66c3834d5f96cf9435c4715c5b"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a20386e66c3834d5f96cf9435c4715c5b"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a20386e66c3834d5f96cf9435c4715c5b"></a>Attribute to set widths of left, top, right, and bottom borders.</p> 426</td> 427</tr> 428<tr id="en-us_topic_0000001058988948_row1744817385547"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a40a816cf0a03489d81f209a8aa7d81a6"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a40a816cf0a03489d81f209a8aa7d81a6"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a40a816cf0a03489d81f209a8aa7d81a6"></a>border-color</p> 429</td> 430<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_afcc7c948ae0947b2a78002d31f2f9748"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_afcc7c948ae0947b2a78002d31f2f9748"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_afcc7c948ae0947b2a78002d31f2f9748"></a><color></p> 431</td> 432<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ae0909d2b896342f9b2196fe0dce72920"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ae0909d2b896342f9b2196fe0dce72920"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ae0909d2b896342f9b2196fe0dce72920"></a>black</p> 433</td> 434<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p1017518177465"><a name="en-us_topic_0000001058988948_p1017518177465"></a><a name="en-us_topic_0000001058988948_p1017518177465"></a>No</p> 435</td> 436<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a76fd98995e1d4217aa703fecd69325c7"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a76fd98995e1d4217aa703fecd69325c7"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a76fd98995e1d4217aa703fecd69325c7"></a>Shorthand attribute to set the color of all borders<span id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ph9587639113619"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ph9587639113619"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ph9587639113619"></a>, or separately set the color of each border</span>.</p> 437</td> 438</tr> 439<tr id="en-us_topic_0000001058988948_row844813835410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a2afc646d6a2549548bcd5c4b9bed1fb5"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a2afc646d6a2549548bcd5c4b9bed1fb5"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a2afc646d6a2549548bcd5c4b9bed1fb5"></a>border-[left|top|right|bottom]-color</p> 440</td> 441<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a34556866a4f54f5da88f148fc698867b"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a34556866a4f54f5da88f148fc698867b"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a34556866a4f54f5da88f148fc698867b"></a><color></p> 442</td> 443<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a8ff58e18553846a38e82c69149e2aa30"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a8ff58e18553846a38e82c69149e2aa30"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a8ff58e18553846a38e82c69149e2aa30"></a>black</p> 444</td> 445<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_p11175417184611"><a name="en-us_topic_0000001058988948_p11175417184611"></a><a name="en-us_topic_0000001058988948_p11175417184611"></a>No</p> 446</td> 447<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a5c85947d388c4c7fbf0de07b022bb44e"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a5c85947d388c4c7fbf0de07b022bb44e"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a5c85947d388c4c7fbf0de07b022bb44e"></a>Attribute to set colors of left, top, right, and bottom borders.</p> 448</td> 449</tr> 450<tr id="en-us_topic_0000001058988948_row944813389540"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a65974e3078c447a383fb9237cc4ffa32"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a65974e3078c447a383fb9237cc4ffa32"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a65974e3078c447a383fb9237cc4ffa32"></a>border-radius</p> 451</td> 452<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a413fd0aea8b243349a19f825e96ee8b6"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a413fd0aea8b243349a19f825e96ee8b6"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a413fd0aea8b243349a19f825e96ee8b6"></a><length></p> 453</td> 454<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_af786857698c74e259f52589a6670a0a1"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_af786857698c74e259f52589a6670a0a1"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_af786857698c74e259f52589a6670a0a1"></a>-</p> 455</td> 456<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p67306752816"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p67306752816"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p67306752816"></a>No</p> 457</td> 458<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a52ca834f42124d3b8b12bbf54914fc96"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a52ca834f42124d3b8b12bbf54914fc96"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a52ca834f42124d3b8b12bbf54914fc96"></a>Attribute to set the radius of round borders of an element. <span id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ph1249443123611"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ph1249443123611"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ph1249443123611"></a>This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b124211434362"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b124211434362"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b124211434362"></a>border-width</strong>, <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b124894383615"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b124894383615"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b124894383615"></a>border-color</strong>, or <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b7166134516465"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b7166134516465"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b7166134516465"></a>border-style</strong> for all the borders at the same time.</span></p> 459</td> 460</tr> 461<tr id="en-us_topic_0000001058988948_row104494382546"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a466f1f8bc2fb404e82e8417c5133eacb"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a466f1f8bc2fb404e82e8417c5133eacb"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a466f1f8bc2fb404e82e8417c5133eacb"></a>border-[top|bottom]-[left|right]-radius</p> 462</td> 463<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a499fe910d0284647abc48b1bd0eb4868"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a499fe910d0284647abc48b1bd0eb4868"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a499fe910d0284647abc48b1bd0eb4868"></a><length></p> 464</td> 465<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ac142d1054eee499f948069f46129c492"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ac142d1054eee499f948069f46129c492"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ac142d1054eee499f948069f46129c492"></a>-</p> 466</td> 467<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p27305718283"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p27305718283"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p27305718283"></a>No</p> 468</td> 469<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a63757091a86c4ced97f0c39d37a2117c"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a63757091a86c4ced97f0c39d37a2117c"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a63757091a86c4ced97f0c39d37a2117c"></a>Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners</p> 470</td> 471</tr> 472<tr id="en-us_topic_0000001058988948_row1344912384548"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ae335be2c6150440fb31b40b1ca117858"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ae335be2c6150440fb31b40b1ca117858"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ae335be2c6150440fb31b40b1ca117858"></a>background</p> 473</td> 474<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a394a81171c5c4d1aa81b94fc5d2f0f07"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a394a81171c5c4d1aa81b94fc5d2f0f07"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a394a81171c5c4d1aa81b94fc5d2f0f07"></a><linear-gradient></p> 475</td> 476<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a0734de04e90e470cb608e8d5f42c6874"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a0734de04e90e470cb608e8d5f42c6874"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a0734de04e90e470cb608e8d5f42c6874"></a>-</p> 477</td> 478<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p15730197132811"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p15730197132811"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p15730197132811"></a>No</p> 479</td> 480<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"></a><a name="en-us_topic_0000001058988948_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_0000001058988948_en-us_topic_0000001059340528_b389373419292"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b389373419292"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b389373419292"></a>background-color</strong> or <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b0399637142918"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b0399637142918"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b0399637142918"></a>background-image</strong>.</p> 481</td> 482</tr> 483<tr id="en-us_topic_0000001058988948_row15449838185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a2977672444224b738a566c61225961c2"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a2977672444224b738a566c61225961c2"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a2977672444224b738a566c61225961c2"></a>background-color</p> 484</td> 485<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a87186748ed7c4694aef0095d8a7f8e43"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a87186748ed7c4694aef0095d8a7f8e43"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a87186748ed7c4694aef0095d8a7f8e43"></a><color></p> 486</td> 487<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a2775a3cca8994bec9b754af0d2455eb5"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a2775a3cca8994bec9b754af0d2455eb5"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a2775a3cca8994bec9b754af0d2455eb5"></a>-</p> 488</td> 489<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p17730577282"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p17730577282"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p17730577282"></a>No</p> 490</td> 491<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a372b6089bf9746f091c91fa49b571f1d"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a372b6089bf9746f091c91fa49b571f1d"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a372b6089bf9746f091c91fa49b571f1d"></a>Background color.</p> 492</td> 493</tr> 494<tr id="en-us_topic_0000001058988948_row54491338115412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ab2dff80cd59c4db1bf4293172f89735e"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ab2dff80cd59c4db1bf4293172f89735e"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ab2dff80cd59c4db1bf4293172f89735e"></a>background-image</p> 495</td> 496<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ad9a7e9f2469b45238a6a0ac6da232286"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ad9a7e9f2469b45238a6a0ac6da232286"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ad9a7e9f2469b45238a6a0ac6da232286"></a>string</p> 497</td> 498<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a73fb72c96edd488ba74c364568e345c6"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a73fb72c96edd488ba74c364568e345c6"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a73fb72c96edd488ba74c364568e345c6"></a>-</p> 499</td> 500<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p7730976285"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p7730976285"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p7730976285"></a>No</p> 501</td> 502<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a24de29e3cb4d476fabe55d48d69350a8"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a24de29e3cb4d476fabe55d48d69350a8"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a24de29e3cb4d476fabe55d48d69350a8"></a>Background image. Currently, this attribute is not compatible with <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b17699154763620"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b17699154763620"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b17699154763620"></a>background-color</strong> or <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b87001647163613"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b87001647163613"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b87001647163613"></a>background</strong>. Local image resources are supported.</p> 503<p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p45914251572"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p45914251572"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p45914251572"></a>Example:</p> 504<p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p16184973578"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p16184973578"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p16184973578"></a>background-image: url("/common/background.png")</p> 505</td> 506</tr> 507<tr id="en-us_topic_0000001058988948_row6449238185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_af81424fd1fbf4f5da65ea5d136390494"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_af81424fd1fbf4f5da65ea5d136390494"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_af81424fd1fbf4f5da65ea5d136390494"></a>background-size</p> 508</td> 509<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul1065173641310"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul1065173641310"></a><ul id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul1065173641310"><li>string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 510</td> 511<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a222f4e09239a4ab08880d1d9544d337c"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a222f4e09239a4ab08880d1d9544d337c"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a222f4e09239a4ab08880d1d9544d337c"></a>auto</p> 512</td> 513<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p137309714282"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p137309714282"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p137309714282"></a>No</p> 514</td> 515<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p91971112114318"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p91971112114318"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p91971112114318"></a>Background image size.</p> 516<a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul41331853154111"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul41331853154111"></a><ul id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul41331853154111"><li>The <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1229715499365"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1229715499365"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1229715499365"></a>string</strong> values are as follows:<a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul13611494111"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul13611494111"></a><ul id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul13611494111"><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b4759749163610"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b4759749163610"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_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_0000001058988948_en-us_topic_0000001059340528_b437619381712"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b437619381712"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b437619381712"></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 area.</li><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1425512535366"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1425512535366"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1425512535366"></a>auto</strong>: The original image width-height ratio is retained.</li></ul> 517</li><li>The two <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b13309145193614"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b13309145193614"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b13309145193614"></a><length></strong> values are as follows:<p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1840244924418"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1840244924418"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_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_0000001058988948_en-us_topic_0000001059340528_b146661156143617"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b146661156143617"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b146661156143617"></a>auto</strong> by default.</p> 518</li><li>The two <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1667415763613"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1667415763613"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1667415763613"></a><percentage></strong> values are as follows:<p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p17936154410457"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p17936154410457"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_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_0000001058988948_en-us_topic_0000001059340528_b1524319254"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1524319254"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1524319254"></a>auto</strong> by default.</p> 519</li></ul> 520</td> 521</tr> 522<tr id="en-us_topic_0000001058988948_row94491238155415"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a9957170386754fb5b648ba2114bd52d4"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a9957170386754fb5b648ba2114bd52d4"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a9957170386754fb5b648ba2114bd52d4"></a>background-repeat</p> 523</td> 524<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a155b4cc325e747279694d36c2fa69bcc"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a155b4cc325e747279694d36c2fa69bcc"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a155b4cc325e747279694d36c2fa69bcc"></a>string</p> 525</td> 526<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a82029c0dc1d540cf994f690b451c48f4"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a82029c0dc1d540cf994f690b451c48f4"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a82029c0dc1d540cf994f690b451c48f4"></a>repeat</p> 527</td> 528<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1673015702810"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1673015702810"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1673015702810"></a>No</p> 529</td> 530<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_afb8e41c117884b368a0f1df348be8e54"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_afb8e41c117884b368a0f1df348be8e54"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_afb8e41c117884b368a0f1df348be8e54"></a>How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.</p> 531<a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul8236153103612"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul8236153103612"></a><ul id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul8236153103612"><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1363463710"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1363463710"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1363463710"></a>repeat</strong>: Repeatedly draws images along the x-axis and y-axis at the same time.</li><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b267416916377"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b267416916377"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b267416916377"></a>repeat-x</strong>: Repeatedly draws images along the x-axis.</li><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b625561011379"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b625561011379"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b625561011379"></a>repeat-y</strong>: Repeatedly draws images along the y-axis.</li><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1122181133715"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1122181133715"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1122181133715"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul> 532</td> 533</tr> 534<tr id="en-us_topic_0000001058988948_row94491738105419"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a709eb4a9fa87428897bebb4a98693df2"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a709eb4a9fa87428897bebb4a98693df2"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a709eb4a9fa87428897bebb4a98693df2"></a>background-position</p> 535</td> 536<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul8874155216502"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul8874155216502"></a><ul id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul8874155216502"><li>string string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 537</td> 538<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a6f8f5d1c92f447bd868a841ad1a33cb1"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a6f8f5d1c92f447bd868a841ad1a33cb1"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a6f8f5d1c92f447bd868a841ad1a33cb1"></a>0px 0px</p> 539</td> 540<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p173010720280"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p173010720280"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p173010720280"></a>No</p> 541</td> 542<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul1590812103363"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul1590812103363"></a><ul id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul1590812103363"><li>Using keywords: If only one keyword is specified, the other value is <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b5234102011540"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b5234102011540"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b5234102011540"></a>center</strong> by default. The two values define the horizontal position and vertical position, respectively.<a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul1453531734716"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul1453531734716"></a><ul id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul1453531734716"><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b0982111273712"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b0982111273712"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b0982111273712"></a>left</strong>: leftmost in the horizontal direction</li><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b866713583912"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b866713583912"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b866713583912"></a>right</strong>: rightmost in the horizontal direction</li><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b5886013193716"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b5886013193716"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b5886013193716"></a>top</strong>: top in the vertical direction</li><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b84197142376"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b84197142376"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b84197142376"></a>bottom</strong>: bottom in the vertical direction</li><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b14894114103710"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b14894114103710"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b14894114103710"></a>center</strong>: center position</li></ul> 543</li></ul> 544<a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul10908121023615"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul10908121023615"></a><ul id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul10908121023615"><li>Using <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b11401615193715"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b11401615193715"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b11401615193715"></a><length></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1341381819379"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1341381819379"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_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_0000001058988948_en-us_topic_0000001059340528_b48671516183714"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b48671516183714"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b48671516183714"></a>50%</strong>.</li><li>Using <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b5492717163712"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b5492717163712"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b5492717163712"></a><percentage></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b164741723183712"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b164741723183712"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b164741723183712"></a>0% 0%</strong> indicates the upper left corner. <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b64022245377"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b64022245377"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_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_0000001058988948_en-us_topic_0000001059340528_b7893424163718"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b7893424163718"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b7893424163718"></a>50%</strong>.</li><li>Using both <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b154811725193718"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b154811725193718"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b154811725193718"></a><percentage></strong> and <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b34834254377"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b34834254377"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b34834254377"></a><length></strong>.</li></ul> 545</td> 546</tr> 547<tr id="en-us_topic_0000001058988948_row20450143885416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p134581712103910"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p134581712103910"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p134581712103910"></a>opacity</p> 548</td> 549<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a45185999ae584676af4c36467c2ade8b"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a45185999ae584676af4c36467c2ade8b"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a45185999ae584676af4c36467c2ade8b"></a>number</p> 550</td> 551<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a09ff20dda8e44794bca18c84f413d972"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a09ff20dda8e44794bca18c84f413d972"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_a09ff20dda8e44794bca18c84f413d972"></a>1</p> 552</td> 553<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1873011722814"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1873011722814"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1873011722814"></a>No</p> 554</td> 555<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p122515161139"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p122515161139"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p122515161139"></a>Transparency of an element. The value ranges from <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1871715526385"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1871715526385"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b1871715526385"></a>0</strong> to <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b177181452103815"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b177181452103815"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b177181452103815"></a>1</strong>. The value <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b13718155210380"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b13718155210380"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b13718155210380"></a>1</strong> means opaque, and <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b6718152103818"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b6718152103818"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b6718152103818"></a>0</strong> means completely transparent.</p> 556</td> 557</tr> 558<tr id="en-us_topic_0000001058988948_row1450123865418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aeda9e2f8d8344958bf4f43d429dcb55e"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aeda9e2f8d8344958bf4f43d429dcb55e"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aeda9e2f8d8344958bf4f43d429dcb55e"></a>display</p> 559</td> 560<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1544115441446"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1544115441446"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1544115441446"></a>string</p> 561<p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aaaa164aa970b490fb048e5f260f1c661"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aaaa164aa970b490fb048e5f260f1c661"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aaaa164aa970b490fb048e5f260f1c661"></a></p> 562</td> 563<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aa5ce61466c9847dbb7f44852338d9006"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aa5ce61466c9847dbb7f44852338d9006"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aa5ce61466c9847dbb7f44852338d9006"></a>flex</p> 564</td> 565<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p167303762818"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p167303762818"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p167303762818"></a>No</p> 566</td> 567<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p23704018414"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p23704018414"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p23704018414"></a>How and whether to display the box containing an element. Available values are as follows:</p> 568<a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul12227103394916"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul12227103394916"></a><ul id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul12227103394916"><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b57468289377"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b57468289377"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b57468289377"></a>flex</strong>: flexible layout</li><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b18887133293920"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b18887133293920"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b18887133293920"></a>none</strong>: The element is hidden.</li></ul> 569</td> 570</tr> 571<tr id="en-us_topic_0000001058988948_row194503380541"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aa2ed1da39c8e4ad78829712734226ab9"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aa2ed1da39c8e4ad78829712734226ab9"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aa2ed1da39c8e4ad78829712734226ab9"></a>visibility</p> 572</td> 573<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p15475737486"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p15475737486"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p15475737486"></a>string</p> 574<p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aabfb0eb044194745af56c313f40e7781"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aabfb0eb044194745af56c313f40e7781"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_aabfb0eb044194745af56c313f40e7781"></a></p> 575</td> 576<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_acaca80d4ef9a4f0d87adf92cb2d1ff9a"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_acaca80d4ef9a4f0d87adf92cb2d1ff9a"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_acaca80d4ef9a4f0d87adf92cb2d1ff9a"></a>visible</p> 577</td> 578<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p57301471281"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p57301471281"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p57301471281"></a>No</p> 579</td> 580<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1568839154517"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1568839154517"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p1568839154517"></a>Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b15844103015378"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b15844103015378"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b15844103015378"></a>display</strong> attribute to <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b4845153013712"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b4845153013712"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b4845153013712"></a>none</strong>.) Available values are as follows:</p> 581<a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul751984164920"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul751984164920"></a><ul id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_ul751984164920"><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b17429331133711"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b17429331133711"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b17429331133711"></a>visible</strong>: The element is visible.</li><li><strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b109191231193710"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b109191231193710"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b109191231193710"></a>hidden</strong>: The element is hidden but still takes up space.</li></ul> 582<div class="note" id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_note4549524649"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_note4549524649"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_note4549524649"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p25499241642"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p25499241642"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_p25499241642"></a>If both <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b719810016405"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b719810016405"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b719810016405"></a>visibility</strong> and <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b187052264018"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b187052264018"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b187052264018"></a>display</strong> are set, only <strong id="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b107788924011"><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b107788924011"></a><a name="en-us_topic_0000001058988948_en-us_topic_0000001059340528_b107788924011"></a>display</strong> takes effect.</p> 583</div></div> 584</td> 585</tr> 586</tbody> 587</table> 588 589## Method<a name="en-us_topic_0000001058988948_section1970516568131"></a> 590 591<a name="en-us_topic_0000001058988948_table20753173210251"></a> 592<table><thead align="left"><tr id="en-us_topic_0000001058988948_row575363214257"><th class="cellrowborder" valign="top" width="18.459999999999997%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058988948_p157531032112517"><a name="en-us_topic_0000001058988948_p157531032112517"></a><a name="en-us_topic_0000001058988948_p157531032112517"></a>Name</p> 593</th> 594<th class="cellrowborder" valign="top" width="30.769999999999996%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058988948_p77531632132518"><a name="en-us_topic_0000001058988948_p77531632132518"></a><a name="en-us_topic_0000001058988948_p77531632132518"></a>Parameter</p> 595</th> 596<th class="cellrowborder" valign="top" width="50.77%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058988948_p147531232132512"><a name="en-us_topic_0000001058988948_p147531232132512"></a><a name="en-us_topic_0000001058988948_p147531232132512"></a>Description</p> 597</th> 598</tr> 599</thead> 600<tbody><tr id="en-us_topic_0000001058988948_row15753113210251"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058988948_p2314135812511"><a name="en-us_topic_0000001058988948_p2314135812511"></a><a name="en-us_topic_0000001058988948_p2314135812511"></a>show<sup id="en-us_topic_0000001058988948_sup969153720142"><a name="en-us_topic_0000001058988948_sup969153720142"></a><a name="en-us_topic_0000001058988948_sup969153720142"></a>5+</sup></p> 601</td> 602<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058988948_p7314115819256"><a name="en-us_topic_0000001058988948_p7314115819256"></a><a name="en-us_topic_0000001058988948_p7314115819256"></a>-</p> 603</td> 604<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058988948_p0314958162512"><a name="en-us_topic_0000001058988948_p0314958162512"></a><a name="en-us_topic_0000001058988948_p0314958162512"></a>Pops up a message.</p> 605</td> 606</tr> 607<tr id="en-us_topic_0000001058988948_row393410526251"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058988948_p7314358182512"><a name="en-us_topic_0000001058988948_p7314358182512"></a><a name="en-us_topic_0000001058988948_p7314358182512"></a>hide<sup id="en-us_topic_0000001058988948_sup16463154010141"><a name="en-us_topic_0000001058988948_sup16463154010141"></a><a name="en-us_topic_0000001058988948_sup16463154010141"></a>5+</sup></p> 608</td> 609<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058988948_p1231455814253"><a name="en-us_topic_0000001058988948_p1231455814253"></a><a name="en-us_topic_0000001058988948_p1231455814253"></a>-</p> 610</td> 611<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058988948_p10314105842512"><a name="en-us_topic_0000001058988948_p10314105842512"></a><a name="en-us_topic_0000001058988948_p10314105842512"></a>Hides a pop-up.</p> 612</td> 613</tr> 614</tbody> 615</table> 616 617> **NOTE:** 618>1. Attributes and styles of a **<popup\>** component cannot be dynamically updated. 619>2. Margins of a pop-up take effect depending on its position relative to the target element. For example, if the pop-up is below the target element, only **margin-top** takes effect; if the pop-up displays on the upper left of the target element, only **margin-bottom** and **margin-right** take effect. 620>3. Styles set for the four borders of a pop-up must be the same. If they are different and the border radius is **0**, the first configured border style \(in the sequence of left, top, right, and bottom\) takes effect. Otherwise, the **border** attribute does not take effect. 621>4. The click event bound to the target element of a pop-up does not take effect. 622 623## Example Code<a name="en-us_topic_0000001058988948_section29231018162418"></a> 624 625``` 626<!-- xxx.hml --> 627<div class="container"> 628 <text id="text">Click to show the pop-up</text> 629 <!-- popup supports single child of any type5+ --> 630 <popup id="popup" class="popup" target="text" placement="top" keepalive="true" clickable="true" arrowoffset="100px" onvisibilitychange="visibilitychange" onclick="hidepopup"> 631 <text class="text">Text content of the pop-up</text> 632 </popup> 633 <button class="button" onclick="showpopup">Click to show the pop-up</button> 634</div> 635``` 636 637``` 638/* xxx.css */ 639.container { 640 flex-direction: column; 641 align-items: center; 642 padding: 200px; 643} 644.popup { 645 mask-color: gray; 646} 647.text { 648 color: white; 649} 650.button { 651 width: 220px; 652 height: 70px; 653 margin-top: 50px; 654} 655``` 656 657``` 658// xxx.js 659import prompt from '@system.prompt' 660export default { 661 visibilitychange(e) { 662 prompt.showToast({ 663 message: 'visibility change visibility: ' + e.visibility, 664 duration: 3000, 665 }); 666 }, 667 showpopup() { 668 this.$element("popup").show(); 669 }, 670 hidepopup() { 671 this.$element("popup").hide(); 672 }, 673} 674``` 675 676 677 678
