1# refresh<a name="EN-US_TOPIC_0000001115814818"></a> 2 3- [Permission List](#en-us_topic_0000001058562839_section11257113618419) 4- [Child Component](#en-us_topic_0000001058562839_section9288143101012) 5- [Attribute](#en-us_topic_0000001058562839_section2907183951110) 6- [Event](#en-us_topic_0000001058562839_section3892191911214) 7- [Style](#en-us_topic_0000001058562839_section1465118493710) 8 9The **<refresh\>** component is used to pull down to refresh the page. 10 11## Permission List<a name="en-us_topic_0000001058562839_section11257113618419"></a> 12 13None 14 15## Child Component<a name="en-us_topic_0000001058562839_section9288143101012"></a> 16 17Supported 18 19## Attribute<a name="en-us_topic_0000001058562839_section2907183951110"></a> 20 21<a name="en-us_topic_0000001058562839_table20633101642315"></a> 22<table><thead align="left"><tr id="en-us_topic_0000001058562839_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"></a>Name</p> 23</th> 24<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"></a>Type</p> 25</th> 26<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"></a>Default Value</p> 27</th> 28<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001058562839_p824610360217"><a name="en-us_topic_0000001058562839_p824610360217"></a><a name="en-us_topic_0000001058562839_p824610360217"></a>Mandatory</p> 29</th> 30<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"></a>Description</p> 31</th> 32</tr> 33</thead> 34<tbody><tr id="en-us_topic_0000001058562839_row9157554193514"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p178012583610"><a name="en-us_topic_0000001058562839_p178012583610"></a><a name="en-us_topic_0000001058562839_p178012583610"></a>offset</p> 35</td> 36<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p1880112512360"><a name="en-us_topic_0000001058562839_p1880112512360"></a><a name="en-us_topic_0000001058562839_p1880112512360"></a><length></p> 37</td> 38<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p4801551360"><a name="en-us_topic_0000001058562839_p4801551360"></a><a name="en-us_topic_0000001058562839_p4801551360"></a>-</p> 39</td> 40<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p880112519366"><a name="en-us_topic_0000001058562839_p880112519366"></a><a name="en-us_topic_0000001058562839_p880112519366"></a>No</p> 41</td> 42<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p380114563617"><a name="en-us_topic_0000001058562839_p380114563617"></a><a name="en-us_topic_0000001058562839_p380114563617"></a>Distance to the top of the parent component from the <strong id="en-us_topic_0000001058562839_b179761137151712"><a name="en-us_topic_0000001058562839_b179761137151712"></a><a name="en-us_topic_0000001058562839_b179761137151712"></a><refresh></strong> component that comes to rest after a successful swipe gesture.</p> 43</td> 44</tr> 45<tr id="en-us_topic_0000001058562839_row125231450153511"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p1380145163611"><a name="en-us_topic_0000001058562839_p1380145163611"></a><a name="en-us_topic_0000001058562839_p1380145163611"></a>refreshing</p> 46</td> 47<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p108011457365"><a name="en-us_topic_0000001058562839_p108011457365"></a><a name="en-us_topic_0000001058562839_p108011457365"></a>boolean</p> 48</td> 49<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p128011554364"><a name="en-us_topic_0000001058562839_p128011554364"></a><a name="en-us_topic_0000001058562839_p128011554364"></a>false</p> 50</td> 51<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p480119563613"><a name="en-us_topic_0000001058562839_p480119563613"></a><a name="en-us_topic_0000001058562839_p480119563613"></a>No</p> 52</td> 53<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p28011856362"><a name="en-us_topic_0000001058562839_p28011856362"></a><a name="en-us_topic_0000001058562839_p28011856362"></a>Whether the <strong id="en-us_topic_0000001058562839_b1342720507196"><a name="en-us_topic_0000001058562839_b1342720507196"></a><a name="en-us_topic_0000001058562839_b1342720507196"></a><refresh></strong> component is being used for refreshing.</p> 54</td> 55</tr> 56<tr id="en-us_topic_0000001058562839_row1752375015356"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p1480116513611"><a name="en-us_topic_0000001058562839_p1480116513611"></a><a name="en-us_topic_0000001058562839_p1480116513611"></a>type</p> 57</td> 58<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p11801105143616"><a name="en-us_topic_0000001058562839_p11801105143616"></a><a name="en-us_topic_0000001058562839_p11801105143616"></a>string</p> 59</td> 60<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p198028518361"><a name="en-us_topic_0000001058562839_p198028518361"></a><a name="en-us_topic_0000001058562839_p198028518361"></a>auto</p> 61</td> 62<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p680275173619"><a name="en-us_topic_0000001058562839_p680275173619"></a><a name="en-us_topic_0000001058562839_p680275173619"></a>No</p> 63</td> 64<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p9802205183619"><a name="en-us_topic_0000001058562839_p9802205183619"></a><a name="en-us_topic_0000001058562839_p9802205183619"></a>Dynamic effect when the component is refreshed. Two options are available and cannot be modified dynamically.</p> 65<a name="en-us_topic_0000001058562839_ul0802951367"></a><a name="en-us_topic_0000001058562839_ul0802951367"></a><ul id="en-us_topic_0000001058562839_ul0802951367"><li><strong id="en-us_topic_0000001058562839_b0351155943013"><a name="en-us_topic_0000001058562839_b0351155943013"></a><a name="en-us_topic_0000001058562839_b0351155943013"></a>auto</strong>: default effect. When the list is pulled to the top, the list does not move. When the list is pulled to the bottom, a circle is displayed.</li><li><strong id="en-us_topic_0000001058562839_b12317132114318"><a name="en-us_topic_0000001058562839_b12317132114318"></a><a name="en-us_topic_0000001058562839_b12317132114318"></a>pulldown</strong>: When the list is pulled to the top, users can continue to pull down to trigger a refresh. The rebound effect will appear after the refresh. If the child component contains a list, set <strong id="en-us_topic_0000001058562839_b1218171023213"><a name="en-us_topic_0000001058562839_b1218171023213"></a><a name="en-us_topic_0000001058562839_b1218171023213"></a>scrolleffect</strong> of the list to <strong id="en-us_topic_0000001058562839_b1152941417327"><a name="en-us_topic_0000001058562839_b1152941417327"></a><a name="en-us_topic_0000001058562839_b1152941417327"></a>no</strong> to prevent drop-down effect conflicts.</li></ul> 66</td> 67</tr> 68<tr id="en-us_topic_0000001058562839_row2303174523514"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p17802951363"><a name="en-us_topic_0000001058562839_p17802951363"></a><a name="en-us_topic_0000001058562839_p17802951363"></a>lasttime</p> 69</td> 70<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p580235153616"><a name="en-us_topic_0000001058562839_p580235153616"></a><a name="en-us_topic_0000001058562839_p580235153616"></a>boolean</p> 71</td> 72<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p198026510362"><a name="en-us_topic_0000001058562839_p198026510362"></a><a name="en-us_topic_0000001058562839_p198026510362"></a>false</p> 73</td> 74<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p118029511366"><a name="en-us_topic_0000001058562839_p118029511366"></a><a name="en-us_topic_0000001058562839_p118029511366"></a>No</p> 75</td> 76<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p1880211583612"><a name="en-us_topic_0000001058562839_p1880211583612"></a><a name="en-us_topic_0000001058562839_p1880211583612"></a>Whether to display the last update time. The character string format is <strong id="en-us_topic_0000001058562839_b46471930153316"><a name="en-us_topic_0000001058562839_b46471930153316"></a><a name="en-us_topic_0000001058562839_b46471930153316"></a>last update time: XXXX</strong>, where <strong id="en-us_topic_0000001058562839_b142341139133312"><a name="en-us_topic_0000001058562839_b142341139133312"></a><a name="en-us_topic_0000001058562839_b142341139133312"></a>XXXX</strong> is displayed based on the certain time and date formats and cannot be dynamically modified. (It is recommended that this attribute be used when <strong id="en-us_topic_0000001058562839_b22347013416"><a name="en-us_topic_0000001058562839_b22347013416"></a><a name="en-us_topic_0000001058562839_b22347013416"></a>type</strong> is set to <strong id="en-us_topic_0000001058562839_b20303548342"><a name="en-us_topic_0000001058562839_b20303548342"></a><a name="en-us_topic_0000001058562839_b20303548342"></a>pulldown</strong>. The fixed distance is at the bottom of the content drop-down area. Pay attention to the <strong id="en-us_topic_0000001058562839_b18265168348"><a name="en-us_topic_0000001058562839_b18265168348"></a><a name="en-us_topic_0000001058562839_b18265168348"></a>offset</strong> attribute setting to prevent overlapping.)</p> 77</td> 78</tr> 79<tr id="en-us_topic_0000001058562839_row08492042113518"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p11802105143616"><a name="en-us_topic_0000001058562839_p11802105143616"></a><a name="en-us_topic_0000001058562839_p11802105143616"></a>friction</p> 80</td> 81<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p1180265153613"><a name="en-us_topic_0000001058562839_p1180265153613"></a><a name="en-us_topic_0000001058562839_p1180265153613"></a>number</p> 82</td> 83<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p128026563620"><a name="en-us_topic_0000001058562839_p128026563620"></a><a name="en-us_topic_0000001058562839_p128026563620"></a>42</p> 84</td> 85<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p11802185153615"><a name="en-us_topic_0000001058562839_p11802185153615"></a><a name="en-us_topic_0000001058562839_p11802185153615"></a>No</p> 86</td> 87<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p118021351362"><a name="en-us_topic_0000001058562839_p118021351362"></a><a name="en-us_topic_0000001058562839_p118021351362"></a>Pull-down friction coefficient. The value ranges from <strong id="en-us_topic_0000001058562839_b7887020335"><a name="en-us_topic_0000001058562839_b7887020335"></a><a name="en-us_topic_0000001058562839_b7887020335"></a>0</strong> to <strong id="en-us_topic_0000001058562839_b81365257313"><a name="en-us_topic_0000001058562839_b81365257313"></a><a name="en-us_topic_0000001058562839_b81365257313"></a>100</strong>. A larger value indicates a more responsive component. For example, if a user pulls the component down 100 px, it will actually move 100 * <strong id="en-us_topic_0000001058562839_b2130757132018"><a name="en-us_topic_0000001058562839_b2130757132018"></a><a name="en-us_topic_0000001058562839_b2130757132018"></a>friction</strong>% px.</p> 88</td> 89</tr> 90<tr id="en-us_topic_0000001058562839_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a>id</p> 91</td> 92<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a>string</p> 93</td> 94<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a>-</p> 95</td> 96<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p42461736102118"><a name="en-us_topic_0000001058562839_p42461736102118"></a><a name="en-us_topic_0000001058562839_p42461736102118"></a>No</p> 97</td> 98<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a>Unique ID of a component.</p> 99</td> 100</tr> 101<tr id="en-us_topic_0000001058562839_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a>style</p> 102</td> 103<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a>string</p> 104</td> 105<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a>-</p> 106</td> 107<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p17246836142119"><a name="en-us_topic_0000001058562839_p17246836142119"></a><a name="en-us_topic_0000001058562839_p17246836142119"></a>No</p> 108</td> 109<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a>Style declaration of a component.</p> 110</td> 111</tr> 112<tr id="en-us_topic_0000001058562839_row10634131610230"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a>class</p> 113</td> 114<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a>string</p> 115</td> 116<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a>-</p> 117</td> 118<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p324614367213"><a name="en-us_topic_0000001058562839_p324614367213"></a><a name="en-us_topic_0000001058562839_p324614367213"></a>No</p> 119</td> 120<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></a>Style class of a component, which is used to refer to a style table.</p> 121</td> 122</tr> 123<tr id="en-us_topic_0000001058562839_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_p1786251117156"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_p1786251117156"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_p1786251117156"></a>ref</p> 124</td> 125<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_p1086241119157"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_p1086241119157"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_p1086241119157"></a>string</p> 126</td> 127<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_p586281111151"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_p586281111151"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_p586281111151"></a>-</p> 128</td> 129<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p1624612362219"><a name="en-us_topic_0000001058562839_p1624612362219"></a><a name="en-us_topic_0000001058562839_p1624612362219"></a>No</p> 130</td> 131<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_p113416153342"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_p113416153342"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_p113416153342"></a>Used to register reference information of child elements<span id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_ph5815920163518"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_ph5815920163518"></a><a name="en-us_topic_0000001058562839_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_0000001058562839_en-us_topic_0000001058340523_b08212202354"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_b08212202354"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_b08212202354"></a>$refs</strong>.</p> 132</td> 133</tr> 134<tr id="en-us_topic_0000001058562839_row1863421642313"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"></a>disabled</p> 135</td> 136<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"></a>boolean</p> 137</td> 138<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"></a>false</p> 139</td> 140<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p192476368214"><a name="en-us_topic_0000001058562839_p192476368214"></a><a name="en-us_topic_0000001058562839_p192476368214"></a>No</p> 141</td> 142<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"></a>Whether a component is disabled. If it is disabled, it cannot respond to user interaction.</p> 143</td> 144</tr> 145<tr id="en-us_topic_0000001058562839_row1263451617236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a>data</p> 146</td> 147<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a>string</p> 148</td> 149<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a>-</p> 150</td> 151<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p22471736132114"><a name="en-us_topic_0000001058562839_p22471736132114"></a><a name="en-us_topic_0000001058562839_p22471736132114"></a>No</p> 152</td> 153<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a><a name="en-us_topic_0000001058562839_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a>Attribute set for a component to facilitate data storage and reading.</p> 154</td> 155</tr> 156</tbody> 157</table> 158 159## Event<a name="en-us_topic_0000001058562839_section3892191911214"></a> 160 161<a name="en-us_topic_0000001058562839_table71957715020"></a> 162<table><thead align="left"><tr id="en-us_topic_0000001058562839_row4224147104"><th class="cellrowborder" valign="top" width="18.459999999999997%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058562839_p11224575017"><a name="en-us_topic_0000001058562839_p11224575017"></a><a name="en-us_topic_0000001058562839_p11224575017"></a>Name</p> 163</th> 164<th class="cellrowborder" valign="top" width="30.79%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058562839_p13225377018"><a name="en-us_topic_0000001058562839_p13225377018"></a><a name="en-us_topic_0000001058562839_p13225377018"></a>Parameter</p> 165</th> 166<th class="cellrowborder" valign="top" width="50.74999999999999%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058562839_p19225197001"><a name="en-us_topic_0000001058562839_p19225197001"></a><a name="en-us_topic_0000001058562839_p19225197001"></a>Description</p> 167</th> 168</tr> 169</thead> 170<tbody><tr id="en-us_topic_0000001058562839_row9225278016"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058562839_p6225187706"><a name="en-us_topic_0000001058562839_p6225187706"></a><a name="en-us_topic_0000001058562839_p6225187706"></a>refresh</p> 171</td> 172<td class="cellrowborder" valign="top" width="30.79%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058562839_p1422514714013"><a name="en-us_topic_0000001058562839_p1422514714013"></a><a name="en-us_topic_0000001058562839_p1422514714013"></a>{ refreshing: refreshingValue }</p> 173</td> 174<td class="cellrowborder" valign="top" width="50.74999999999999%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058562839_p15225575017"><a name="en-us_topic_0000001058562839_p15225575017"></a><a name="en-us_topic_0000001058562839_p15225575017"></a>Triggered when the <strong id="en-us_topic_0000001058562839_b152251728113018"><a name="en-us_topic_0000001058562839_b152251728113018"></a><a name="en-us_topic_0000001058562839_b152251728113018"></a><refresh></strong> component is pulled down and the refresh status changes. Available values are as follows:</p> 175<a name="en-us_topic_0000001058562839_ul96951626943"></a><a name="en-us_topic_0000001058562839_ul96951626943"></a><ul id="en-us_topic_0000001058562839_ul96951626943"><li><strong id="en-us_topic_0000001058562839_b18264193215"><a name="en-us_topic_0000001058562839_b18264193215"></a><a name="en-us_topic_0000001058562839_b18264193215"></a>false</strong>: The <strong id="en-us_topic_0000001058562839_b01351252103212"><a name="en-us_topic_0000001058562839_b01351252103212"></a><a name="en-us_topic_0000001058562839_b01351252103212"></a><refresh></strong> component is being pulled down.</li><li><strong id="en-us_topic_0000001058562839_b610561314337"><a name="en-us_topic_0000001058562839_b610561314337"></a><a name="en-us_topic_0000001058562839_b610561314337"></a>true</strong>: The <strong id="en-us_topic_0000001058562839_b2742219336"><a name="en-us_topic_0000001058562839_b2742219336"></a><a name="en-us_topic_0000001058562839_b2742219336"></a><refresh></strong> component is not being pulled down.</li></ul> 176</td> 177</tr> 178<tr id="en-us_topic_0000001058562839_row13275847193920"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058562839_p42761147173920"><a name="en-us_topic_0000001058562839_p42761147173920"></a><a name="en-us_topic_0000001058562839_p42761147173920"></a>pulldown</p> 179</td> 180<td class="cellrowborder" valign="top" width="30.79%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058562839_p227664711392"><a name="en-us_topic_0000001058562839_p227664711392"></a><a name="en-us_topic_0000001058562839_p227664711392"></a>{ state: string }</p> 181</td> 182<td class="cellrowborder" valign="top" width="50.74999999999999%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058562839_p527644753917"><a name="en-us_topic_0000001058562839_p527644753917"></a><a name="en-us_topic_0000001058562839_p527644753917"></a>Triggered when a user starts or stops pulling down the <strong id="en-us_topic_0000001058562839_b101091622103416"><a name="en-us_topic_0000001058562839_b101091622103416"></a><a name="en-us_topic_0000001058562839_b101091622103416"></a><refresh></strong> component. Available values are as follows:</p> 183<a name="en-us_topic_0000001058562839_ul225113709"></a><a name="en-us_topic_0000001058562839_ul225113709"></a><ul id="en-us_topic_0000001058562839_ul225113709"><li><strong id="en-us_topic_0000001058562839_b18546112103519"><a name="en-us_topic_0000001058562839_b18546112103519"></a><a name="en-us_topic_0000001058562839_b18546112103519"></a>start</strong>: The pull-down starts.</li><li><strong id="en-us_topic_0000001058562839_b1978717723516"><a name="en-us_topic_0000001058562839_b1978717723516"></a><a name="en-us_topic_0000001058562839_b1978717723516"></a>end</strong>: The pull-down ends.</li></ul> 184</td> 185</tr> 186</tbody> 187</table> 188 189## Style<a name="en-us_topic_0000001058562839_section1465118493710"></a> 190 191<a name="en-us_topic_0000001058562839_td0e7eac6a0284816a5c047f153c07d82"></a> 192<table><thead align="left"><tr id="en-us_topic_0000001058562839_rccf63bae170347ec85cc93fb5c6c2dbb"><th class="cellrowborder" valign="top" width="25.03%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001058562839_a14a0c012a26248cfbec6b13dcc4f2cbe"><a name="en-us_topic_0000001058562839_a14a0c012a26248cfbec6b13dcc4f2cbe"></a><a name="en-us_topic_0000001058562839_a14a0c012a26248cfbec6b13dcc4f2cbe"></a>Name</p> 193</th> 194<th class="cellrowborder" valign="top" width="18.86%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001058562839_a8dc328a555a74157a00de86181fc3a7b"><a name="en-us_topic_0000001058562839_a8dc328a555a74157a00de86181fc3a7b"></a><a name="en-us_topic_0000001058562839_a8dc328a555a74157a00de86181fc3a7b"></a>Type</p> 195</th> 196<th class="cellrowborder" valign="top" width="10.76%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001058562839_a41a31e48d0c74ad4982add2655515c82"><a name="en-us_topic_0000001058562839_a41a31e48d0c74ad4982add2655515c82"></a><a name="en-us_topic_0000001058562839_a41a31e48d0c74ad4982add2655515c82"></a>Default Value</p> 197</th> 198<th class="cellrowborder" valign="top" width="7.449999999999999%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001058562839_p1372916762810"><a name="en-us_topic_0000001058562839_p1372916762810"></a><a name="en-us_topic_0000001058562839_p1372916762810"></a>Mandatory</p> 199</th> 200<th class="cellrowborder" valign="top" width="37.9%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001058562839_af7a726e456f7485c87bd4e0527bc6584"><a name="en-us_topic_0000001058562839_af7a726e456f7485c87bd4e0527bc6584"></a><a name="en-us_topic_0000001058562839_af7a726e456f7485c87bd4e0527bc6584"></a>Description</p> 201</th> 202</tr> 203</thead> 204<tbody><tr id="en-us_topic_0000001058562839_row557072202520"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p855954192516"><a name="en-us_topic_0000001058562839_p855954192516"></a><a name="en-us_topic_0000001058562839_p855954192516"></a>background-color</p> 205</td> 206<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p255913412515"><a name="en-us_topic_0000001058562839_p255913412515"></a><a name="en-us_topic_0000001058562839_p255913412515"></a><color></p> 207</td> 208<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p1555914414255"><a name="en-us_topic_0000001058562839_p1555914414255"></a><a name="en-us_topic_0000001058562839_p1555914414255"></a>white</p> 209</td> 210<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p855934202518"><a name="en-us_topic_0000001058562839_p855934202518"></a><a name="en-us_topic_0000001058562839_p855934202518"></a>No</p> 211</td> 212<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p1255912416258"><a name="en-us_topic_0000001058562839_p1255912416258"></a><a name="en-us_topic_0000001058562839_p1255912416258"></a>Background color of the <strong id="en-us_topic_0000001058562839_b6261744123520"><a name="en-us_topic_0000001058562839_b6261744123520"></a><a name="en-us_topic_0000001058562839_b6261744123520"></a><refresh></strong> component.</p> 213</td> 214</tr> 215<tr id="en-us_topic_0000001058562839_row19895058142412"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p14559345250"><a name="en-us_topic_0000001058562839_p14559345250"></a><a name="en-us_topic_0000001058562839_p14559345250"></a>progress-color</p> 216</td> 217<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p165595419256"><a name="en-us_topic_0000001058562839_p165595419256"></a><a name="en-us_topic_0000001058562839_p165595419256"></a><color></p> 218</td> 219<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p20559543257"><a name="en-us_topic_0000001058562839_p20559543257"></a><a name="en-us_topic_0000001058562839_p20559543257"></a>black</p> 220</td> 221<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p18560144172515"><a name="en-us_topic_0000001058562839_p18560144172515"></a><a name="en-us_topic_0000001058562839_p18560144172515"></a>No</p> 222</td> 223<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p956017402513"><a name="en-us_topic_0000001058562839_p956017402513"></a><a name="en-us_topic_0000001058562839_p956017402513"></a>Loading color of the <strong id="en-us_topic_0000001058562839_b10763551419"><a name="en-us_topic_0000001058562839_b10763551419"></a><a name="en-us_topic_0000001058562839_b10763551419"></a><refresh></strong> component.</p> 224</td> 225</tr> 226<tr id="en-us_topic_0000001058562839_r86e8f72ab5d34004853cb4c0d2f72c9d"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a8bc81ecef4934adf91deb1d6167045d7"><a name="en-us_topic_0000001058562839_a8bc81ecef4934adf91deb1d6167045d7"></a><a name="en-us_topic_0000001058562839_a8bc81ecef4934adf91deb1d6167045d7"></a>width</p> 227</td> 228<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a59692217b9c94353a020a2f0a20f01a7"><a name="en-us_topic_0000001058562839_a59692217b9c94353a020a2f0a20f01a7"></a><a name="en-us_topic_0000001058562839_a59692217b9c94353a020a2f0a20f01a7"></a><length> | <percentage></p> 229</td> 230<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p3948114217528"><a name="en-us_topic_0000001058562839_p3948114217528"></a><a name="en-us_topic_0000001058562839_p3948114217528"></a>-</p> 231</td> 232<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p0729077286"><a name="en-us_topic_0000001058562839_p0729077286"></a><a name="en-us_topic_0000001058562839_p0729077286"></a>No</p> 233</td> 234<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p624653010258"><a name="en-us_topic_0000001058562839_p624653010258"></a><a name="en-us_topic_0000001058562839_p624653010258"></a>Component width</p> 235<p id="en-us_topic_0000001058562839_p84811050134010"><a name="en-us_topic_0000001058562839_p84811050134010"></a><a name="en-us_topic_0000001058562839_p84811050134010"></a>If this attribute is not set, the width required for the element content is used. </p> 236</td> 237</tr> 238<tr id="en-us_topic_0000001058562839_r4f331adcbe404a8081155e9582e2e1ba"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a738cc687552c4b8cb1aa9f9e7d9ea8c2"><a name="en-us_topic_0000001058562839_a738cc687552c4b8cb1aa9f9e7d9ea8c2"></a><a name="en-us_topic_0000001058562839_a738cc687552c4b8cb1aa9f9e7d9ea8c2"></a>height</p> 239</td> 240<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a82c5d9c65b3646ec92afe5f0f47a2149"><a name="en-us_topic_0000001058562839_a82c5d9c65b3646ec92afe5f0f47a2149"></a><a name="en-us_topic_0000001058562839_a82c5d9c65b3646ec92afe5f0f47a2149"></a><length><span id="en-us_topic_0000001058562839_ph11748352163918"><a name="en-us_topic_0000001058562839_ph11748352163918"></a><a name="en-us_topic_0000001058562839_ph11748352163918"></a></span> | <percentage></p> 241</td> 242<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a7e6c7daafecf475888d0420835662eb4"><a name="en-us_topic_0000001058562839_a7e6c7daafecf475888d0420835662eb4"></a><a name="en-us_topic_0000001058562839_a7e6c7daafecf475888d0420835662eb4"></a>-</p> 243</td> 244<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p57291702818"><a name="en-us_topic_0000001058562839_p57291702818"></a><a name="en-us_topic_0000001058562839_p57291702818"></a>No</p> 245</td> 246<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p1477601264"><a name="en-us_topic_0000001058562839_p1477601264"></a><a name="en-us_topic_0000001058562839_p1477601264"></a>Component height</p> 247<p id="en-us_topic_0000001058562839_p208761554184020"><a name="en-us_topic_0000001058562839_p208761554184020"></a><a name="en-us_topic_0000001058562839_p208761554184020"></a>If this attribute is not set, the height required for the element content is used. </p> 248</td> 249</tr> 250<tr id="en-us_topic_0000001058562839_row13660102510327"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p6377163523212"><a name="en-us_topic_0000001058562839_p6377163523212"></a><a name="en-us_topic_0000001058562839_p6377163523212"></a>min-width<sup id="en-us_topic_0000001058562839_sup537763519325"><a name="en-us_topic_0000001058562839_sup537763519325"></a><a name="en-us_topic_0000001058562839_sup537763519325"></a>5+</sup></p> 251</td> 252<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p1637715359321"><a name="en-us_topic_0000001058562839_p1637715359321"></a><a name="en-us_topic_0000001058562839_p1637715359321"></a><length></p> 253</td> 254<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p7377133512326"><a name="en-us_topic_0000001058562839_p7377133512326"></a><a name="en-us_topic_0000001058562839_p7377133512326"></a>0</p> 255</td> 256<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p16377135183220"><a name="en-us_topic_0000001058562839_p16377135183220"></a><a name="en-us_topic_0000001058562839_p16377135183220"></a>No</p> 257</td> 258<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p183771735113211"><a name="en-us_topic_0000001058562839_p183771735113211"></a><a name="en-us_topic_0000001058562839_p183771735113211"></a>Minimum component width</p> 259</td> 260</tr> 261<tr id="en-us_topic_0000001058562839_row1165519287327"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p73779355328"><a name="en-us_topic_0000001058562839_p73779355328"></a><a name="en-us_topic_0000001058562839_p73779355328"></a>min-height<sup id="en-us_topic_0000001058562839_sup11377735113211"><a name="en-us_topic_0000001058562839_sup11377735113211"></a><a name="en-us_topic_0000001058562839_sup11377735113211"></a>5+</sup></p> 262</td> 263<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p3377335143216"><a name="en-us_topic_0000001058562839_p3377335143216"></a><a name="en-us_topic_0000001058562839_p3377335143216"></a><length></p> 264</td> 265<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p1737743533212"><a name="en-us_topic_0000001058562839_p1737743533212"></a><a name="en-us_topic_0000001058562839_p1737743533212"></a>0</p> 266</td> 267<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p03771435173214"><a name="en-us_topic_0000001058562839_p03771435173214"></a><a name="en-us_topic_0000001058562839_p03771435173214"></a>No</p> 268</td> 269<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p337818353329"><a name="en-us_topic_0000001058562839_p337818353329"></a><a name="en-us_topic_0000001058562839_p337818353329"></a>Minimum component height</p> 270</td> 271</tr> 272<tr id="en-us_topic_0000001058562839_row1202531163210"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p10378183533219"><a name="en-us_topic_0000001058562839_p10378183533219"></a><a name="en-us_topic_0000001058562839_p10378183533219"></a>max-width<sup id="en-us_topic_0000001058562839_sup537813511327"><a name="en-us_topic_0000001058562839_sup537813511327"></a><a name="en-us_topic_0000001058562839_sup537813511327"></a>5+</sup></p> 273</td> 274<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p163781035173218"><a name="en-us_topic_0000001058562839_p163781035173218"></a><a name="en-us_topic_0000001058562839_p163781035173218"></a><length></p> 275</td> 276<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p737817355325"><a name="en-us_topic_0000001058562839_p737817355325"></a><a name="en-us_topic_0000001058562839_p737817355325"></a>-</p> 277</td> 278<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p1037810355323"><a name="en-us_topic_0000001058562839_p1037810355323"></a><a name="en-us_topic_0000001058562839_p1037810355323"></a>No</p> 279</td> 280<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p19378203513216"><a name="en-us_topic_0000001058562839_p19378203513216"></a><a name="en-us_topic_0000001058562839_p19378203513216"></a>Maximum component width, which has no restriction by default</p> 281</td> 282</tr> 283<tr id="en-us_topic_0000001058562839_row3921633163215"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p8378135193215"><a name="en-us_topic_0000001058562839_p8378135193215"></a><a name="en-us_topic_0000001058562839_p8378135193215"></a>max-height<sup id="en-us_topic_0000001058562839_sup63781535163210"><a name="en-us_topic_0000001058562839_sup63781535163210"></a><a name="en-us_topic_0000001058562839_sup63781535163210"></a>5+</sup></p> 284</td> 285<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p173788353327"><a name="en-us_topic_0000001058562839_p173788353327"></a><a name="en-us_topic_0000001058562839_p173788353327"></a><length></p> 286</td> 287<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p11378193523214"><a name="en-us_topic_0000001058562839_p11378193523214"></a><a name="en-us_topic_0000001058562839_p11378193523214"></a>-</p> 288</td> 289<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p637843515326"><a name="en-us_topic_0000001058562839_p637843515326"></a><a name="en-us_topic_0000001058562839_p637843515326"></a>No</p> 290</td> 291<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p23781235203214"><a name="en-us_topic_0000001058562839_p23781235203214"></a><a name="en-us_topic_0000001058562839_p23781235203214"></a>Maximum component height, which has no restriction by default</p> 292</td> 293</tr> 294<tr id="en-us_topic_0000001058562839_rbc132bca84214d4295bfeb9530425f5c"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a8ff18465b8f0453c836067e5902b7eb6"><a name="en-us_topic_0000001058562839_a8ff18465b8f0453c836067e5902b7eb6"></a><a name="en-us_topic_0000001058562839_a8ff18465b8f0453c836067e5902b7eb6"></a>padding</p> 295</td> 296<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a53628f36a25a4823a901d5b66860f44e"><a name="en-us_topic_0000001058562839_a53628f36a25a4823a901d5b66860f44e"></a><a name="en-us_topic_0000001058562839_a53628f36a25a4823a901d5b66860f44e"></a><length> | <percentage><sup id="en-us_topic_0000001058562839_sup1886516813013"><a name="en-us_topic_0000001058562839_sup1886516813013"></a><a name="en-us_topic_0000001058562839_sup1886516813013"></a>5+</sup></p> 297</td> 298<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_adc824deaee924821a47a798b589f22c8"><a name="en-us_topic_0000001058562839_adc824deaee924821a47a798b589f22c8"></a><a name="en-us_topic_0000001058562839_adc824deaee924821a47a798b589f22c8"></a>0</p> 299</td> 300<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p19729127112814"><a name="en-us_topic_0000001058562839_p19729127112814"></a><a name="en-us_topic_0000001058562839_p19729127112814"></a>No</p> 301</td> 302<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p157435053316"><a name="en-us_topic_0000001058562839_p157435053316"></a><a name="en-us_topic_0000001058562839_p157435053316"></a>Shorthand attribute to set all padding attributes.</p> 303<div class="p" id="en-us_topic_0000001058562839_a68a6d5ddc59c49f0aaddd82e75932524"><a name="en-us_topic_0000001058562839_a68a6d5ddc59c49f0aaddd82e75932524"></a><a name="en-us_topic_0000001058562839_a68a6d5ddc59c49f0aaddd82e75932524"></a>The attribute can have one to four values:<a name="en-us_topic_0000001058562839_ul15202134923211"></a><a name="en-us_topic_0000001058562839_ul15202134923211"></a><ul id="en-us_topic_0000001058562839_ul15202134923211"><li><p id="en-us_topic_0000001058562839_p10614155353215"><a name="en-us_topic_0000001058562839_p10614155353215"></a><a name="en-us_topic_0000001058562839_p10614155353215"></a>If you set only one value, it specifies the padding for four sides.</p> 304</li><li><p id="en-us_topic_0000001058562839_p10614175393216"><a name="en-us_topic_0000001058562839_p10614175393216"></a><a name="en-us_topic_0000001058562839_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> 305</li><li><p id="en-us_topic_0000001058562839_p8614205393214"><a name="en-us_topic_0000001058562839_p8614205393214"></a><a name="en-us_topic_0000001058562839_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> 306</li><li><p id="en-us_topic_0000001058562839_p106141853193215"><a name="en-us_topic_0000001058562839_p106141853193215"></a><a name="en-us_topic_0000001058562839_p106141853193215"></a>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).</p> 307</li></ul> 308</div> 309</td> 310</tr> 311<tr id="en-us_topic_0000001058562839_r5b9c603c3e9b4695b8908eb599f7146b"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_ab0185a7b5a4944f3b38f8c71c8ca794d"><a name="en-us_topic_0000001058562839_ab0185a7b5a4944f3b38f8c71c8ca794d"></a><a name="en-us_topic_0000001058562839_ab0185a7b5a4944f3b38f8c71c8ca794d"></a>padding-[left|top|right|bottom]</p> 312</td> 313<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a49dd523e2f1b4253a19231e776dc1951"><a name="en-us_topic_0000001058562839_a49dd523e2f1b4253a19231e776dc1951"></a><a name="en-us_topic_0000001058562839_a49dd523e2f1b4253a19231e776dc1951"></a><length> | <percentage><sup id="en-us_topic_0000001058562839_sup19949912807"><a name="en-us_topic_0000001058562839_sup19949912807"></a><a name="en-us_topic_0000001058562839_sup19949912807"></a>5+</sup></p> 314</td> 315<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_af52ecd93919b4fa08ae4d376e3d544a2"><a name="en-us_topic_0000001058562839_af52ecd93919b4fa08ae4d376e3d544a2"></a><a name="en-us_topic_0000001058562839_af52ecd93919b4fa08ae4d376e3d544a2"></a>0</p> 316</td> 317<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p11729374289"><a name="en-us_topic_0000001058562839_p11729374289"></a><a name="en-us_topic_0000001058562839_p11729374289"></a>No</p> 318</td> 319<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a3575ab240d384ab1a21119ea3428ab7d"><a name="en-us_topic_0000001058562839_a3575ab240d384ab1a21119ea3428ab7d"></a><a name="en-us_topic_0000001058562839_a3575ab240d384ab1a21119ea3428ab7d"></a>Left, top, right, and bottom padding (in px).</p> 320</td> 321</tr> 322<tr id="en-us_topic_0000001058562839_row116908472362"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p769124717365"><a name="en-us_topic_0000001058562839_p769124717365"></a><a name="en-us_topic_0000001058562839_p769124717365"></a>padding-[start|end]</p> 323</td> 324<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p157617124374"><a name="en-us_topic_0000001058562839_p157617124374"></a><a name="en-us_topic_0000001058562839_p157617124374"></a><length> | <percentage><sup id="en-us_topic_0000001058562839_sup8490161513019"><a name="en-us_topic_0000001058562839_sup8490161513019"></a><a name="en-us_topic_0000001058562839_sup8490161513019"></a>5+</sup></p> 325</td> 326<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p1069144703616"><a name="en-us_topic_0000001058562839_p1069144703616"></a><a name="en-us_topic_0000001058562839_p1069144703616"></a>0</p> 327</td> 328<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p1373027182819"><a name="en-us_topic_0000001058562839_p1373027182819"></a><a name="en-us_topic_0000001058562839_p1373027182819"></a>No</p> 329</td> 330<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p1269184753610"><a name="en-us_topic_0000001058562839_p1269184753610"></a><a name="en-us_topic_0000001058562839_p1269184753610"></a>Start and end padding.</p> 331</td> 332</tr> 333<tr id="en-us_topic_0000001058562839_ra1f0ab04099e40da96fcea74a214d6dc"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_afa508e5429d948b2b561943d6b2f0f31"><a name="en-us_topic_0000001058562839_afa508e5429d948b2b561943d6b2f0f31"></a><a name="en-us_topic_0000001058562839_afa508e5429d948b2b561943d6b2f0f31"></a>margin</p> 334</td> 335<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a4dab4f9d97a74a27a45b7ef1d2ab08e6"><a name="en-us_topic_0000001058562839_a4dab4f9d97a74a27a45b7ef1d2ab08e6"></a><a name="en-us_topic_0000001058562839_a4dab4f9d97a74a27a45b7ef1d2ab08e6"></a><length> | <percentage><sup id="en-us_topic_0000001058562839_sup1433352175220"><a name="en-us_topic_0000001058562839_sup1433352175220"></a><a name="en-us_topic_0000001058562839_sup1433352175220"></a>5+</sup></p> 336</td> 337<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a5e3c234d78214e8180b51d237adda154"><a name="en-us_topic_0000001058562839_a5e3c234d78214e8180b51d237adda154"></a><a name="en-us_topic_0000001058562839_a5e3c234d78214e8180b51d237adda154"></a>0</p> 338</td> 339<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p4730774285"><a name="en-us_topic_0000001058562839_p4730774285"></a><a name="en-us_topic_0000001058562839_p4730774285"></a>No</p> 340</td> 341<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a1d350e36a773420baf5ebb930cd5ad66"><a name="en-us_topic_0000001058562839_a1d350e36a773420baf5ebb930cd5ad66"></a><a name="en-us_topic_0000001058562839_a1d350e36a773420baf5ebb930cd5ad66"></a>Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:</p> 342<a name="en-us_topic_0000001058562839_ul5333133311105"></a><a name="en-us_topic_0000001058562839_ul5333133311105"></a><ul id="en-us_topic_0000001058562839_ul5333133311105"><li><p id="en-us_topic_0000001058562839_p03345339103"><a name="en-us_topic_0000001058562839_p03345339103"></a><a name="en-us_topic_0000001058562839_p03345339103"></a>If you set only one value, it specifies the margin for all the four sides.</p> 343</li><li><p id="en-us_topic_0000001058562839_p1133420334108"><a name="en-us_topic_0000001058562839_p1133420334108"></a><a name="en-us_topic_0000001058562839_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> 344</li><li><p id="en-us_topic_0000001058562839_p193341533191015"><a name="en-us_topic_0000001058562839_p193341533191015"></a><a name="en-us_topic_0000001058562839_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> 345</li><li><p id="en-us_topic_0000001058562839_p733412334102"><a name="en-us_topic_0000001058562839_p733412334102"></a><a name="en-us_topic_0000001058562839_p733412334102"></a>If you set four values, they are margins for top, right, bottom, and left sides, respectively.</p> 346</li></ul> 347</td> 348</tr> 349<tr id="en-us_topic_0000001058562839_rbcdeb5f7b53646bcbeb0d9ce45842f34"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a70939a36b2b04dd8bec21f5bddc8637e"><a name="en-us_topic_0000001058562839_a70939a36b2b04dd8bec21f5bddc8637e"></a><a name="en-us_topic_0000001058562839_a70939a36b2b04dd8bec21f5bddc8637e"></a>margin-[left|top|right|bottom]</p> 350</td> 351<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_ae53ac9ac370d483990e04ea9789c1e49"><a name="en-us_topic_0000001058562839_ae53ac9ac370d483990e04ea9789c1e49"></a><a name="en-us_topic_0000001058562839_ae53ac9ac370d483990e04ea9789c1e49"></a><length> | <percentage><sup id="en-us_topic_0000001058562839_sup378331720532"><a name="en-us_topic_0000001058562839_sup378331720532"></a><a name="en-us_topic_0000001058562839_sup378331720532"></a>5+</sup></p> 352</td> 353<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a180cd037e6174e5c82f35a3a66b6f2ec"><a name="en-us_topic_0000001058562839_a180cd037e6174e5c82f35a3a66b6f2ec"></a><a name="en-us_topic_0000001058562839_a180cd037e6174e5c82f35a3a66b6f2ec"></a>0</p> 354</td> 355<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p773013742811"><a name="en-us_topic_0000001058562839_p773013742811"></a><a name="en-us_topic_0000001058562839_p773013742811"></a>No</p> 356</td> 357<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a487d09add6e54c5c89fa4f22e9318271"><a name="en-us_topic_0000001058562839_a487d09add6e54c5c89fa4f22e9318271"></a><a name="en-us_topic_0000001058562839_a487d09add6e54c5c89fa4f22e9318271"></a>Left, top, right, and bottom margins.</p> 358</td> 359</tr> 360<tr id="en-us_topic_0000001058562839_row2347125383714"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p9492107123816"><a name="en-us_topic_0000001058562839_p9492107123816"></a><a name="en-us_topic_0000001058562839_p9492107123816"></a>margin-[start|end]</p> 361</td> 362<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p164928753815"><a name="en-us_topic_0000001058562839_p164928753815"></a><a name="en-us_topic_0000001058562839_p164928753815"></a><length> | <percentage><sup id="en-us_topic_0000001058562839_sup164498399219"><a name="en-us_topic_0000001058562839_sup164498399219"></a><a name="en-us_topic_0000001058562839_sup164498399219"></a>5+</sup></p> 363</td> 364<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p1549213793811"><a name="en-us_topic_0000001058562839_p1549213793811"></a><a name="en-us_topic_0000001058562839_p1549213793811"></a>0</p> 365</td> 366<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p173011710287"><a name="en-us_topic_0000001058562839_p173011710287"></a><a name="en-us_topic_0000001058562839_p173011710287"></a>No</p> 367</td> 368<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p1049212715388"><a name="en-us_topic_0000001058562839_p1049212715388"></a><a name="en-us_topic_0000001058562839_p1049212715388"></a>Start and end margins.</p> 369</td> 370</tr> 371<tr id="en-us_topic_0000001058562839_r60ccba1f3cc54a4399490c92f2fd350d"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a222bb48f24014f2eb2b16a1a840bbebb"><a name="en-us_topic_0000001058562839_a222bb48f24014f2eb2b16a1a840bbebb"></a><a name="en-us_topic_0000001058562839_a222bb48f24014f2eb2b16a1a840bbebb"></a>border</p> 372</td> 373<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a79b4eaf9983c44d0aad39ff04d0997a8"><a name="en-us_topic_0000001058562839_a79b4eaf9983c44d0aad39ff04d0997a8"></a><a name="en-us_topic_0000001058562839_a79b4eaf9983c44d0aad39ff04d0997a8"></a>-</p> 374</td> 375<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_aac320f4f0a42401aa7fa778d9829d77c"><a name="en-us_topic_0000001058562839_aac320f4f0a42401aa7fa778d9829d77c"></a><a name="en-us_topic_0000001058562839_aac320f4f0a42401aa7fa778d9829d77c"></a>0</p> 376</td> 377<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p177304720285"><a name="en-us_topic_0000001058562839_p177304720285"></a><a name="en-us_topic_0000001058562839_p177304720285"></a>No</p> 378</td> 379<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a9cd962871a4c467a8e1ef452621d5cd7"><a name="en-us_topic_0000001058562839_a9cd962871a4c467a8e1ef452621d5cd7"></a><a name="en-us_topic_0000001058562839_a9cd962871a4c467a8e1ef452621d5cd7"></a>Shorthand attribute to set all borders. You set <strong id="en-us_topic_0000001058562839_b1849213461591"><a name="en-us_topic_0000001058562839_b1849213461591"></a><a name="en-us_topic_0000001058562839_b1849213461591"></a>border-width</strong>, <strong id="en-us_topic_0000001058562839_b15061546196"><a name="en-us_topic_0000001058562839_b15061546196"></a><a name="en-us_topic_0000001058562839_b15061546196"></a>border-style</strong>, and <strong id="en-us_topic_0000001058562839_b19513346092"><a name="en-us_topic_0000001058562839_b19513346092"></a><a name="en-us_topic_0000001058562839_b19513346092"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 380</td> 381</tr> 382<tr id="en-us_topic_0000001058562839_rf47e6860036e4ababdf04b51974c019c"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a987708c0864a4128af094334f1b024b3"><a name="en-us_topic_0000001058562839_a987708c0864a4128af094334f1b024b3"></a><a name="en-us_topic_0000001058562839_a987708c0864a4128af094334f1b024b3"></a>border-style</p> 383</td> 384<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p513631613319"><a name="en-us_topic_0000001058562839_p513631613319"></a><a name="en-us_topic_0000001058562839_p513631613319"></a>string</p> 385</td> 386<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a2567083af59c40e58e3e4d9b0ddf1485"><a name="en-us_topic_0000001058562839_a2567083af59c40e58e3e4d9b0ddf1485"></a><a name="en-us_topic_0000001058562839_a2567083af59c40e58e3e4d9b0ddf1485"></a>solid</p> 387</td> 388<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p67303762810"><a name="en-us_topic_0000001058562839_p67303762810"></a><a name="en-us_topic_0000001058562839_p67303762810"></a>No</p> 389</td> 390<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p342285712314"><a name="en-us_topic_0000001058562839_p342285712314"></a><a name="en-us_topic_0000001058562839_p342285712314"></a>Shorthand attribute to set the style for all borders. Available values are as follows:</p> 391<a name="en-us_topic_0000001058562839_ul1470834505612"></a><a name="en-us_topic_0000001058562839_ul1470834505612"></a><ul id="en-us_topic_0000001058562839_ul1470834505612"><li><strong id="en-us_topic_0000001058562839_b67841019167"><a name="en-us_topic_0000001058562839_b67841019167"></a><a name="en-us_topic_0000001058562839_b67841019167"></a>dotted</strong>: Dotted border. The radius of a dot is half of <strong id="en-us_topic_0000001058562839_b4843111318169"><a name="en-us_topic_0000001058562839_b4843111318169"></a><a name="en-us_topic_0000001058562839_b4843111318169"></a>border-width</strong>.</li><li><strong id="en-us_topic_0000001058562839_b7928150165"><a name="en-us_topic_0000001058562839_b7928150165"></a><a name="en-us_topic_0000001058562839_b7928150165"></a>dashed</strong>: Dashed border</li></ul> 392<a name="en-us_topic_0000001058562839_ul15621125545612"></a><a name="en-us_topic_0000001058562839_ul15621125545612"></a><ul id="en-us_topic_0000001058562839_ul15621125545612"><li><strong id="en-us_topic_0000001058562839_b270111681613"><a name="en-us_topic_0000001058562839_b270111681613"></a><a name="en-us_topic_0000001058562839_b270111681613"></a>solid</strong>: Solid border</li></ul> 393</td> 394</tr> 395<tr id="en-us_topic_0000001058562839_row4953937976"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p119531437370"><a name="en-us_topic_0000001058562839_p119531437370"></a><a name="en-us_topic_0000001058562839_p119531437370"></a>border-[left|top|right|bottom]-style</p> 396</td> 397<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p129532037175"><a name="en-us_topic_0000001058562839_p129532037175"></a><a name="en-us_topic_0000001058562839_p129532037175"></a>string</p> 398</td> 399<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p495312372717"><a name="en-us_topic_0000001058562839_p495312372717"></a><a name="en-us_topic_0000001058562839_p495312372717"></a>solid</p> 400</td> 401<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p169534375717"><a name="en-us_topic_0000001058562839_p169534375717"></a><a name="en-us_topic_0000001058562839_p169534375717"></a>No</p> 402</td> 403<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p595353718719"><a name="en-us_topic_0000001058562839_p595353718719"></a><a name="en-us_topic_0000001058562839_p595353718719"></a>Styles of the left, top, right, and bottom borders. The available values are <strong id="en-us_topic_0000001058562839_b476852461612"><a name="en-us_topic_0000001058562839_b476852461612"></a><a name="en-us_topic_0000001058562839_b476852461612"></a>dotted</strong>, <strong id="en-us_topic_0000001058562839_b14774192491618"><a name="en-us_topic_0000001058562839_b14774192491618"></a><a name="en-us_topic_0000001058562839_b14774192491618"></a>dashed</strong>, and <strong id="en-us_topic_0000001058562839_b177442451615"><a name="en-us_topic_0000001058562839_b177442451615"></a><a name="en-us_topic_0000001058562839_b177442451615"></a>solid</strong>.</p> 404</td> 405</tr> 406<tr id="en-us_topic_0000001058562839_r6d2787d3df7c4c88ab88ab99a87459d3"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a8afd82b1aba547d3b0188b749518b2de"><a name="en-us_topic_0000001058562839_a8afd82b1aba547d3b0188b749518b2de"></a><a name="en-us_topic_0000001058562839_a8afd82b1aba547d3b0188b749518b2de"></a>border-[left|top|right|bottom]</p> 407</td> 408<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_ac4b8a3b39e5446b5868f1f2989dc9590"><a name="en-us_topic_0000001058562839_ac4b8a3b39e5446b5868f1f2989dc9590"></a><a name="en-us_topic_0000001058562839_ac4b8a3b39e5446b5868f1f2989dc9590"></a>-</p> 409</td> 410<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a3420bc82bd17458ab82fa996ade7064c"><a name="en-us_topic_0000001058562839_a3420bc82bd17458ab82fa996ade7064c"></a><a name="en-us_topic_0000001058562839_a3420bc82bd17458ab82fa996ade7064c"></a>-</p> 411</td> 412<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p7730177142816"><a name="en-us_topic_0000001058562839_p7730177142816"></a><a name="en-us_topic_0000001058562839_p7730177142816"></a>No</p> 413</td> 414<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_af4178a066c344412afbd38f4b0c44818"><a name="en-us_topic_0000001058562839_af4178a066c344412afbd38f4b0c44818"></a><a name="en-us_topic_0000001058562839_af4178a066c344412afbd38f4b0c44818"></a>Shorthand attribute to set the borders for every side respectively. You set <strong id="en-us_topic_0000001058562839_b32217385167"><a name="en-us_topic_0000001058562839_b32217385167"></a><a name="en-us_topic_0000001058562839_b32217385167"></a>border-width</strong>, <strong id="en-us_topic_0000001058562839_b227193841615"><a name="en-us_topic_0000001058562839_b227193841615"></a><a name="en-us_topic_0000001058562839_b227193841615"></a>border-style</strong>, and <strong id="en-us_topic_0000001058562839_b5281838171618"><a name="en-us_topic_0000001058562839_b5281838171618"></a><a name="en-us_topic_0000001058562839_b5281838171618"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 415</td> 416</tr> 417<tr id="en-us_topic_0000001058562839_ra8d2cc3cfa024bb3a5c167e3a84d974e"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_adf0e0afedc774afca9cda0e509391029"><a name="en-us_topic_0000001058562839_adf0e0afedc774afca9cda0e509391029"></a><a name="en-us_topic_0000001058562839_adf0e0afedc774afca9cda0e509391029"></a>border-width</p> 418</td> 419<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a0782ea2c45eb4864a8df82f30dd2cd5f"><a name="en-us_topic_0000001058562839_a0782ea2c45eb4864a8df82f30dd2cd5f"></a><a name="en-us_topic_0000001058562839_a0782ea2c45eb4864a8df82f30dd2cd5f"></a><length></p> 420</td> 421<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a395cbedd521145bd820b9171ee2dd7ac"><a name="en-us_topic_0000001058562839_a395cbedd521145bd820b9171ee2dd7ac"></a><a name="en-us_topic_0000001058562839_a395cbedd521145bd820b9171ee2dd7ac"></a>0</p> 422</td> 423<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p973013715281"><a name="en-us_topic_0000001058562839_p973013715281"></a><a name="en-us_topic_0000001058562839_p973013715281"></a>No</p> 424</td> 425<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a7ae60621ea3341818a03bfdffa641894"><a name="en-us_topic_0000001058562839_a7ae60621ea3341818a03bfdffa641894"></a><a name="en-us_topic_0000001058562839_a7ae60621ea3341818a03bfdffa641894"></a>Shorthand attribute to set the width of all borders<span id="en-us_topic_0000001058562839_ph19924112571710"><a name="en-us_topic_0000001058562839_ph19924112571710"></a><a name="en-us_topic_0000001058562839_ph19924112571710"></a>, or separately set the width of each border</span>.</p> 426</td> 427</tr> 428<tr id="en-us_topic_0000001058562839_r97f2117589624b018d91ca8a099f3264"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a7371edc07c664266a2e1866f31ad0d0c"><a name="en-us_topic_0000001058562839_a7371edc07c664266a2e1866f31ad0d0c"></a><a name="en-us_topic_0000001058562839_a7371edc07c664266a2e1866f31ad0d0c"></a>border-[left|top|right|bottom]-width</p> 429</td> 430<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a2faa532b841948a7b6598542b4eccc7b"><a name="en-us_topic_0000001058562839_a2faa532b841948a7b6598542b4eccc7b"></a><a name="en-us_topic_0000001058562839_a2faa532b841948a7b6598542b4eccc7b"></a><length></p> 431</td> 432<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a87f38cfa47f54bc18c32f9671c0f9ca6"><a name="en-us_topic_0000001058562839_a87f38cfa47f54bc18c32f9671c0f9ca6"></a><a name="en-us_topic_0000001058562839_a87f38cfa47f54bc18c32f9671c0f9ca6"></a>0</p> 433</td> 434<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p137306715284"><a name="en-us_topic_0000001058562839_p137306715284"></a><a name="en-us_topic_0000001058562839_p137306715284"></a>No</p> 435</td> 436<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a20386e66c3834d5f96cf9435c4715c5b"><a name="en-us_topic_0000001058562839_a20386e66c3834d5f96cf9435c4715c5b"></a><a name="en-us_topic_0000001058562839_a20386e66c3834d5f96cf9435c4715c5b"></a>Attribute to set widths of left, top, right, and bottom borders.</p> 437</td> 438</tr> 439<tr id="en-us_topic_0000001058562839_rebb331f7734b46b98d7d630beb4bfc40"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a40a816cf0a03489d81f209a8aa7d81a6"><a name="en-us_topic_0000001058562839_a40a816cf0a03489d81f209a8aa7d81a6"></a><a name="en-us_topic_0000001058562839_a40a816cf0a03489d81f209a8aa7d81a6"></a>border-color</p> 440</td> 441<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_afcc7c948ae0947b2a78002d31f2f9748"><a name="en-us_topic_0000001058562839_afcc7c948ae0947b2a78002d31f2f9748"></a><a name="en-us_topic_0000001058562839_afcc7c948ae0947b2a78002d31f2f9748"></a><color></p> 442</td> 443<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_ae0909d2b896342f9b2196fe0dce72920"><a name="en-us_topic_0000001058562839_ae0909d2b896342f9b2196fe0dce72920"></a><a name="en-us_topic_0000001058562839_ae0909d2b896342f9b2196fe0dce72920"></a>black</p> 444</td> 445<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p4730137102813"><a name="en-us_topic_0000001058562839_p4730137102813"></a><a name="en-us_topic_0000001058562839_p4730137102813"></a>No</p> 446</td> 447<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a76fd98995e1d4217aa703fecd69325c7"><a name="en-us_topic_0000001058562839_a76fd98995e1d4217aa703fecd69325c7"></a><a name="en-us_topic_0000001058562839_a76fd98995e1d4217aa703fecd69325c7"></a>Shorthand attribute to set the color of all borders<span id="en-us_topic_0000001058562839_ph09861226188"><a name="en-us_topic_0000001058562839_ph09861226188"></a><a name="en-us_topic_0000001058562839_ph09861226188"></a>, or separately set the color of each border</span>.</p> 448</td> 449</tr> 450<tr id="en-us_topic_0000001058562839_r92bbe455dcbe40c9aeeb71145a46dee7"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a2afc646d6a2549548bcd5c4b9bed1fb5"><a name="en-us_topic_0000001058562839_a2afc646d6a2549548bcd5c4b9bed1fb5"></a><a name="en-us_topic_0000001058562839_a2afc646d6a2549548bcd5c4b9bed1fb5"></a>border-[left|top|right|bottom]-color</p> 451</td> 452<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a34556866a4f54f5da88f148fc698867b"><a name="en-us_topic_0000001058562839_a34556866a4f54f5da88f148fc698867b"></a><a name="en-us_topic_0000001058562839_a34556866a4f54f5da88f148fc698867b"></a><color></p> 453</td> 454<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a8ff58e18553846a38e82c69149e2aa30"><a name="en-us_topic_0000001058562839_a8ff58e18553846a38e82c69149e2aa30"></a><a name="en-us_topic_0000001058562839_a8ff58e18553846a38e82c69149e2aa30"></a>black</p> 455</td> 456<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p187305712820"><a name="en-us_topic_0000001058562839_p187305712820"></a><a name="en-us_topic_0000001058562839_p187305712820"></a>No</p> 457</td> 458<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a5c85947d388c4c7fbf0de07b022bb44e"><a name="en-us_topic_0000001058562839_a5c85947d388c4c7fbf0de07b022bb44e"></a><a name="en-us_topic_0000001058562839_a5c85947d388c4c7fbf0de07b022bb44e"></a>Attribute to set colors of left, top, right, and bottom borders.</p> 459</td> 460</tr> 461<tr id="en-us_topic_0000001058562839_r466497bc9bfd48f9a3e718beb413ac0c"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a65974e3078c447a383fb9237cc4ffa32"><a name="en-us_topic_0000001058562839_a65974e3078c447a383fb9237cc4ffa32"></a><a name="en-us_topic_0000001058562839_a65974e3078c447a383fb9237cc4ffa32"></a>border-radius</p> 462</td> 463<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a413fd0aea8b243349a19f825e96ee8b6"><a name="en-us_topic_0000001058562839_a413fd0aea8b243349a19f825e96ee8b6"></a><a name="en-us_topic_0000001058562839_a413fd0aea8b243349a19f825e96ee8b6"></a><length></p> 464</td> 465<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_af786857698c74e259f52589a6670a0a1"><a name="en-us_topic_0000001058562839_af786857698c74e259f52589a6670a0a1"></a><a name="en-us_topic_0000001058562839_af786857698c74e259f52589a6670a0a1"></a>-</p> 466</td> 467<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p67306752816"><a name="en-us_topic_0000001058562839_p67306752816"></a><a name="en-us_topic_0000001058562839_p67306752816"></a>No</p> 468</td> 469<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a52ca834f42124d3b8b12bbf54914fc96"><a name="en-us_topic_0000001058562839_a52ca834f42124d3b8b12bbf54914fc96"></a><a name="en-us_topic_0000001058562839_a52ca834f42124d3b8b12bbf54914fc96"></a>Attribute to set the radius of round-corner borders. <span id="en-us_topic_0000001058562839_ph98714165198"><a name="en-us_topic_0000001058562839_ph98714165198"></a><a name="en-us_topic_0000001058562839_ph98714165198"></a>This attribute cannot be used to set the width, color, or style of a specific border. To set the color, width, or style for all the borders at the same time, set <strong id="en-us_topic_0000001058562839_b2741616151920"><a name="en-us_topic_0000001058562839_b2741616151920"></a><a name="en-us_topic_0000001058562839_b2741616151920"></a>border-width</strong>, <strong id="en-us_topic_0000001058562839_b1281131691915"><a name="en-us_topic_0000001058562839_b1281131691915"></a><a name="en-us_topic_0000001058562839_b1281131691915"></a>border-color</strong>, or <strong id="en-us_topic_0000001058562839_b1984516201919"><a name="en-us_topic_0000001058562839_b1984516201919"></a><a name="en-us_topic_0000001058562839_b1984516201919"></a>border-style</strong> respectively for the borders.</span></p> 470</td> 471</tr> 472<tr id="en-us_topic_0000001058562839_rd4fc211b573447a1a1b7841a144eccae"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a466f1f8bc2fb404e82e8417c5133eacb"><a name="en-us_topic_0000001058562839_a466f1f8bc2fb404e82e8417c5133eacb"></a><a name="en-us_topic_0000001058562839_a466f1f8bc2fb404e82e8417c5133eacb"></a>border-[top|bottom]-[left|right]-radius</p> 473</td> 474<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a499fe910d0284647abc48b1bd0eb4868"><a name="en-us_topic_0000001058562839_a499fe910d0284647abc48b1bd0eb4868"></a><a name="en-us_topic_0000001058562839_a499fe910d0284647abc48b1bd0eb4868"></a><length></p> 475</td> 476<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_ac142d1054eee499f948069f46129c492"><a name="en-us_topic_0000001058562839_ac142d1054eee499f948069f46129c492"></a><a name="en-us_topic_0000001058562839_ac142d1054eee499f948069f46129c492"></a>-</p> 477</td> 478<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p27305718283"><a name="en-us_topic_0000001058562839_p27305718283"></a><a name="en-us_topic_0000001058562839_p27305718283"></a>No</p> 479</td> 480<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a63757091a86c4ced97f0c39d37a2117c"><a name="en-us_topic_0000001058562839_a63757091a86c4ced97f0c39d37a2117c"></a><a name="en-us_topic_0000001058562839_a63757091a86c4ced97f0c39d37a2117c"></a>Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners</p> 481</td> 482</tr> 483<tr id="en-us_topic_0000001058562839_re84d5481999b4984ac1242cc5cdf20ca"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_ae335be2c6150440fb31b40b1ca117858"><a name="en-us_topic_0000001058562839_ae335be2c6150440fb31b40b1ca117858"></a><a name="en-us_topic_0000001058562839_ae335be2c6150440fb31b40b1ca117858"></a>background</p> 484</td> 485<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a394a81171c5c4d1aa81b94fc5d2f0f07"><a name="en-us_topic_0000001058562839_a394a81171c5c4d1aa81b94fc5d2f0f07"></a><a name="en-us_topic_0000001058562839_a394a81171c5c4d1aa81b94fc5d2f0f07"></a><linear-gradient></p> 486</td> 487<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a0734de04e90e470cb608e8d5f42c6874"><a name="en-us_topic_0000001058562839_a0734de04e90e470cb608e8d5f42c6874"></a><a name="en-us_topic_0000001058562839_a0734de04e90e470cb608e8d5f42c6874"></a>-</p> 488</td> 489<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p15730197132811"><a name="en-us_topic_0000001058562839_p15730197132811"></a><a name="en-us_topic_0000001058562839_p15730197132811"></a>No</p> 490</td> 491<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a1d2985ee819d4cfd87861080354def51"><a name="en-us_topic_0000001058562839_a1d2985ee819d4cfd87861080354def51"></a><a name="en-us_topic_0000001058562839_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_0000001058562839_b732610415209"><a name="en-us_topic_0000001058562839_b732610415209"></a><a name="en-us_topic_0000001058562839_b732610415209"></a>background-color</strong> or <strong id="en-us_topic_0000001058562839_b6328164116205"><a name="en-us_topic_0000001058562839_b6328164116205"></a><a name="en-us_topic_0000001058562839_b6328164116205"></a>background-image</strong>.</p> 492</td> 493</tr> 494<tr id="en-us_topic_0000001058562839_r81e36151ade9499aa21d3c0b72da1111"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a2977672444224b738a566c61225961c2"><a name="en-us_topic_0000001058562839_a2977672444224b738a566c61225961c2"></a><a name="en-us_topic_0000001058562839_a2977672444224b738a566c61225961c2"></a>background-color</p> 495</td> 496<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a87186748ed7c4694aef0095d8a7f8e43"><a name="en-us_topic_0000001058562839_a87186748ed7c4694aef0095d8a7f8e43"></a><a name="en-us_topic_0000001058562839_a87186748ed7c4694aef0095d8a7f8e43"></a><color></p> 497</td> 498<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a2775a3cca8994bec9b754af0d2455eb5"><a name="en-us_topic_0000001058562839_a2775a3cca8994bec9b754af0d2455eb5"></a><a name="en-us_topic_0000001058562839_a2775a3cca8994bec9b754af0d2455eb5"></a>-</p> 499</td> 500<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p17730577282"><a name="en-us_topic_0000001058562839_p17730577282"></a><a name="en-us_topic_0000001058562839_p17730577282"></a>No</p> 501</td> 502<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a372b6089bf9746f091c91fa49b571f1d"><a name="en-us_topic_0000001058562839_a372b6089bf9746f091c91fa49b571f1d"></a><a name="en-us_topic_0000001058562839_a372b6089bf9746f091c91fa49b571f1d"></a>Background color.</p> 503</td> 504</tr> 505<tr id="en-us_topic_0000001058562839_r80de1dc3e37848b38f65fd4ef7711bfa"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_ab2dff80cd59c4db1bf4293172f89735e"><a name="en-us_topic_0000001058562839_ab2dff80cd59c4db1bf4293172f89735e"></a><a name="en-us_topic_0000001058562839_ab2dff80cd59c4db1bf4293172f89735e"></a>background-image</p> 506</td> 507<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_ad9a7e9f2469b45238a6a0ac6da232286"><a name="en-us_topic_0000001058562839_ad9a7e9f2469b45238a6a0ac6da232286"></a><a name="en-us_topic_0000001058562839_ad9a7e9f2469b45238a6a0ac6da232286"></a>string</p> 508</td> 509<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a73fb72c96edd488ba74c364568e345c6"><a name="en-us_topic_0000001058562839_a73fb72c96edd488ba74c364568e345c6"></a><a name="en-us_topic_0000001058562839_a73fb72c96edd488ba74c364568e345c6"></a>-</p> 510</td> 511<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p7730976285"><a name="en-us_topic_0000001058562839_p7730976285"></a><a name="en-us_topic_0000001058562839_p7730976285"></a>No</p> 512</td> 513<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a24de29e3cb4d476fabe55d48d69350a8"><a name="en-us_topic_0000001058562839_a24de29e3cb4d476fabe55d48d69350a8"></a><a name="en-us_topic_0000001058562839_a24de29e3cb4d476fabe55d48d69350a8"></a>Background image. Currently, this attribute is not compatible with <strong id="en-us_topic_0000001058562839_b186011530152519"><a name="en-us_topic_0000001058562839_b186011530152519"></a><a name="en-us_topic_0000001058562839_b186011530152519"></a>background-color</strong> or <strong id="en-us_topic_0000001058562839_b166078300251"><a name="en-us_topic_0000001058562839_b166078300251"></a><a name="en-us_topic_0000001058562839_b166078300251"></a>background</strong>. Local image resources are supported.</p> 514<p id="en-us_topic_0000001058562839_p434668142510"><a name="en-us_topic_0000001058562839_p434668142510"></a><a name="en-us_topic_0000001058562839_p434668142510"></a>Example:</p> 515<a name="en-us_topic_0000001058562839_ul11766913172513"></a><a name="en-us_topic_0000001058562839_ul11766913172513"></a><ul id="en-us_topic_0000001058562839_ul11766913172513"><li>background-image: url("/common/background.png")</li></ul> 516</td> 517</tr> 518<tr id="en-us_topic_0000001058562839_re1870d7c91f148e8ad7264a95eb2c580"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_af81424fd1fbf4f5da65ea5d136390494"><a name="en-us_topic_0000001058562839_af81424fd1fbf4f5da65ea5d136390494"></a><a name="en-us_topic_0000001058562839_af81424fd1fbf4f5da65ea5d136390494"></a>background-size</p> 519</td> 520<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001058562839_ul1065173641310"></a><a name="en-us_topic_0000001058562839_ul1065173641310"></a><ul id="en-us_topic_0000001058562839_ul1065173641310"><li>string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 521</td> 522<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a222f4e09239a4ab08880d1d9544d337c"><a name="en-us_topic_0000001058562839_a222f4e09239a4ab08880d1d9544d337c"></a><a name="en-us_topic_0000001058562839_a222f4e09239a4ab08880d1d9544d337c"></a>auto</p> 523</td> 524<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p137309714282"><a name="en-us_topic_0000001058562839_p137309714282"></a><a name="en-us_topic_0000001058562839_p137309714282"></a>No</p> 525</td> 526<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p91971112114318"><a name="en-us_topic_0000001058562839_p91971112114318"></a><a name="en-us_topic_0000001058562839_p91971112114318"></a>Background image size.</p> 527<a name="en-us_topic_0000001058562839_ul41331853154111"></a><a name="en-us_topic_0000001058562839_ul41331853154111"></a><ul id="en-us_topic_0000001058562839_ul41331853154111"><li>The <strong id="en-us_topic_0000001058562839_b188735235261"><a name="en-us_topic_0000001058562839_b188735235261"></a><a name="en-us_topic_0000001058562839_b188735235261"></a>string</strong> values are as follows:<a name="en-us_topic_0000001058562839_ul13611494111"></a><a name="en-us_topic_0000001058562839_ul13611494111"></a><ul id="en-us_topic_0000001058562839_ul13611494111"><li><strong id="en-us_topic_0000001058562839_b845013202617"><a name="en-us_topic_0000001058562839_b845013202617"></a><a name="en-us_topic_0000001058562839_b845013202617"></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_0000001058562839_b17525119277"><a name="en-us_topic_0000001058562839_b17525119277"></a><a name="en-us_topic_0000001058562839_b17525119277"></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_0000001058562839_b77512033102713"><a name="en-us_topic_0000001058562839_b77512033102713"></a><a name="en-us_topic_0000001058562839_b77512033102713"></a>auto</strong>: The original image width-height ratio is retained.</li></ul> 528</li><li>The two <strong id="en-us_topic_0000001058562839_b1462144113286"><a name="en-us_topic_0000001058562839_b1462144113286"></a><a name="en-us_topic_0000001058562839_b1462144113286"></a><length></strong> values are as follows:<p id="en-us_topic_0000001058562839_p1840244924418"><a name="en-us_topic_0000001058562839_p1840244924418"></a><a name="en-us_topic_0000001058562839_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_0000001058562839_b946315316301"><a name="en-us_topic_0000001058562839_b946315316301"></a><a name="en-us_topic_0000001058562839_b946315316301"></a>auto</strong> by default.</p> 529</li><li>The two <strong id="en-us_topic_0000001058562839_b5556913304"><a name="en-us_topic_0000001058562839_b5556913304"></a><a name="en-us_topic_0000001058562839_b5556913304"></a><percentage></strong> values are as follows:<p id="en-us_topic_0000001058562839_p17936154410457"><a name="en-us_topic_0000001058562839_p17936154410457"></a><a name="en-us_topic_0000001058562839_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_0000001058562839_b16267151443110"><a name="en-us_topic_0000001058562839_b16267151443110"></a><a name="en-us_topic_0000001058562839_b16267151443110"></a>auto</strong> by default.</p> 530</li></ul> 531</td> 532</tr> 533<tr id="en-us_topic_0000001058562839_r2f8ec5072a754e038c89308dd8997259"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a9957170386754fb5b648ba2114bd52d4"><a name="en-us_topic_0000001058562839_a9957170386754fb5b648ba2114bd52d4"></a><a name="en-us_topic_0000001058562839_a9957170386754fb5b648ba2114bd52d4"></a>background-repeat</p> 534</td> 535<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a155b4cc325e747279694d36c2fa69bcc"><a name="en-us_topic_0000001058562839_a155b4cc325e747279694d36c2fa69bcc"></a><a name="en-us_topic_0000001058562839_a155b4cc325e747279694d36c2fa69bcc"></a>string</p> 536</td> 537<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a82029c0dc1d540cf994f690b451c48f4"><a name="en-us_topic_0000001058562839_a82029c0dc1d540cf994f690b451c48f4"></a><a name="en-us_topic_0000001058562839_a82029c0dc1d540cf994f690b451c48f4"></a>repeat</p> 538</td> 539<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p1673015702810"><a name="en-us_topic_0000001058562839_p1673015702810"></a><a name="en-us_topic_0000001058562839_p1673015702810"></a>No</p> 540</td> 541<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_afb8e41c117884b368a0f1df348be8e54"><a name="en-us_topic_0000001058562839_afb8e41c117884b368a0f1df348be8e54"></a><a name="en-us_topic_0000001058562839_afb8e41c117884b368a0f1df348be8e54"></a>Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.</p> 542<a name="en-us_topic_0000001058562839_ul8236153103612"></a><a name="en-us_topic_0000001058562839_ul8236153103612"></a><ul id="en-us_topic_0000001058562839_ul8236153103612"><li><strong id="en-us_topic_0000001058562839_b183983733112"><a name="en-us_topic_0000001058562839_b183983733112"></a><a name="en-us_topic_0000001058562839_b183983733112"></a>repeat</strong>: Draws images along the x-axis and y-axis at the same time.</li><li><strong id="en-us_topic_0000001058562839_b1296104319314"><a name="en-us_topic_0000001058562839_b1296104319314"></a><a name="en-us_topic_0000001058562839_b1296104319314"></a>repeat-x</strong>: Draws images along the x-axis.</li><li><strong id="en-us_topic_0000001058562839_b11107104817318"><a name="en-us_topic_0000001058562839_b11107104817318"></a><a name="en-us_topic_0000001058562839_b11107104817318"></a>repeat-y</strong>: Draws images along the y-axis.</li><li><strong id="en-us_topic_0000001058562839_b33055113118"><a name="en-us_topic_0000001058562839_b33055113118"></a><a name="en-us_topic_0000001058562839_b33055113118"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul> 543</td> 544</tr> 545<tr id="en-us_topic_0000001058562839_r74d37bef16544cddbabf94a6c0d8f0f6"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a709eb4a9fa87428897bebb4a98693df2"><a name="en-us_topic_0000001058562839_a709eb4a9fa87428897bebb4a98693df2"></a><a name="en-us_topic_0000001058562839_a709eb4a9fa87428897bebb4a98693df2"></a>background-position</p> 546</td> 547<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001058562839_ul8874155216502"></a><a name="en-us_topic_0000001058562839_ul8874155216502"></a><ul id="en-us_topic_0000001058562839_ul8874155216502"><li>string string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 548</td> 549<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a6f8f5d1c92f447bd868a841ad1a33cb1"><a name="en-us_topic_0000001058562839_a6f8f5d1c92f447bd868a841ad1a33cb1"></a><a name="en-us_topic_0000001058562839_a6f8f5d1c92f447bd868a841ad1a33cb1"></a>0px 0px</p> 550</td> 551<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p173010720280"><a name="en-us_topic_0000001058562839_p173010720280"></a><a name="en-us_topic_0000001058562839_p173010720280"></a>No</p> 552</td> 553<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><a name="en-us_topic_0000001058562839_ul1590812103363"></a><a name="en-us_topic_0000001058562839_ul1590812103363"></a><ul id="en-us_topic_0000001058562839_ul1590812103363"><li>Using keywords: If only one keyword is specified, the other value is <strong id="en-us_topic_0000001058562839_b076111103220"><a name="en-us_topic_0000001058562839_b076111103220"></a><a name="en-us_topic_0000001058562839_b076111103220"></a>center</strong> by default. The two values define the horizontal position and vertical position, respectively.<a name="en-us_topic_0000001058562839_ul1453531734716"></a><a name="en-us_topic_0000001058562839_ul1453531734716"></a><ul id="en-us_topic_0000001058562839_ul1453531734716"><li><strong id="en-us_topic_0000001058562839_b957881111326"><a name="en-us_topic_0000001058562839_b957881111326"></a><a name="en-us_topic_0000001058562839_b957881111326"></a>left</strong>: leftmost in the horizontal direction</li><li><strong id="en-us_topic_0000001058562839_b19184115413220"><a name="en-us_topic_0000001058562839_b19184115413220"></a><a name="en-us_topic_0000001058562839_b19184115413220"></a>right</strong>: rightmost in the horizontal direction</li><li><strong id="en-us_topic_0000001058562839_b15171135810325"><a name="en-us_topic_0000001058562839_b15171135810325"></a><a name="en-us_topic_0000001058562839_b15171135810325"></a>top</strong>: top in the vertical direction</li><li><strong id="en-us_topic_0000001058562839_b102111310338"><a name="en-us_topic_0000001058562839_b102111310338"></a><a name="en-us_topic_0000001058562839_b102111310338"></a>bottom</strong>: bottom in the vertical direction</li><li><strong id="en-us_topic_0000001058562839_b1790196203320"><a name="en-us_topic_0000001058562839_b1790196203320"></a><a name="en-us_topic_0000001058562839_b1790196203320"></a>center</strong>: center position</li></ul> 554</li></ul> 555<a name="en-us_topic_0000001058562839_ul10908121023615"></a><a name="en-us_topic_0000001058562839_ul10908121023615"></a><ul id="en-us_topic_0000001058562839_ul10908121023615"><li>Using <strong id="en-us_topic_0000001058562839_b534952463310"><a name="en-us_topic_0000001058562839_b534952463310"></a><a name="en-us_topic_0000001058562839_b534952463310"></a><length></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001058562839_b2071510386334"><a name="en-us_topic_0000001058562839_b2071510386334"></a><a name="en-us_topic_0000001058562839_b2071510386334"></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_0000001058562839_b1834114443315"><a name="en-us_topic_0000001058562839_b1834114443315"></a><a name="en-us_topic_0000001058562839_b1834114443315"></a>50%</strong>.</li><li>Using <strong id="en-us_topic_0000001058562839_b833410492336"><a name="en-us_topic_0000001058562839_b833410492336"></a><a name="en-us_topic_0000001058562839_b833410492336"></a><percentage></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001058562839_b04614550332"><a name="en-us_topic_0000001058562839_b04614550332"></a><a name="en-us_topic_0000001058562839_b04614550332"></a>0% 0%</strong> indicates the upper left corner. <strong id="en-us_topic_0000001058562839_b1751815893311"><a name="en-us_topic_0000001058562839_b1751815893311"></a><a name="en-us_topic_0000001058562839_b1751815893311"></a>100% 100%</strong> indicates the lower right corner. If only one value is specified, the other one is <strong id="en-us_topic_0000001058562839_b696117115347"><a name="en-us_topic_0000001058562839_b696117115347"></a><a name="en-us_topic_0000001058562839_b696117115347"></a>50%</strong>.</li><li>Using both <strong id="en-us_topic_0000001058562839_b969514593419"><a name="en-us_topic_0000001058562839_b969514593419"></a><a name="en-us_topic_0000001058562839_b969514593419"></a><percentage></strong> and <strong id="en-us_topic_0000001058562839_b7700115173414"><a name="en-us_topic_0000001058562839_b7700115173414"></a><a name="en-us_topic_0000001058562839_b7700115173414"></a><length></strong>.</li></ul> 556</td> 557</tr> 558<tr id="en-us_topic_0000001058562839_row1994075164514"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p17940151124510"><a name="en-us_topic_0000001058562839_p17940151124510"></a><a name="en-us_topic_0000001058562839_p17940151124510"></a>box-shadow<sup id="en-us_topic_0000001058562839_sup787912854114"><a name="en-us_topic_0000001058562839_sup787912854114"></a><a name="en-us_topic_0000001058562839_sup787912854114"></a>5+</sup></p> 559</td> 560<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p194095154515"><a name="en-us_topic_0000001058562839_p194095154515"></a><a name="en-us_topic_0000001058562839_p194095154515"></a>-</p> 561</td> 562<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p169401351174518"><a name="en-us_topic_0000001058562839_p169401351174518"></a><a name="en-us_topic_0000001058562839_p169401351174518"></a>0</p> 563</td> 564<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p194035111458"><a name="en-us_topic_0000001058562839_p194035111458"></a><a name="en-us_topic_0000001058562839_p194035111458"></a>No</p> 565</td> 566<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p15549650195115"><a name="en-us_topic_0000001058562839_p15549650195115"></a><a name="en-us_topic_0000001058562839_p15549650195115"></a>Syntax: <strong id="en-us_topic_0000001058562839_b7866511113416"><a name="en-us_topic_0000001058562839_b7866511113416"></a><a name="en-us_topic_0000001058562839_b7866511113416"></a>box-shadow: h-shadow v-shadow blur spread color</strong></p> 567<p id="en-us_topic_0000001058562839_p15254131712491"><a name="en-us_topic_0000001058562839_p15254131712491"></a><a name="en-us_topic_0000001058562839_p15254131712491"></a>Shadow style of the current component. The value includes the horizontal position (mandatory), vertical position (mandatory), fuzzy radius (optional, default value: <strong id="en-us_topic_0000001058562839_b29515226348"><a name="en-us_topic_0000001058562839_b29515226348"></a><a name="en-us_topic_0000001058562839_b29515226348"></a>0</strong>), extension distance (optional, default value: <strong id="en-us_topic_0000001058562839_b16957162219341"><a name="en-us_topic_0000001058562839_b16957162219341"></a><a name="en-us_topic_0000001058562839_b16957162219341"></a>0</strong>), and color (optional, default value: <strong id="en-us_topic_0000001058562839_b19571522103412"><a name="en-us_topic_0000001058562839_b19571522103412"></a><a name="en-us_topic_0000001058562839_b19571522103412"></a>black</strong>) of the shadow.</p> 568<p id="en-us_topic_0000001058562839_p1431193714518"><a name="en-us_topic_0000001058562839_p1431193714518"></a><a name="en-us_topic_0000001058562839_p1431193714518"></a>Example:</p> 569<a name="en-us_topic_0000001058562839_ul131475255546"></a><a name="en-us_topic_0000001058562839_ul131475255546"></a><ul id="en-us_topic_0000001058562839_ul131475255546"><li>box-shadow :10px 20px 5px 10px #888888</li><li>box-shadow :100px 100px 30px red</li><li>box-shadow :-100px -100px 0px 40px</li></ul> 570</td> 571</tr> 572<tr id="en-us_topic_0000001058562839_row82361948145612"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p1823644815567"><a name="en-us_topic_0000001058562839_p1823644815567"></a><a name="en-us_topic_0000001058562839_p1823644815567"></a>filter<sup id="en-us_topic_0000001058562839_sup1229754054112"><a name="en-us_topic_0000001058562839_sup1229754054112"></a><a name="en-us_topic_0000001058562839_sup1229754054112"></a>5+</sup></p> 573</td> 574<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p92361748195619"><a name="en-us_topic_0000001058562839_p92361748195619"></a><a name="en-us_topic_0000001058562839_p92361748195619"></a>string</p> 575</td> 576<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p92369486566"><a name="en-us_topic_0000001058562839_p92369486566"></a><a name="en-us_topic_0000001058562839_p92369486566"></a>-</p> 577</td> 578<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p1423614810562"><a name="en-us_topic_0000001058562839_p1423614810562"></a><a name="en-us_topic_0000001058562839_p1423614810562"></a>No</p> 579</td> 580<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p52361548125619"><a name="en-us_topic_0000001058562839_p52361548125619"></a><a name="en-us_topic_0000001058562839_p52361548125619"></a>Syntax: <strong id="en-us_topic_0000001058562839_b1721655215348"><a name="en-us_topic_0000001058562839_b1721655215348"></a><a name="en-us_topic_0000001058562839_b1721655215348"></a>filter: blur(px)</strong></p> 581<p id="en-us_topic_0000001058562839_p1290013181816"><a name="en-us_topic_0000001058562839_p1290013181816"></a><a name="en-us_topic_0000001058562839_p1290013181816"></a>Radius of the blur area within the component layout. If this style is not set, the default value <strong id="en-us_topic_0000001058562839_b516495419348"><a name="en-us_topic_0000001058562839_b516495419348"></a><a name="en-us_topic_0000001058562839_b516495419348"></a>0</strong> (no blur) is used. Percentage values are not supported.</p> 582<p id="en-us_topic_0000001058562839_p95511781130"><a name="en-us_topic_0000001058562839_p95511781130"></a><a name="en-us_topic_0000001058562839_p95511781130"></a>Example:</p> 583<a name="en-us_topic_0000001058562839_ul59611445632"></a><a name="en-us_topic_0000001058562839_ul59611445632"></a><ul id="en-us_topic_0000001058562839_ul59611445632"><li>filter: blur(10px)</li></ul> 584</td> 585</tr> 586<tr id="en-us_topic_0000001058562839_row673615525313"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p1973618528317"><a name="en-us_topic_0000001058562839_p1973618528317"></a><a name="en-us_topic_0000001058562839_p1973618528317"></a>backdrop-filter<sup id="en-us_topic_0000001058562839_sup1384544716411"><a name="en-us_topic_0000001058562839_sup1384544716411"></a><a name="en-us_topic_0000001058562839_sup1384544716411"></a>5+</sup></p> 587</td> 588<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p1473620522315"><a name="en-us_topic_0000001058562839_p1473620522315"></a><a name="en-us_topic_0000001058562839_p1473620522315"></a>string</p> 589</td> 590<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_p873645220314"><a name="en-us_topic_0000001058562839_p873645220314"></a><a name="en-us_topic_0000001058562839_p873645220314"></a>-</p> 591</td> 592<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p177361526318"><a name="en-us_topic_0000001058562839_p177361526318"></a><a name="en-us_topic_0000001058562839_p177361526318"></a>No</p> 593</td> 594<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p208828572419"><a name="en-us_topic_0000001058562839_p208828572419"></a><a name="en-us_topic_0000001058562839_p208828572419"></a>Syntax: <strong id="en-us_topic_0000001058562839_b27744469382"><a name="en-us_topic_0000001058562839_b27744469382"></a><a name="en-us_topic_0000001058562839_b27744469382"></a>backdrop-filter: blur(px)</strong></p> 595<p id="en-us_topic_0000001058562839_p98987193518"><a name="en-us_topic_0000001058562839_p98987193518"></a><a name="en-us_topic_0000001058562839_p98987193518"></a>Radius of the background blur area within the component layout. If this style is not set, the default value <strong id="en-us_topic_0000001058562839_b6509949193814"><a name="en-us_topic_0000001058562839_b6509949193814"></a><a name="en-us_topic_0000001058562839_b6509949193814"></a>0</strong> (no blur) is used. Percentage values are not supported.</p> 596<p id="en-us_topic_0000001058562839_p88987195517"><a name="en-us_topic_0000001058562839_p88987195517"></a><a name="en-us_topic_0000001058562839_p88987195517"></a>Example:</p> 597<a name="en-us_topic_0000001058562839_ul48981719759"></a><a name="en-us_topic_0000001058562839_ul48981719759"></a><ul id="en-us_topic_0000001058562839_ul48981719759"><li>backdrop-filter: blur(10px)</li></ul> 598</td> 599</tr> 600<tr id="en-us_topic_0000001058562839_rebe2f395a6c34b04be864a46ba6b10ae"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_p134581712103910"><a name="en-us_topic_0000001058562839_p134581712103910"></a><a name="en-us_topic_0000001058562839_p134581712103910"></a>opacity</p> 601</td> 602<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a45185999ae584676af4c36467c2ade8b"><a name="en-us_topic_0000001058562839_a45185999ae584676af4c36467c2ade8b"></a><a name="en-us_topic_0000001058562839_a45185999ae584676af4c36467c2ade8b"></a>number</p> 603</td> 604<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a09ff20dda8e44794bca18c84f413d972"><a name="en-us_topic_0000001058562839_a09ff20dda8e44794bca18c84f413d972"></a><a name="en-us_topic_0000001058562839_a09ff20dda8e44794bca18c84f413d972"></a>1</p> 605</td> 606<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p1873011722814"><a name="en-us_topic_0000001058562839_p1873011722814"></a><a name="en-us_topic_0000001058562839_p1873011722814"></a>No</p> 607</td> 608<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p122515161139"><a name="en-us_topic_0000001058562839_p122515161139"></a><a name="en-us_topic_0000001058562839_p122515161139"></a>Transparency of an element. The value ranges from <strong id="en-us_topic_0000001058562839_b9268634163916"><a name="en-us_topic_0000001058562839_b9268634163916"></a><a name="en-us_topic_0000001058562839_b9268634163916"></a>0</strong> to <strong id="en-us_topic_0000001058562839_b127443415391"><a name="en-us_topic_0000001058562839_b127443415391"></a><a name="en-us_topic_0000001058562839_b127443415391"></a>1</strong>. The value <strong id="en-us_topic_0000001058562839_b427518341396"><a name="en-us_topic_0000001058562839_b427518341396"></a><a name="en-us_topic_0000001058562839_b427518341396"></a>1</strong> means opaque, and <strong id="en-us_topic_0000001058562839_b1627619343393"><a name="en-us_topic_0000001058562839_b1627619343393"></a><a name="en-us_topic_0000001058562839_b1627619343393"></a>0</strong> means completely transparent.</p> 609</td> 610</tr> 611<tr id="en-us_topic_0000001058562839_r0dd61199ee2f4b64bd93b7448bbde433"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_aeda9e2f8d8344958bf4f43d429dcb55e"><a name="en-us_topic_0000001058562839_aeda9e2f8d8344958bf4f43d429dcb55e"></a><a name="en-us_topic_0000001058562839_aeda9e2f8d8344958bf4f43d429dcb55e"></a>display</p> 612</td> 613<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p1544115441446"><a name="en-us_topic_0000001058562839_p1544115441446"></a><a name="en-us_topic_0000001058562839_p1544115441446"></a>string</p> 614<p id="en-us_topic_0000001058562839_aaaa164aa970b490fb048e5f260f1c661"><a name="en-us_topic_0000001058562839_aaaa164aa970b490fb048e5f260f1c661"></a><a name="en-us_topic_0000001058562839_aaaa164aa970b490fb048e5f260f1c661"></a></p> 615</td> 616<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_aa5ce61466c9847dbb7f44852338d9006"><a name="en-us_topic_0000001058562839_aa5ce61466c9847dbb7f44852338d9006"></a><a name="en-us_topic_0000001058562839_aa5ce61466c9847dbb7f44852338d9006"></a>flex</p> 617</td> 618<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p167303762818"><a name="en-us_topic_0000001058562839_p167303762818"></a><a name="en-us_topic_0000001058562839_p167303762818"></a>No</p> 619</td> 620<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p23704018414"><a name="en-us_topic_0000001058562839_p23704018414"></a><a name="en-us_topic_0000001058562839_p23704018414"></a>Type of the box containing an element. Available values are as follows:</p> 621<a name="en-us_topic_0000001058562839_ul12227103394916"></a><a name="en-us_topic_0000001058562839_ul12227103394916"></a><ul id="en-us_topic_0000001058562839_ul12227103394916"><li><strong id="en-us_topic_0000001058562839_b1282005715394"><a name="en-us_topic_0000001058562839_b1282005715394"></a><a name="en-us_topic_0000001058562839_b1282005715394"></a>flex</strong>: flexible layout</li><li><strong id="en-us_topic_0000001058562839_b10659459173915"><a name="en-us_topic_0000001058562839_b10659459173915"></a><a name="en-us_topic_0000001058562839_b10659459173915"></a>none</strong>: The box is disabled.</li></ul> 622</td> 623</tr> 624<tr id="en-us_topic_0000001058562839_r2260108545704aeb885aa4e3fd8cdbcb"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_aa2ed1da39c8e4ad78829712734226ab9"><a name="en-us_topic_0000001058562839_aa2ed1da39c8e4ad78829712734226ab9"></a><a name="en-us_topic_0000001058562839_aa2ed1da39c8e4ad78829712734226ab9"></a>visibility</p> 625</td> 626<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p15475737486"><a name="en-us_topic_0000001058562839_p15475737486"></a><a name="en-us_topic_0000001058562839_p15475737486"></a>string</p> 627<p id="en-us_topic_0000001058562839_aabfb0eb044194745af56c313f40e7781"><a name="en-us_topic_0000001058562839_aabfb0eb044194745af56c313f40e7781"></a><a name="en-us_topic_0000001058562839_aabfb0eb044194745af56c313f40e7781"></a></p> 628</td> 629<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_acaca80d4ef9a4f0d87adf92cb2d1ff9a"><a name="en-us_topic_0000001058562839_acaca80d4ef9a4f0d87adf92cb2d1ff9a"></a><a name="en-us_topic_0000001058562839_acaca80d4ef9a4f0d87adf92cb2d1ff9a"></a>visible</p> 630</td> 631<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p57301471281"><a name="en-us_topic_0000001058562839_p57301471281"></a><a name="en-us_topic_0000001058562839_p57301471281"></a>No</p> 632</td> 633<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p1568839154517"><a name="en-us_topic_0000001058562839_p1568839154517"></a><a name="en-us_topic_0000001058562839_p1568839154517"></a>Whether to display the box containing an element. The invisible box occupies layout space. (To remove the box, set the <strong id="en-us_topic_0000001058562839_b03130654116"><a name="en-us_topic_0000001058562839_b03130654116"></a><a name="en-us_topic_0000001058562839_b03130654116"></a>display</strong> attribute to <strong id="en-us_topic_0000001058562839_b8319260418"><a name="en-us_topic_0000001058562839_b8319260418"></a><a name="en-us_topic_0000001058562839_b8319260418"></a>none</strong>.) Available values are as follows:</p> 634<a name="en-us_topic_0000001058562839_ul751984164920"></a><a name="en-us_topic_0000001058562839_ul751984164920"></a><ul id="en-us_topic_0000001058562839_ul751984164920"><li><strong id="en-us_topic_0000001058562839_b432418165411"><a name="en-us_topic_0000001058562839_b432418165411"></a><a name="en-us_topic_0000001058562839_b432418165411"></a>visible</strong>: The box is visible.</li><li><strong id="en-us_topic_0000001058562839_b14720131814111"><a name="en-us_topic_0000001058562839_b14720131814111"></a><a name="en-us_topic_0000001058562839_b14720131814111"></a>hidden</strong>: The box is hidden but still takes up space.</li></ul> 635<div class="note" id="en-us_topic_0000001058562839_note4549524649"><a name="en-us_topic_0000001058562839_note4549524649"></a><a name="en-us_topic_0000001058562839_note4549524649"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058562839_p25499241642"><a name="en-us_topic_0000001058562839_p25499241642"></a><a name="en-us_topic_0000001058562839_p25499241642"></a>If both <strong id="en-us_topic_0000001058562839_b1240102516412"><a name="en-us_topic_0000001058562839_b1240102516412"></a><a name="en-us_topic_0000001058562839_b1240102516412"></a>visibility</strong> and <strong id="en-us_topic_0000001058562839_b4245152534114"><a name="en-us_topic_0000001058562839_b4245152534114"></a><a name="en-us_topic_0000001058562839_b4245152534114"></a>display</strong> are set, only <strong id="en-us_topic_0000001058562839_b024622519412"><a name="en-us_topic_0000001058562839_b024622519412"></a><a name="en-us_topic_0000001058562839_b024622519412"></a>display</strong> takes effect.</p> 636</div></div> 637</td> 638</tr> 639<tr id="en-us_topic_0000001058562839_r92a9fc54538249b5828980638c60071b"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_ad74a6a48aca7439e9344c18c26b4177e"><a name="en-us_topic_0000001058562839_ad74a6a48aca7439e9344c18c26b4177e"></a><a name="en-us_topic_0000001058562839_ad74a6a48aca7439e9344c18c26b4177e"></a>flex</p> 640</td> 641<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a2e6e5192a1534872be5fcfd9f83e3fdc"><a name="en-us_topic_0000001058562839_a2e6e5192a1534872be5fcfd9f83e3fdc"></a><a name="en-us_topic_0000001058562839_a2e6e5192a1534872be5fcfd9f83e3fdc"></a>-</p> 642</td> 643<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a8512eda38e25410685be8a8992890257"><a name="en-us_topic_0000001058562839_a8512eda38e25410685be8a8992890257"></a><a name="en-us_topic_0000001058562839_a8512eda38e25410685be8a8992890257"></a>-</p> 644</td> 645<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p1373057132812"><a name="en-us_topic_0000001058562839_p1373057132812"></a><a name="en-us_topic_0000001058562839_p1373057132812"></a>No</p> 646</td> 647<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a11c317cdfa7d4066878d86c6b3bcbd82"><a name="en-us_topic_0000001058562839_a11c317cdfa7d4066878d86c6b3bcbd82"></a><a name="en-us_topic_0000001058562839_a11c317cdfa7d4066878d86c6b3bcbd82"></a>How to divide available space of the parent component for a child component.</p> 648<p id="en-us_topic_0000001058562839_p6968144051814"><a name="en-us_topic_0000001058562839_p6968144051814"></a><a name="en-us_topic_0000001058562839_p6968144051814"></a>You can set one, two<sup id="en-us_topic_0000001058562839_sup1686734125019"><a name="en-us_topic_0000001058562839_sup1686734125019"></a><a name="en-us_topic_0000001058562839_sup1686734125019"></a>5+</sup>, or three<sup id="en-us_topic_0000001058562839_sup13872194105016"><a name="en-us_topic_0000001058562839_sup13872194105016"></a><a name="en-us_topic_0000001058562839_sup13872194105016"></a>5+</sup> values for this style.</p> 649<p id="en-us_topic_0000001058562839_p16733313171911"><a name="en-us_topic_0000001058562839_p16733313171911"></a><a name="en-us_topic_0000001058562839_p16733313171911"></a>Set one value in either of the following ways:</p> 650<a name="en-us_topic_0000001058562839_ul93371539192211"></a><a name="en-us_topic_0000001058562839_ul93371539192211"></a><ul id="en-us_topic_0000001058562839_ul93371539192211"><li>A unitless number to set <strong id="en-us_topic_0000001058562839_b18390111575010"><a name="en-us_topic_0000001058562839_b18390111575010"></a><a name="en-us_topic_0000001058562839_b18390111575010"></a>flex-grow</strong>.</li><li>A valid width value<sup id="en-us_topic_0000001058562839_sup2934101912502"><a name="en-us_topic_0000001058562839_sup2934101912502"></a><a name="en-us_topic_0000001058562839_sup2934101912502"></a>5+</sup> to set <strong id="en-us_topic_0000001058562839_b793915197503"><a name="en-us_topic_0000001058562839_b793915197503"></a><a name="en-us_topic_0000001058562839_b793915197503"></a>flex-basis</strong>.</li></ul> 651<p id="en-us_topic_0000001058562839_p6786171632018"><a name="en-us_topic_0000001058562839_p6786171632018"></a><a name="en-us_topic_0000001058562839_p6786171632018"></a>Set two values<sup id="en-us_topic_0000001058562839_sup7704624175012"><a name="en-us_topic_0000001058562839_sup7704624175012"></a><a name="en-us_topic_0000001058562839_sup7704624175012"></a>5+</sup> in the following ways:</p> 652<p id="en-us_topic_0000001058562839_p6400429122011"><a name="en-us_topic_0000001058562839_p6400429122011"></a><a name="en-us_topic_0000001058562839_p6400429122011"></a>The first value must be a unitless number used to set <strong id="en-us_topic_0000001058562839_b18440162915501"><a name="en-us_topic_0000001058562839_b18440162915501"></a><a name="en-us_topic_0000001058562839_b18440162915501"></a>flex-grow</strong>. The second value must be either of the following:</p> 653<a name="en-us_topic_0000001058562839_ul767043502219"></a><a name="en-us_topic_0000001058562839_ul767043502219"></a><ul id="en-us_topic_0000001058562839_ul767043502219"><li>A unitless number to set <strong id="en-us_topic_0000001058562839_b5377113617505"><a name="en-us_topic_0000001058562839_b5377113617505"></a><a name="en-us_topic_0000001058562839_b5377113617505"></a>flex-shrink</strong>.</li><li>A valid width value to set <strong id="en-us_topic_0000001058562839_b1391415402508"><a name="en-us_topic_0000001058562839_b1391415402508"></a><a name="en-us_topic_0000001058562839_b1391415402508"></a>flex-basis</strong>.</li></ul> 654<p id="en-us_topic_0000001058562839_p748416351217"><a name="en-us_topic_0000001058562839_p748416351217"></a><a name="en-us_topic_0000001058562839_p748416351217"></a>Set three values<sup id="en-us_topic_0000001058562839_sup2568184635012"><a name="en-us_topic_0000001058562839_sup2568184635012"></a><a name="en-us_topic_0000001058562839_sup2568184635012"></a>5+</sup> in the following ways:</p> 655<p id="en-us_topic_0000001058562839_p7373204832111"><a name="en-us_topic_0000001058562839_p7373204832111"></a><a name="en-us_topic_0000001058562839_p7373204832111"></a>The first value must be a unitless number used to set <strong id="en-us_topic_0000001058562839_b583705210504"><a name="en-us_topic_0000001058562839_b583705210504"></a><a name="en-us_topic_0000001058562839_b583705210504"></a>flex-grow</strong>. The second value must be a unitless number used to set <strong id="en-us_topic_0000001058562839_b484235212508"><a name="en-us_topic_0000001058562839_b484235212508"></a><a name="en-us_topic_0000001058562839_b484235212508"></a>flex-shrink</strong>. The third value must be a valid width value used to set <strong id="en-us_topic_0000001058562839_b178421252145019"><a name="en-us_topic_0000001058562839_b178421252145019"></a><a name="en-us_topic_0000001058562839_b178421252145019"></a>flex-basis</strong>.</p> 656<div class="note" id="en-us_topic_0000001058562839_note34891253201520"><a name="en-us_topic_0000001058562839_note34891253201520"></a><a name="en-us_topic_0000001058562839_note34891253201520"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058562839_p1248915538152"><a name="en-us_topic_0000001058562839_p1248915538152"></a><a name="en-us_topic_0000001058562839_p1248915538152"></a>This style takes effect only when the container is <strong id="en-us_topic_0000001058562839_b10816181645110"><a name="en-us_topic_0000001058562839_b10816181645110"></a><a name="en-us_topic_0000001058562839_b10816181645110"></a><div></strong>, <strong id="en-us_topic_0000001058562839_b11821101645114"><a name="en-us_topic_0000001058562839_b11821101645114"></a><a name="en-us_topic_0000001058562839_b11821101645114"></a><list-item></strong>, <strong id="en-us_topic_0000001058562839_b1282215162515"><a name="en-us_topic_0000001058562839_b1282215162515"></a><a name="en-us_topic_0000001058562839_b1282215162515"></a><stepper-item></strong><sup id="en-us_topic_0000001058562839_sup1822131616514"><a name="en-us_topic_0000001058562839_sup1822131616514"></a><a name="en-us_topic_0000001058562839_sup1822131616514"></a>5+</sup>, or <strong id="en-us_topic_0000001058562839_b28231716135119"><a name="en-us_topic_0000001058562839_b28231716135119"></a><a name="en-us_topic_0000001058562839_b28231716135119"></a><tabs></strong>.</p> 657</div></div> 658</td> 659</tr> 660<tr id="en-us_topic_0000001058562839_r5f813e3521f94c6e995388e103618445"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a5d88cacaaf5c4f6a87390ab916b695c6"><a name="en-us_topic_0000001058562839_a5d88cacaaf5c4f6a87390ab916b695c6"></a><a name="en-us_topic_0000001058562839_a5d88cacaaf5c4f6a87390ab916b695c6"></a>flex-grow</p> 661</td> 662<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a2c379e3af283446da446f1631e572efd"><a name="en-us_topic_0000001058562839_a2c379e3af283446da446f1631e572efd"></a><a name="en-us_topic_0000001058562839_a2c379e3af283446da446f1631e572efd"></a>number</p> 663</td> 664<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_aa374f6c7415a4ee48a06930d76c55be7"><a name="en-us_topic_0000001058562839_aa374f6c7415a4ee48a06930d76c55be7"></a><a name="en-us_topic_0000001058562839_aa374f6c7415a4ee48a06930d76c55be7"></a>0</p> 665</td> 666<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p11730167152810"><a name="en-us_topic_0000001058562839_p11730167152810"></a><a name="en-us_topic_0000001058562839_p11730167152810"></a>No</p> 667</td> 668<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_p4437122419557"><a name="en-us_topic_0000001058562839_p4437122419557"></a><a name="en-us_topic_0000001058562839_p4437122419557"></a>How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value <strong id="en-us_topic_0000001058562839_b2551201135218"><a name="en-us_topic_0000001058562839_b2551201135218"></a><a name="en-us_topic_0000001058562839_b2551201135218"></a>0</strong> indicates that the child component does not grow.</p> 669<div class="note" id="en-us_topic_0000001058562839_note201231734212"><a name="en-us_topic_0000001058562839_note201231734212"></a><a name="en-us_topic_0000001058562839_note201231734212"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058562839_p184555314553"><a name="en-us_topic_0000001058562839_p184555314553"></a><a name="en-us_topic_0000001058562839_p184555314553"></a>This style takes effect only when the container is <strong id="en-us_topic_0000001058562839_b392619525220"><a name="en-us_topic_0000001058562839_b392619525220"></a><a name="en-us_topic_0000001058562839_b392619525220"></a><div></strong>, <strong id="en-us_topic_0000001058562839_b1093185185214"><a name="en-us_topic_0000001058562839_b1093185185214"></a><a name="en-us_topic_0000001058562839_b1093185185214"></a><list-item></strong>, <strong id="en-us_topic_0000001058562839_b1593117512525"><a name="en-us_topic_0000001058562839_b1593117512525"></a><a name="en-us_topic_0000001058562839_b1593117512525"></a><stepper-item></strong><sup id="en-us_topic_0000001058562839_sup49321158529"><a name="en-us_topic_0000001058562839_sup49321158529"></a><a name="en-us_topic_0000001058562839_sup49321158529"></a>5+</sup>, or <strong id="en-us_topic_0000001058562839_b293315525210"><a name="en-us_topic_0000001058562839_b293315525210"></a><a name="en-us_topic_0000001058562839_b293315525210"></a><tabs></strong>.</p> 670</div></div> 671</td> 672</tr> 673<tr id="en-us_topic_0000001058562839_r61282e986a5f4475a63704a514097c62"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_ac65ef7e2b1f24a13b09c495f643168c9"><a name="en-us_topic_0000001058562839_ac65ef7e2b1f24a13b09c495f643168c9"></a><a name="en-us_topic_0000001058562839_ac65ef7e2b1f24a13b09c495f643168c9"></a>flex-shrink</p> 674</td> 675<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a98e7d367f0e649699892ae5bad6ade37"><a name="en-us_topic_0000001058562839_a98e7d367f0e649699892ae5bad6ade37"></a><a name="en-us_topic_0000001058562839_a98e7d367f0e649699892ae5bad6ade37"></a>number</p> 676</td> 677<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a422d978368814d12a33201cb839060ee"><a name="en-us_topic_0000001058562839_a422d978368814d12a33201cb839060ee"></a><a name="en-us_topic_0000001058562839_a422d978368814d12a33201cb839060ee"></a>1</p> 678</td> 679<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p473113715283"><a name="en-us_topic_0000001058562839_p473113715283"></a><a name="en-us_topic_0000001058562839_p473113715283"></a>No</p> 680</td> 681<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_ab032342dfe56460ca742800de482ca0f"><a name="en-us_topic_0000001058562839_ab032342dfe56460ca742800de482ca0f"></a><a name="en-us_topic_0000001058562839_ab032342dfe56460ca742800de482ca0f"></a>How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value <strong id="en-us_topic_0000001058562839_b41510170523"><a name="en-us_topic_0000001058562839_b41510170523"></a><a name="en-us_topic_0000001058562839_b41510170523"></a>0</strong> indicates that the child component does not shrink.</p> 682<div class="note" id="en-us_topic_0000001058562839_note147160917217"><a name="en-us_topic_0000001058562839_note147160917217"></a><a name="en-us_topic_0000001058562839_note147160917217"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058562839_p844914328577"><a name="en-us_topic_0000001058562839_p844914328577"></a><a name="en-us_topic_0000001058562839_p844914328577"></a>This style takes effect only when the container is <strong id="en-us_topic_0000001058562839_b553493512525"><a name="en-us_topic_0000001058562839_b553493512525"></a><a name="en-us_topic_0000001058562839_b553493512525"></a><div></strong>, <strong id="en-us_topic_0000001058562839_b15539235165211"><a name="en-us_topic_0000001058562839_b15539235165211"></a><a name="en-us_topic_0000001058562839_b15539235165211"></a><list-item></strong>, <strong id="en-us_topic_0000001058562839_b654010351522"><a name="en-us_topic_0000001058562839_b654010351522"></a><a name="en-us_topic_0000001058562839_b654010351522"></a><stepper-item></strong><sup id="en-us_topic_0000001058562839_sup125408355520"><a name="en-us_topic_0000001058562839_sup125408355520"></a><a name="en-us_topic_0000001058562839_sup125408355520"></a>5+</sup>, or <strong id="en-us_topic_0000001058562839_b155411635155212"><a name="en-us_topic_0000001058562839_b155411635155212"></a><a name="en-us_topic_0000001058562839_b155411635155212"></a><tabs></strong>.</p> 683</div></div> 684</td> 685</tr> 686<tr id="en-us_topic_0000001058562839_r7758e3a4a5934e188ff90936ec9de163"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a82c323a994634032963169eeee1a55e4"><a name="en-us_topic_0000001058562839_a82c323a994634032963169eeee1a55e4"></a><a name="en-us_topic_0000001058562839_a82c323a994634032963169eeee1a55e4"></a>flex-basis</p> 687</td> 688<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p1148910787"><a name="en-us_topic_0000001058562839_p1148910787"></a><a name="en-us_topic_0000001058562839_p1148910787"></a><length></p> 689<p id="en-us_topic_0000001058562839_a43613cf0c2184c0d8b44e8d292f6edb7"><a name="en-us_topic_0000001058562839_a43613cf0c2184c0d8b44e8d292f6edb7"></a><a name="en-us_topic_0000001058562839_a43613cf0c2184c0d8b44e8d292f6edb7"></a></p> 690</td> 691<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_ab9e1c7dc25f840e58993af05c1d32109"><a name="en-us_topic_0000001058562839_ab9e1c7dc25f840e58993af05c1d32109"></a><a name="en-us_topic_0000001058562839_ab9e1c7dc25f840e58993af05c1d32109"></a>-</p> 692</td> 693<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p8731673282"><a name="en-us_topic_0000001058562839_p8731673282"></a><a name="en-us_topic_0000001058562839_p8731673282"></a>No</p> 694</td> 695<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a0993ef9b0ef64785a76e6310dd834f09"><a name="en-us_topic_0000001058562839_a0993ef9b0ef64785a76e6310dd834f09"></a><a name="en-us_topic_0000001058562839_a0993ef9b0ef64785a76e6310dd834f09"></a>Initial length of the flex item on the main axis.</p> 696<div class="note" id="en-us_topic_0000001058562839_note62848141222"><a name="en-us_topic_0000001058562839_note62848141222"></a><a name="en-us_topic_0000001058562839_note62848141222"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058562839_p16711745115718"><a name="en-us_topic_0000001058562839_p16711745115718"></a><a name="en-us_topic_0000001058562839_p16711745115718"></a>This style takes effect only when the container is <strong id="en-us_topic_0000001058562839_b3673185275210"><a name="en-us_topic_0000001058562839_b3673185275210"></a><a name="en-us_topic_0000001058562839_b3673185275210"></a><div></strong>, <strong id="en-us_topic_0000001058562839_b4679135217528"><a name="en-us_topic_0000001058562839_b4679135217528"></a><a name="en-us_topic_0000001058562839_b4679135217528"></a><list-item></strong>, <strong id="en-us_topic_0000001058562839_b46803525529"><a name="en-us_topic_0000001058562839_b46803525529"></a><a name="en-us_topic_0000001058562839_b46803525529"></a><stepper-item></strong><sup id="en-us_topic_0000001058562839_sup1680105220526"><a name="en-us_topic_0000001058562839_sup1680105220526"></a><a name="en-us_topic_0000001058562839_sup1680105220526"></a>5+</sup>, or <strong id="en-us_topic_0000001058562839_b868125210527"><a name="en-us_topic_0000001058562839_b868125210527"></a><a name="en-us_topic_0000001058562839_b868125210527"></a><tabs></strong>.</p> 697</div></div> 698</td> 699</tr> 700<tr id="en-us_topic_0000001058562839_r873309c7368d4074bbd6048bf6f7d8b6"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a50180d720a374549ae72c848e53320cb"><a name="en-us_topic_0000001058562839_a50180d720a374549ae72c848e53320cb"></a><a name="en-us_topic_0000001058562839_a50180d720a374549ae72c848e53320cb"></a>position</p> 701</td> 702<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_a63672ed9a4c040f7a6ec9c8089b79bb6"><a name="en-us_topic_0000001058562839_a63672ed9a4c040f7a6ec9c8089b79bb6"></a><a name="en-us_topic_0000001058562839_a63672ed9a4c040f7a6ec9c8089b79bb6"></a>string</p> 703</td> 704<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a2666820c71eb420485e4d20e55b4eabe"><a name="en-us_topic_0000001058562839_a2666820c71eb420485e4d20e55b4eabe"></a><a name="en-us_topic_0000001058562839_a2666820c71eb420485e4d20e55b4eabe"></a>relative</p> 705</td> 706<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p1173107172814"><a name="en-us_topic_0000001058562839_p1173107172814"></a><a name="en-us_topic_0000001058562839_p1173107172814"></a>No</p> 707</td> 708<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_ae28abf4e47a740efbd45a8f280577912"><a name="en-us_topic_0000001058562839_ae28abf4e47a740efbd45a8f280577912"></a><a name="en-us_topic_0000001058562839_ae28abf4e47a740efbd45a8f280577912"></a>Positioning type of an element. Dynamic changes are not supported.</p> 709<a name="en-us_topic_0000001058562839_ul17185232185014"></a><a name="en-us_topic_0000001058562839_ul17185232185014"></a><ul id="en-us_topic_0000001058562839_ul17185232185014"><li><strong id="en-us_topic_0000001058562839_b1849921835316"><a name="en-us_topic_0000001058562839_b1849921835316"></a><a name="en-us_topic_0000001058562839_b1849921835316"></a>fixed</strong>: The element is positioned related to the browser window.</li><li><strong id="en-us_topic_0000001058562839_b153681749105412"><a name="en-us_topic_0000001058562839_b153681749105412"></a><a name="en-us_topic_0000001058562839_b153681749105412"></a>absolute</strong>: The element is positioned absolutely to its parent element.</li><li><strong id="en-us_topic_0000001058562839_b2202105565418"><a name="en-us_topic_0000001058562839_b2202105565418"></a><a name="en-us_topic_0000001058562839_b2202105565418"></a>relative</strong>: The element is positioned relative to its normal position.</li></ul> 710<div class="note" id="en-us_topic_0000001058562839_note167617191219"><a name="en-us_topic_0000001058562839_note167617191219"></a><a name="en-us_topic_0000001058562839_note167617191219"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058562839_p1839092815101"><a name="en-us_topic_0000001058562839_p1839092815101"></a><a name="en-us_topic_0000001058562839_p1839092815101"></a>The <strong id="en-us_topic_0000001058562839_b686425914544"><a name="en-us_topic_0000001058562839_b686425914544"></a><a name="en-us_topic_0000001058562839_b686425914544"></a>absolute</strong> attribute takes effect only when the parent component is <strong id="en-us_topic_0000001058562839_b14869155914540"><a name="en-us_topic_0000001058562839_b14869155914540"></a><a name="en-us_topic_0000001058562839_b14869155914540"></a><div></strong> or <strong id="en-us_topic_0000001058562839_b2870659135411"><a name="en-us_topic_0000001058562839_b2870659135411"></a><a name="en-us_topic_0000001058562839_b2870659135411"></a><stack></strong>.</p> 711</div></div> 712</td> 713</tr> 714<tr id="en-us_topic_0000001058562839_r134d69553376475c9aada631cc431396"><td class="cellrowborder" valign="top" width="25.03%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058562839_a70405cb9696b4329ac7625af93310018"><a name="en-us_topic_0000001058562839_a70405cb9696b4329ac7625af93310018"></a><a name="en-us_topic_0000001058562839_a70405cb9696b4329ac7625af93310018"></a>[left|top<span id="en-us_topic_0000001058562839_ph14927143614712"><a name="en-us_topic_0000001058562839_ph14927143614712"></a><a name="en-us_topic_0000001058562839_ph14927143614712"></a>|right|bottom</span>]</p> 715</td> 716<td class="cellrowborder" valign="top" width="18.86%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058562839_p1849062221214"><a name="en-us_topic_0000001058562839_p1849062221214"></a><a name="en-us_topic_0000001058562839_p1849062221214"></a><length></p> 717</td> 718<td class="cellrowborder" valign="top" width="10.76%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058562839_a579ac7c03d1d46758ebaacd565d86ed3"><a name="en-us_topic_0000001058562839_a579ac7c03d1d46758ebaacd565d86ed3"></a><a name="en-us_topic_0000001058562839_a579ac7c03d1d46758ebaacd565d86ed3"></a>-</p> 719</td> 720<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058562839_p187314719288"><a name="en-us_topic_0000001058562839_p187314719288"></a><a name="en-us_topic_0000001058562839_p187314719288"></a>No</p> 721</td> 722<td class="cellrowborder" valign="top" width="37.9%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058562839_a9a662a62cd9b40eaa0cb9ca082b6d1c2"><a name="en-us_topic_0000001058562839_a9a662a62cd9b40eaa0cb9ca082b6d1c2"></a><a name="en-us_topic_0000001058562839_a9a662a62cd9b40eaa0cb9ca082b6d1c2"></a><strong id="en-us_topic_0000001058562839_b4659778551"><a name="en-us_topic_0000001058562839_b4659778551"></a><a name="en-us_topic_0000001058562839_b4659778551"></a>left|top</strong><span id="en-us_topic_0000001058562839_ph0666676553"><a name="en-us_topic_0000001058562839_ph0666676553"></a><a name="en-us_topic_0000001058562839_ph0666676553"></a><strong id="en-us_topic_0000001058562839_b5664578554"><a name="en-us_topic_0000001058562839_b5664578554"></a><a name="en-us_topic_0000001058562839_b5664578554"></a>|right|bottom</strong></span> must be used together with <strong id="en-us_topic_0000001058562839_b1466615725517"><a name="en-us_topic_0000001058562839_b1466615725517"></a><a name="en-us_topic_0000001058562839_b1466615725517"></a>position</strong> to determine the offset position of an element.</p> 723<a name="en-us_topic_0000001058562839_ul12671003525"></a><a name="en-us_topic_0000001058562839_ul12671003525"></a><ul id="en-us_topic_0000001058562839_ul12671003525"><li>The <strong id="en-us_topic_0000001058562839_b1347220128551"><a name="en-us_topic_0000001058562839_b1347220128551"></a><a name="en-us_topic_0000001058562839_b1347220128551"></a>left</strong> attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.</li><li>The <strong id="en-us_topic_0000001058562839_b11339112018585"><a name="en-us_topic_0000001058562839_b11339112018585"></a><a name="en-us_topic_0000001058562839_b11339112018585"></a>top</strong> attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.</li><li>The <strong id="en-us_topic_0000001058562839_b1090418381805"><a name="en-us_topic_0000001058562839_b1090418381805"></a><a name="en-us_topic_0000001058562839_b1090418381805"></a>right</strong> attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element. </li><li>The <strong id="en-us_topic_0000001058562839_b684962211511"><a name="en-us_topic_0000001058562839_b684962211511"></a><a name="en-us_topic_0000001058562839_b684962211511"></a>bottom</strong> attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element. </li></ul> 724</td> 725</tr> 726</tbody> 727</table> 728 729
