1# stepper<a name="EN-US_TOPIC_0000001115974734"></a> 2 3- [Permission List](#en-us_topic_0000001060518078_section11257113618419) 4- [Child Component](#en-us_topic_0000001060518078_section9288143101012) 5- [Attribute](#en-us_topic_0000001060518078_section191521418142311) 6- [Style](#en-us_topic_0000001060518078_section72591594253) 7- [Event](#en-us_topic_0000001060518078_section69611614182911) 8- [Method](#en-us_topic_0000001060518078_section1954212182148) 9- [Example Code](#en-us_topic_0000001060518078_section15374183712313) 10 11The **<stepper\>** component provides a step navigator. When multiple steps are required to complete a task, you can use the **<stepper\>** component to navigate your users through the whole process. 12 13> **NOTE:** 14>This component is supported since API version 5. 15 16## Permission List<a name="en-us_topic_0000001060518078_section11257113618419"></a> 17 18None 19 20## Child Component<a name="en-us_topic_0000001060518078_section9288143101012"></a> 21 22Only the **<stepper-item\>** component is supported. 23 24> **NOTE:** 25>Steps in the **<stepper\>** are sorted according to the sequence of its **<stepper-item\>** child components. 26 27## Attribute<a name="en-us_topic_0000001060518078_section191521418142311"></a> 28 29<a name="en-us_topic_0000001060518078_table20633101642315"></a> 30<table><thead align="left"><tr id="en-us_topic_0000001060518078_row663331618238"><th class="cellrowborder" valign="top" width="23.16%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001060518078_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a>Name</p> 31</th> 32<th class="cellrowborder" valign="top" width="23.22%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001060518078_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a>Type</p> 33</th> 34<th class="cellrowborder" valign="top" width="10.36%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001060518078_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"></a>Default Value</p> 35</th> 36<th class="cellrowborder" valign="top" width="7.5%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001060518078_p9728637124816"><a name="en-us_topic_0000001060518078_p9728637124816"></a><a name="en-us_topic_0000001060518078_p9728637124816"></a>Mandatory</p> 37</th> 38<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001060518078_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"></a>Description</p> 39</th> 40</tr> 41</thead> 42<tbody><tr id="en-us_topic_0000001060518078_row9173122818343"><td class="cellrowborder" valign="top" width="23.16%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_p1517410284349"><a name="en-us_topic_0000001060518078_p1517410284349"></a><a name="en-us_topic_0000001060518078_p1517410284349"></a>index</p> 43</td> 44<td class="cellrowborder" valign="top" width="23.22%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_p1174172823415"><a name="en-us_topic_0000001060518078_p1174172823415"></a><a name="en-us_topic_0000001060518078_p1174172823415"></a>number</p> 45</td> 46<td class="cellrowborder" valign="top" width="10.36%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_p19174112863417"><a name="en-us_topic_0000001060518078_p19174112863417"></a><a name="en-us_topic_0000001060518078_p19174112863417"></a>-</p> 47</td> 48<td class="cellrowborder" valign="top" width="7.5%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_p7728237114819"><a name="en-us_topic_0000001060518078_p7728237114819"></a><a name="en-us_topic_0000001060518078_p7728237114819"></a>No</p> 49</td> 50<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_p7174328203414"><a name="en-us_topic_0000001060518078_p7174328203414"></a><a name="en-us_topic_0000001060518078_p7174328203414"></a>Index of the <strong id="en-us_topic_0000001060518078_b1432325813342"><a name="en-us_topic_0000001060518078_b1432325813342"></a><a name="en-us_topic_0000001060518078_b1432325813342"></a><stepper-item></strong> child component that is currently displayed.</p> 51</td> 52</tr> 53<tr id="en-us_topic_0000001060518078_row758163311612"><td class="cellrowborder" valign="top" width="23.16%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a>id</p> 54</td> 55<td class="cellrowborder" valign="top" width="23.22%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a>string</p> 56</td> 57<td class="cellrowborder" valign="top" width="10.36%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a>-</p> 58</td> 59<td class="cellrowborder" valign="top" width="7.5%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p78183594166"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p78183594166"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p78183594166"></a>No</p> 60</td> 61<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a>Unique ID of a component.</p> 62</td> 63</tr> 64<tr id="en-us_topic_0000001060518078_row1896011361162"><td class="cellrowborder" valign="top" width="23.16%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a>style</p> 65</td> 66<td class="cellrowborder" valign="top" width="23.22%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a>string</p> 67</td> 68<td class="cellrowborder" valign="top" width="10.36%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a>-</p> 69</td> 70<td class="cellrowborder" valign="top" width="7.5%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p78181459131617"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p78181459131617"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p78181459131617"></a>No</p> 71</td> 72<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a>Style declaration of a component.</p> 73</td> 74</tr> 75<tr id="en-us_topic_0000001060518078_row1543004118169"><td class="cellrowborder" valign="top" width="23.16%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a>class</p> 76</td> 77<td class="cellrowborder" valign="top" width="23.22%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a>string</p> 78</td> 79<td class="cellrowborder" valign="top" width="10.36%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a>-</p> 80</td> 81<td class="cellrowborder" valign="top" width="7.5%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p11818859171614"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p11818859171614"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p11818859171614"></a>No</p> 82</td> 83<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></a>Style class of a component, which is used to refer to a style table.</p> 84</td> 85</tr> 86<tr id="en-us_topic_0000001060518078_row820934275012"><td class="cellrowborder" valign="top" width="23.16%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p1786251117156"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p1786251117156"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p1786251117156"></a>ref</p> 87</td> 88<td class="cellrowborder" valign="top" width="23.22%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p1086241119157"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p1086241119157"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p1086241119157"></a>string</p> 89</td> 90<td class="cellrowborder" valign="top" width="10.36%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p586281111151"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p586281111151"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p586281111151"></a>-</p> 91</td> 92<td class="cellrowborder" valign="top" width="7.5%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p181818590163"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p181818590163"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p181818590163"></a>No</p> 93</td> 94<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p113416153342"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p113416153342"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p113416153342"></a>Used to register reference information of child elements<span id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_ph5815920163518"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_ph5815920163518"></a><a name="en-us_topic_0000001060518078_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_0000001060518078_en-us_topic_0000001058340523_b08212202354"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_b08212202354"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_b08212202354"></a>$refs</strong>.</p> 95</td> 96</tr> 97<tr id="en-us_topic_0000001060518078_row102281644125016"><td class="cellrowborder" valign="top" width="23.16%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"></a>disabled</p> 98</td> 99<td class="cellrowborder" valign="top" width="23.22%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"></a>boolean</p> 100</td> 101<td class="cellrowborder" valign="top" width="10.36%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"></a>false</p> 102</td> 103<td class="cellrowborder" valign="top" width="7.5%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p128181959161612"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p128181959161612"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p128181959161612"></a>No</p> 104</td> 105<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"></a>Whether a component is disabled. If it is disabled, it cannot respond to user interaction.</p> 106</td> 107</tr> 108<tr id="en-us_topic_0000001060518078_row444684811507"><td class="cellrowborder" valign="top" width="23.16%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a>data</p> 109</td> 110<td class="cellrowborder" valign="top" width="23.22%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a>string</p> 111</td> 112<td class="cellrowborder" valign="top" width="10.36%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a>-</p> 113</td> 114<td class="cellrowborder" valign="top" width="7.5%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p1281819591169"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p1281819591169"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_p1281819591169"></a>No</p> 115</td> 116<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a>Attribute set for a component to facilitate data storage and reading.</p> 117</td> 118</tr> 119</tbody> 120</table> 121 122## Style<a name="en-us_topic_0000001060518078_section72591594253"></a> 123 124<a name="en-us_topic_0000001060518078_table2080516332251"></a> 125<table><thead align="left"><tr id="en-us_topic_0000001060518078_row1280514336259"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"></a>Name</p> 126</th> 127<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"></a>Type</p> 128</th> 129<th class="cellrowborder" valign="top" width="8.869113088691131%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"></a>Default Value</p> 130</th> 131<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001060518078_p117421754619"><a name="en-us_topic_0000001060518078_p117421754619"></a><a name="en-us_topic_0000001060518078_p117421754619"></a>Mandatory</p> 132</th> 133<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"></a>Description</p> 134</th> 135</tr> 136</thead> 137<tbody><tr id="en-us_topic_0000001060518078_row13446238145410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1070mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1070mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1070mcpsimp"></a>width</p> 138</td> 139<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1072mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1072mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1072mcpsimp"></a><length><span id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph597168143913"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph597168143913"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph597168143913"></a> | <percentage></span></p> 140</td> 141<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p3948114217528"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p3948114217528"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p3948114217528"></a>-</p> 142</td> 143<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_p13174101704612"><a name="en-us_topic_0000001060518078_p13174101704612"></a><a name="en-us_topic_0000001060518078_p13174101704612"></a>No</p> 144</td> 145<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p624653010258"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p624653010258"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p624653010258"></a>Component width.</p> 146<p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p84811050134010"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p84811050134010"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p84811050134010"></a>If this attribute is not set, the width required for the element content is used. </p> 147</td> 148</tr> 149<tr id="en-us_topic_0000001060518078_row7446738195418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"></a>height</p> 150</td> 151<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"></a><length><span id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph11748352163918"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph11748352163918"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph11748352163918"></a> | <percentage></span></p> 152</td> 153<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"></a>-</p> 154</td> 155<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_p71741417194619"><a name="en-us_topic_0000001060518078_p71741417194619"></a><a name="en-us_topic_0000001060518078_p71741417194619"></a>No</p> 156</td> 157<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1477601264"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1477601264"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1477601264"></a>Component height.</p> 158<p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p208761554184020"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p208761554184020"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p208761554184020"></a>If this length attribute is not set, the length required for the element content is used. </p> 159</td> 160</tr> 161<tr id="en-us_topic_0000001060518078_row18446638145412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1088mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1088mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1088mcpsimp"></a>padding</p> 162</td> 163<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1090mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1090mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1090mcpsimp"></a><length></p> 164</td> 165<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1092mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1092mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1092mcpsimp"></a>0</p> 166</td> 167<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p19729127112814"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p19729127112814"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p19729127112814"></a>No</p> 168</td> 169<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><div class="p" id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1094mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1094mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1094mcpsimp"></a>The attribute can have one to four values:<a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul15202134923211"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul15202134923211"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul15202134923211"><li><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p10614155353215"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p10614155353215"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p10614155353215"></a>If you set only one value, it specifies the padding for four sides.</p> 170</li><li><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p10614175393216"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p10614175393216"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p10614175393216"></a>If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.</p> 171</li><li><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p8614205393214"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p8614205393214"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p8614205393214"></a>If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.</p> 172</li><li><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p106141853193215"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p106141853193215"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p106141853193215"></a>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).</p> 173</li></ul> 174</div> 175</td> 176</tr> 177<tr id="en-us_topic_0000001060518078_row24464380544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1097mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1097mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1097mcpsimp"></a>padding-[left|top|right|bottom]</p> 178</td> 179<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1099mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1099mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1099mcpsimp"></a><length></p> 180</td> 181<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1101mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1101mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1101mcpsimp"></a>0</p> 182</td> 183<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p11729374289"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p11729374289"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p11729374289"></a>No</p> 184</td> 185<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1103mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1103mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1103mcpsimp"></a>Left, top, right, and bottom padding (in px).</p> 186</td> 187</tr> 188<tr id="en-us_topic_0000001060518078_row1144723845412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p769124717365"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p769124717365"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p769124717365"></a>padding-[start|end]</p> 189</td> 190<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p157617124374"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p157617124374"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p157617124374"></a><length></p> 191</td> 192<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1069144703616"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1069144703616"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1069144703616"></a>0</p> 193</td> 194<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1373027182819"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1373027182819"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1373027182819"></a>No</p> 195</td> 196<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1269184753610"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1269184753610"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1269184753610"></a>Start and end padding.</p> 197</td> 198</tr> 199<tr id="en-us_topic_0000001060518078_row11447438175410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1106mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1106mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1106mcpsimp"></a>margin</p> 200</td> 201<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1108mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1108mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1108mcpsimp"></a><length></p> 202</td> 203<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1110mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1110mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1110mcpsimp"></a>0</p> 204</td> 205<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p4730774285"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p4730774285"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p4730774285"></a>No</p> 206</td> 207<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1112mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1112mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1112mcpsimp"></a>Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:</p> 208<a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul5333133311105"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul5333133311105"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul5333133311105"><li><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p03345339103"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p03345339103"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p03345339103"></a>If you set only one value, it specifies the margin for all the four sides.</p> 209</li><li><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1133420334108"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1133420334108"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1133420334108"></a>If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.</p> 210</li><li><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p193341533191015"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p193341533191015"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p193341533191015"></a>If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.</p> 211</li><li><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p733412334102"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p733412334102"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p733412334102"></a>If you set four values, they are margins for top, right, bottom, and left sides, respectively.</p> 212</li></ul> 213</td> 214</tr> 215<tr id="en-us_topic_0000001060518078_row144473383544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1115mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1115mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1115mcpsimp"></a>margin-[left|top|right|bottom]</p> 216</td> 217<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1117mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1117mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1117mcpsimp"></a><length></p> 218</td> 219<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1119mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1119mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1119mcpsimp"></a>0</p> 220</td> 221<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p773013742811"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p773013742811"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p773013742811"></a>No</p> 222</td> 223<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1121mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1121mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1121mcpsimp"></a>Left, top, right, and bottom margins.</p> 224</td> 225</tr> 226<tr id="en-us_topic_0000001060518078_row944743811541"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p9492107123816"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p9492107123816"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p9492107123816"></a>margin-[start|end]</p> 227</td> 228<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p157617124374_1"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p157617124374_1"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p157617124374_1"></a><length></p> 229</td> 230<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1549213793811"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1549213793811"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1549213793811"></a>0</p> 231</td> 232<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_p117511744618"><a name="en-us_topic_0000001060518078_p117511744618"></a><a name="en-us_topic_0000001060518078_p117511744618"></a>No</p> 233</td> 234<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1049212715388"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1049212715388"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1049212715388"></a>Start and end margins.</p> 235</td> 236</tr> 237<tr id="en-us_topic_0000001060518078_row16447238155411"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1124mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1124mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1124mcpsimp"></a>border</p> 238</td> 239<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1126mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1126mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1126mcpsimp"></a>-</p> 240</td> 241<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1128mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1128mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1128mcpsimp"></a>0</p> 242</td> 243<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_p11175131715467"><a name="en-us_topic_0000001060518078_p11175131715467"></a><a name="en-us_topic_0000001060518078_p11175131715467"></a>No</p> 244</td> 245<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1130mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1130mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1130mcpsimp"></a>Shorthand attribute to set all borders. You can set <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b79128342503"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b79128342503"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b79128342503"></a>border-width</strong>, <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b9366173919505"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b9366173919505"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b9366173919505"></a>border-style</strong>, and <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b184351248205019"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b184351248205019"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b184351248205019"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 246</td> 247</tr> 248<tr id="en-us_topic_0000001060518078_row4447138115414"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1133mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1133mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1133mcpsimp"></a>border-style</p> 249</td> 250<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p513631613319"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p513631613319"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p513631613319"></a>string</p> 251</td> 252<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1137mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1137mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1137mcpsimp"></a>solid</p> 253</td> 254<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_p617531717464"><a name="en-us_topic_0000001060518078_p617531717464"></a><a name="en-us_topic_0000001060518078_p617531717464"></a>No</p> 255</td> 256<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p342285712314"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p342285712314"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p342285712314"></a>Shorthand attribute to set the style for all borders. Available values are as follows:</p> 257<a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul1470834505612"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul1470834505612"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul1470834505612"><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b143453286360"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b143453286360"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b143453286360"></a>dotted</strong>: Dotted border. The radius of a dot is half of border-width.</li><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b792117280367"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b792117280367"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b792117280367"></a>dashed</strong>: Dashed border</li></ul> 258<a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul15621125545612"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul15621125545612"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul15621125545612"><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1335862963610"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1335862963610"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1335862963610"></a>solid</strong>: Solid border</li></ul> 259</td> 260</tr> 261<tr id="en-us_topic_0000001060518078_row1656512239262"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p119531437370"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p119531437370"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p119531437370"></a>border-[left|top|right|bottom]-style</p> 262</td> 263<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p129532037175"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p129532037175"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p129532037175"></a>string</p> 264</td> 265<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p495312372717"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p495312372717"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p495312372717"></a>solid</p> 266</td> 267<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p169534375717"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p169534375717"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p169534375717"></a>No</p> 268</td> 269<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p595353718719"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p595353718719"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p595353718719"></a>Styles of the left, top, right, and bottom borders. The available values are <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b17769171311540"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b17769171311540"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b17769171311540"></a>dotted</strong>, <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b237141519547"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b237141519547"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b237141519547"></a>dashed</strong>, and <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b8949161613540"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b8949161613540"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b8949161613540"></a>solid</strong>.</p> 270</td> 271</tr> 272<tr id="en-us_topic_0000001060518078_row19448113811542"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1142mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1142mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1142mcpsimp"></a>border-[left|top|right|bottom]</p> 273</td> 274<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1144mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1144mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1144mcpsimp"></a>-</p> 275</td> 276<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1146mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1146mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1146mcpsimp"></a>-</p> 277</td> 278<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p67303762810"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p67303762810"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p67303762810"></a>No</p> 279</td> 280<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1148mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1148mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1148mcpsimp"></a>Shorthand attribute to set the borders for every side respectively. You can set <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b122415514554"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b122415514554"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b122415514554"></a>border-width</strong>, <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b12296178135513"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b12296178135513"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b12296178135513"></a>border-style</strong>, and <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1129701210553"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1129701210553"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1129701210553"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 281</td> 282</tr> 283<tr id="en-us_topic_0000001060518078_row124481638165417"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1151mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1151mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1151mcpsimp"></a>border-width</p> 284</td> 285<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1153mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1153mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1153mcpsimp"></a><length></p> 286</td> 287<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1155mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1155mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1155mcpsimp"></a>0</p> 288</td> 289<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_p16175131724618"><a name="en-us_topic_0000001060518078_p16175131724618"></a><a name="en-us_topic_0000001060518078_p16175131724618"></a>No</p> 290</td> 291<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1157mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1157mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1157mcpsimp"></a>Shorthand attribute to set the width of all borders<span id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph07997369365"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph07997369365"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph07997369365"></a>, or separately set the width of each border</span>.</p> 292</td> 293</tr> 294<tr id="en-us_topic_0000001060518078_row54481038165410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1160mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1160mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1160mcpsimp"></a>border-[left|top|right|bottom]-width</p> 295</td> 296<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1162mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1162mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1162mcpsimp"></a><length></p> 297</td> 298<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1164mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1164mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1164mcpsimp"></a>0</p> 299</td> 300<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_p11175151717466"><a name="en-us_topic_0000001060518078_p11175151717466"></a><a name="en-us_topic_0000001060518078_p11175151717466"></a>No</p> 301</td> 302<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1166mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1166mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1166mcpsimp"></a>Attribute to set widths of left, top, right, and bottom borders.</p> 303</td> 304</tr> 305<tr id="en-us_topic_0000001060518078_row1744817385547"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1169mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1169mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1169mcpsimp"></a>border-color</p> 306</td> 307<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1171mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1171mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1171mcpsimp"></a><color></p> 308</td> 309<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1173mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1173mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1173mcpsimp"></a>black</p> 310</td> 311<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_p1017518177465"><a name="en-us_topic_0000001060518078_p1017518177465"></a><a name="en-us_topic_0000001060518078_p1017518177465"></a>No</p> 312</td> 313<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1175mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1175mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1175mcpsimp"></a>Shorthand attribute to set the color of all borders<span id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph9587639113619"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph9587639113619"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph9587639113619"></a>, or separately set the color of each border</span>.</p> 314</td> 315</tr> 316<tr id="en-us_topic_0000001060518078_row844813835410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1178mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1178mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1178mcpsimp"></a>border-[left|top|right|bottom]-color</p> 317</td> 318<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1180mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1180mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1180mcpsimp"></a><color></p> 319</td> 320<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1182mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1182mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1182mcpsimp"></a>black</p> 321</td> 322<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_p11175417184611"><a name="en-us_topic_0000001060518078_p11175417184611"></a><a name="en-us_topic_0000001060518078_p11175417184611"></a>No</p> 323</td> 324<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1184mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1184mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1184mcpsimp"></a>Attribute to set colors of left, top, right, and bottom borders.</p> 325</td> 326</tr> 327<tr id="en-us_topic_0000001060518078_row944813389540"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1187mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1187mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1187mcpsimp"></a>border-radius</p> 328</td> 329<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1189mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1189mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1189mcpsimp"></a><length></p> 330</td> 331<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1191mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1191mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1191mcpsimp"></a>-</p> 332</td> 333<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p67306752816"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p67306752816"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p67306752816"></a>No</p> 334</td> 335<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p18998933174117"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p18998933174117"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p18998933174117"></a>Attribute to set the radius of round borders of an element. <span id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph1249443123611"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph1249443123611"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph1249443123611"></a>This attribute cannot be used to set the width or color of a specific border. To set the width or color, you need to set <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b124211434362"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b124211434362"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b124211434362"></a>border-width</strong> or <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b124894383615"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b124894383615"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b124894383615"></a>border-color</strong> for all the borders at the same time.</span></p> 336</td> 337</tr> 338<tr id="en-us_topic_0000001060518078_row104494382546"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1198mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1198mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1198mcpsimp"></a>border-[top|bottom]-[left|right]-radius</p> 339</td> 340<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1200mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1200mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1200mcpsimp"></a><length></p> 341</td> 342<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1202mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1202mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1202mcpsimp"></a>-</p> 343</td> 344<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p27305718283"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p27305718283"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p27305718283"></a>No</p> 345</td> 346<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1204mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1204mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1204mcpsimp"></a>Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners</p> 347</td> 348</tr> 349<tr id="en-us_topic_0000001060518078_row1344912384548"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"></a>background</p> 350</td> 351<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"></a><linear-gradient></p> 352</td> 353<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"></a>-</p> 354</td> 355<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p15730197132811"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p15730197132811"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p15730197132811"></a>No</p> 356</td> 357<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"><a name="en-us_topic_0000001060518078_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"></a>This attribute supports <a href="gradient-styles.md#EN-US_TOPIC_0000001115974726">Gradient Styles</a> only but is not compatible with <strong id="en-us_topic_0000001060518078_b6425124115417"><a name="en-us_topic_0000001060518078_b6425124115417"></a><a name="en-us_topic_0000001060518078_b6425124115417"></a>background-color</strong> or <strong id="en-us_topic_0000001060518078_b8425194110415"><a name="en-us_topic_0000001060518078_b8425194110415"></a><a name="en-us_topic_0000001060518078_b8425194110415"></a>background-image</strong>.</p> 358</td> 359</tr> 360<tr id="en-us_topic_0000001060518078_row15449838185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"></a>background-color</p> 361</td> 362<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"></a><color></p> 363</td> 364<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"></a>-</p> 365</td> 366<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p17730577282"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p17730577282"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p17730577282"></a>No</p> 367</td> 368<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"></a>Background color.</p> 369</td> 370</tr> 371<tr id="en-us_topic_0000001060518078_row54491338115412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"></a>background-image</p> 372</td> 373<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"></a>string</p> 374</td> 375<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"></a>-</p> 376</td> 377<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p7730976285"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p7730976285"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p7730976285"></a>No</p> 378</td> 379<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"></a>Background image. Currently, this attribute is not compatible with <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b17699154763620"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b17699154763620"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b17699154763620"></a>background-color</strong> or <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b87001647163613"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b87001647163613"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b87001647163613"></a>background</strong>. Both Internet and local image resources are supported.</p> 380</td> 381</tr> 382<tr id="en-us_topic_0000001060518078_row6449238185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"></a>background-size</p> 383</td> 384<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul1065173641310"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul1065173641310"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul1065173641310"><li>string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 385</td> 386<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"></a>auto</p> 387</td> 388<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p137309714282"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p137309714282"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p137309714282"></a>No</p> 389</td> 390<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p91971112114318"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p91971112114318"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p91971112114318"></a>Background image size.</p> 391<a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul41331853154111"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul41331853154111"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul41331853154111"><li>The <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1229715499365"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1229715499365"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1229715499365"></a>string</strong> values are as follows:<a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul13611494111"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul13611494111"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul13611494111"><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b4759749163610"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b4759749163610"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b4759749163610"></a>contain</strong>: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.</li><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b136485011365"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b136485011365"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b136485011365"></a>cover</strong>: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background localization area.</li><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1425512535366"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1425512535366"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1425512535366"></a>auto</strong>: The original image width-height ratio is retained.</li></ul> 392</li><li>The two <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b13309145193614"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b13309145193614"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b13309145193614"></a><length></strong> values are as follows:<p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1840244924418"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1840244924418"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1840244924418"></a>Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b146661156143617"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b146661156143617"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b146661156143617"></a>auto</strong> by default.</p> 393</li><li>The two <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1667415763613"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1667415763613"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1667415763613"></a><percentage></strong> values are as follows:<p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p17936154410457"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p17936154410457"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p17936154410457"></a>Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b17190164371"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b17190164371"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b17190164371"></a>auto</strong> by default.</p> 394</li></ul> 395</td> 396</tr> 397<tr id="en-us_topic_0000001060518078_row94491238155415"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"></a>background-repeat</p> 398</td> 399<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"></a>string</p> 400</td> 401<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"></a>repeat</p> 402</td> 403<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1673015702810"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1673015702810"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1673015702810"></a>No</p> 404</td> 405<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"></a>Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.</p> 406<a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul8236153103612"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul8236153103612"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul8236153103612"><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1363463710"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1363463710"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1363463710"></a>repeat</strong>: Draws images along the x-axis and y-axis at the same time.</li><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b267416916377"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b267416916377"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b267416916377"></a>repeat-x</strong>: Draws images along the x-axis.</li><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b625561011379"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b625561011379"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b625561011379"></a>repeat-y</strong>: Draws images along the y-axis.</li><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1122181133715"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1122181133715"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1122181133715"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul> 407</td> 408</tr> 409<tr id="en-us_topic_0000001060518078_row94491738105419"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"></a>background-position</p> 410</td> 411<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul8874155216502"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul8874155216502"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul8874155216502"><li>string string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 412</td> 413<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"></a>0px 0px</p> 414</td> 415<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p173010720280"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p173010720280"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p173010720280"></a>No</p> 416</td> 417<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul1590812103363"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul1590812103363"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul1590812103363"><li>Using keywords: If only one keyword is specified, the other value is <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b997011116376"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b997011116376"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b997011116376"></a>center</strong> by default. The two values define the horizontal position and vertical position, respectively.<a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul1453531734716"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul1453531734716"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul1453531734716"><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b0982111273712"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b0982111273712"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b0982111273712"></a>left</strong>: leftmost in the horizontal direction</li><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b866713583912"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b866713583912"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b866713583912"></a>right</strong>: rightmost in the horizontal direction</li><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b5886013193716"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b5886013193716"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b5886013193716"></a>top</strong>: top in the vertical direction</li><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b84197142376"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b84197142376"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b84197142376"></a>bottom</strong>: bottom in the vertical direction</li><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b14894114103710"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b14894114103710"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b14894114103710"></a>center</strong>: center position</li></ul> 418</li></ul> 419<a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul10908121023615"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul10908121023615"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul10908121023615"><li>Using <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b11401615193715"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b11401615193715"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b11401615193715"></a><length></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1341381819379"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1341381819379"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1341381819379"></a>0 0</strong> indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b48671516183714"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b48671516183714"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b48671516183714"></a>50%</strong>.</li><li>Using <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b5492717163712"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b5492717163712"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b5492717163712"></a><percentage></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b164741723183712"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b164741723183712"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b164741723183712"></a>0% 0%</strong> indicates the upper left corner. <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b64022245377"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b64022245377"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b64022245377"></a>100% 100%</strong> indicates the lower right corner. If only one value is specified, the other one is <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b7893424163718"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b7893424163718"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b7893424163718"></a>50%</strong>.</li><li>Using both <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b154811725193718"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b154811725193718"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b154811725193718"></a><percentage></strong> and <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b34834254377"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b34834254377"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b34834254377"></a><length></strong>.</li></ul> 420</td> 421</tr> 422<tr id="en-us_topic_0000001060518078_row20450143885416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p134581712103910"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p134581712103910"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p134581712103910"></a>opacity</p> 423</td> 424<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"></a>number</p> 425</td> 426<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"></a>1</p> 427</td> 428<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1873011722814"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1873011722814"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1873011722814"></a>No</p> 429</td> 430<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p122515161139"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p122515161139"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p122515161139"></a>Transparency of an element. The value ranges from <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1871715526385"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1871715526385"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1871715526385"></a>0</strong> to <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b177181452103815"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b177181452103815"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b177181452103815"></a>1</strong>. The value <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b13718155210380"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b13718155210380"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b13718155210380"></a>1</strong> means opaque, and <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b6718152103818"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b6718152103818"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b6718152103818"></a>0</strong> means completely transparent.</p> 431</td> 432</tr> 433<tr id="en-us_topic_0000001060518078_row1450123865418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"></a>display</p> 434</td> 435<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1544115441446"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1544115441446"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1544115441446"></a>string</p> 436<p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"></a></p> 437</td> 438<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"></a>flex</p> 439</td> 440<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p167303762818"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p167303762818"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p167303762818"></a>No</p> 441</td> 442<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p23704018414"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p23704018414"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p23704018414"></a>How and whether to display the box containing an element. Available values are as follows:</p> 443<a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul12227103394916"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul12227103394916"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul12227103394916"><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b57468289377"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b57468289377"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b57468289377"></a>flex</strong>: flexible layout</li><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b18887133293920"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b18887133293920"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b18887133293920"></a>none</strong>: The element is hidden.</li></ul> 444</td> 445</tr> 446<tr id="en-us_topic_0000001060518078_row194503380541"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"></a>visibility</p> 447</td> 448<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p15475737486"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p15475737486"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p15475737486"></a>string</p> 449<p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"></a></p> 450</td> 451<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"></a>visible</p> 452</td> 453<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p57301471281"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p57301471281"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p57301471281"></a>No</p> 454</td> 455<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1568839154517"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1568839154517"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1568839154517"></a>Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b15844103015378"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b15844103015378"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b15844103015378"></a>display</strong> attribute to <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b4845153013712"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b4845153013712"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b4845153013712"></a>none</strong>.) Available values are as follows:</p> 456<a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul751984164920"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul751984164920"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul751984164920"><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b17429331133711"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b17429331133711"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b17429331133711"></a>visible</strong>: The element is visible.</li><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b109191231193710"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b109191231193710"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b109191231193710"></a>hidden</strong>: The element is hidden but still takes up space.</li></ul> 457<div class="note" id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note4549524649"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note4549524649"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note4549524649"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p25499241642"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p25499241642"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p25499241642"></a>If both <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b719810016405"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b719810016405"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b719810016405"></a>visibility</strong> and <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b187052264018"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b187052264018"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b187052264018"></a>display</strong> are set, only <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b107788924011"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b107788924011"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b107788924011"></a>display</strong> takes effect.</p> 458</div></div> 459</td> 460</tr> 461<tr id="en-us_topic_0000001060518078_row13450113811544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1292mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1292mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1292mcpsimp"></a>flex</p> 462</td> 463<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1294mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1294mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1294mcpsimp"></a>number</p> 464</td> 465<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1296mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1296mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1296mcpsimp"></a>-</p> 466</td> 467<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1373057132812"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1373057132812"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1373057132812"></a>No</p> 468</td> 469<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1298mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1298mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1298mcpsimp"></a>How to divide available space of the parent component for a child component. It is used as a shorthand attribute to set the <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b675073313371"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b675073313371"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b675073313371"></a>flex-grow</strong> attribute of the parent component.</p> 470<div class="note" id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note34891253201520"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note34891253201520"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note34891253201520"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1248915538152"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1248915538152"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1248915538152"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b5392113473716"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b5392113473716"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b5392113473716"></a><div></strong>, <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b18394103473713"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b18394103473713"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b18394103473713"></a><list-item></strong>, or <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b153951534103716"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b153951534103716"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b153951534103716"></a><tabs></strong>.</p> 471</div></div> 472</td> 473</tr> 474<tr id="en-us_topic_0000001060518078_row13450138205418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1301mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1301mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1301mcpsimp"></a>flex-grow</p> 475</td> 476<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1303mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1303mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1303mcpsimp"></a>number</p> 477</td> 478<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1305mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1305mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1305mcpsimp"></a>0</p> 479</td> 480<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_p81768178466"><a name="en-us_topic_0000001060518078_p81768178466"></a><a name="en-us_topic_0000001060518078_p81768178466"></a>No</p> 481</td> 482<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p4437122419557"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p4437122419557"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p4437122419557"></a>How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1682343583716"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1682343583716"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1682343583716"></a>0</strong> indicates that the child component does not grow.</p> 483<div class="note" id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note201231734212"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note201231734212"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note201231734212"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p184555314553"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p184555314553"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p184555314553"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1444983613711"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1444983613711"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1444983613711"></a><div></strong>, <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b64501936153711"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b64501936153711"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b64501936153711"></a><list-item></strong>, or <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1145115367371"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1145115367371"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1145115367371"></a><tabs></strong>.</p> 484</div></div> 485</td> 486</tr> 487<tr id="en-us_topic_0000001060518078_row845016384549"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1310mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1310mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1310mcpsimp"></a>flex-shrink</p> 488</td> 489<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1312mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1312mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1312mcpsimp"></a>number</p> 490</td> 491<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1314mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1314mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1314mcpsimp"></a>1</p> 492</td> 493<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_p1917613178465"><a name="en-us_topic_0000001060518078_p1917613178465"></a><a name="en-us_topic_0000001060518078_p1917613178465"></a>No</p> 494</td> 495<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1316mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1316mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1316mcpsimp"></a>How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b783242395"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b783242395"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b783242395"></a>0</strong> indicates that the child component does not shrink.</p> 496<div class="note" id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note147160917217"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note147160917217"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note147160917217"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p844914328577"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p844914328577"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p844914328577"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1441723203915"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1441723203915"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1441723203915"></a><div></strong>, <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b14282393913"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b14282393913"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b14282393913"></a><list-item></strong>, or <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b2043102343910"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b2043102343910"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b2043102343910"></a><tabs></strong>.</p> 497</div></div> 498</td> 499</tr> 500<tr id="en-us_topic_0000001060518078_row144511738195411"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1319mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1319mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1319mcpsimp"></a>flex-basis</p> 501</td> 502<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1148910787"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1148910787"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1148910787"></a><length></p> 503<p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1321mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1321mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1321mcpsimp"></a></p> 504</td> 505<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1323mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1323mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1323mcpsimp"></a>-</p> 506</td> 507<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_p0176817154612"><a name="en-us_topic_0000001060518078_p0176817154612"></a><a name="en-us_topic_0000001060518078_p0176817154612"></a>No</p> 508</td> 509<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1325mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1325mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1325mcpsimp"></a>Initial length of the flex item on the main axis.</p> 510<div class="note" id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note62848141222"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note62848141222"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note62848141222"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p16711745115718"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p16711745115718"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p16711745115718"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1864241917398"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1864241917398"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1864241917398"></a><div></strong>, <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b19648111913920"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b19648111913920"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b19648111913920"></a><list-item></strong>, or <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b46497191399"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b46497191399"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b46497191399"></a><tabs></strong>.</p> 511</div></div> 512</td> 513</tr> 514<tr id="en-us_topic_0000001060518078_row184519384544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1328mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1328mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1328mcpsimp"></a>position</p> 515</td> 516<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1330mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1330mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1330mcpsimp"></a>string</p> 517</td> 518<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1332mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1332mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1332mcpsimp"></a>relative</p> 519</td> 520<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1173107172814"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1173107172814"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1173107172814"></a>No</p> 521</td> 522<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1334mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1334mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1334mcpsimp"></a>Positioning type of an element. Dynamic changes are not supported.</p> 523<a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul17185232185014"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul17185232185014"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul17185232185014"><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1894911155394"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1894911155394"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1894911155394"></a>fixed</strong>: The element is positioned related to the browser window.</li><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b823115152390"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b823115152390"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b823115152390"></a>absolute</strong>: The element is positioned absolutely to its parent element.</li><li><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b736151417395"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b736151417395"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b736151417395"></a>relative</strong>: The element is positioned relative to its normal position.</li></ul> 524<div class="note" id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note167617191219"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note167617191219"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_note167617191219"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1839092815101"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1839092815101"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1839092815101"></a>The <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b13941713133910"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b13941713133910"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b13941713133910"></a>absolute</strong> attribute takes effect only when the parent component is <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1099913173916"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1099913173916"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b1099913173916"></a><div></strong> or <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b181001413123919"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b181001413123919"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b181001413123919"></a><stack></strong>.</p> 525</div></div> 526</td> 527</tr> 528<tr id="en-us_topic_0000001060518078_row1545123811547"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1337mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1337mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1337mcpsimp"></a>[left|top<span id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph14927143614712"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph14927143614712"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph14927143614712"></a>|right|bottom</span>]</p> 529</td> 530<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1849062221214"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1849062221214"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p1849062221214"></a><length></p> 531</td> 532<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1341mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1341mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1341mcpsimp"></a>-</p> 533</td> 534<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p187314719288"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p187314719288"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_p187314719288"></a>No</p> 535</td> 536<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1343mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1343mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1343mcpsimp"></a><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b481348173914"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b481348173914"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b481348173914"></a>left|top</strong><span id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph4818118173914"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph4818118173914"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ph4818118173914"></a><strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b68143833912"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b68143833912"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b68143833912"></a>|right|bottom</strong></span> must be used together with <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b881916818394"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b881916818394"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b881916818394"></a>position</strong> to determine the offset position of an element.</p> 537<a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul12671003525"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul12671003525"></a><ul id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_ul12671003525"><li>The <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b885117712398"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b885117712398"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b885117712398"></a>left</strong> attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.</li><li>The <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b65591759395"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b65591759395"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b65591759395"></a>top</strong> attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.</li><li>The <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b179013323910"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b179013323910"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b179013323910"></a>right</strong> attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element. </li><li>The <strong id="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b77091602397"><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b77091602397"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001050791158_b77091602397"></a>bottom</strong> attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element. </li></ul> 538</td> 539</tr> 540</tbody> 541</table> 542 543> **NOTE:** 544>By default, the **<stepper\>** component fills entire space of its container. To optimize user experience, it is recommended that the container should be as large as the application window in size, or should be the root component. 545 546## Event<a name="en-us_topic_0000001060518078_section69611614182911"></a> 547 548<a name="en-us_topic_0000001060518078_table836435619510"></a> 549<table><thead align="left"><tr id="en-us_topic_0000001060518078_row153658563517"><th class="cellrowborder" valign="top" width="10.481048104810482%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001060518078_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p619mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p619mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p619mcpsimp"></a>Name</p> 550</th> 551<th class="cellrowborder" valign="top" width="41.91419141914191%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001060518078_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p621mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p621mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p621mcpsimp"></a>Parameter</p> 552</th> 553<th class="cellrowborder" valign="top" width="47.6047604760476%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001060518078_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p623mcpsimp"><a name="en-us_topic_0000001060518078_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p623mcpsimp"></a><a name="en-us_topic_0000001060518078_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p623mcpsimp"></a>Description</p> 554</th> 555</tr> 556</thead> 557<tbody><tr id="en-us_topic_0000001060518078_row990553521718"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060518078_p1390619353170"><a name="en-us_topic_0000001060518078_p1390619353170"></a><a name="en-us_topic_0000001060518078_p1390619353170"></a>finish</p> 558</td> 559<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060518078_p7906113541716"><a name="en-us_topic_0000001060518078_p7906113541716"></a><a name="en-us_topic_0000001060518078_p7906113541716"></a>None</p> 560</td> 561<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060518078_p7906113531711"><a name="en-us_topic_0000001060518078_p7906113531711"></a><a name="en-us_topic_0000001060518078_p7906113531711"></a>Triggered when the last step on the navigator is complete.</p> 562</td> 563</tr> 564<tr id="en-us_topic_0000001060518078_row24211338161718"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060518078_p2421113881715"><a name="en-us_topic_0000001060518078_p2421113881715"></a><a name="en-us_topic_0000001060518078_p2421113881715"></a>skip</p> 565</td> 566<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060518078_p16421133841719"><a name="en-us_topic_0000001060518078_p16421133841719"></a><a name="en-us_topic_0000001060518078_p16421133841719"></a>None</p> 567</td> 568<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060518078_p1342113381171"><a name="en-us_topic_0000001060518078_p1342113381171"></a><a name="en-us_topic_0000001060518078_p1342113381171"></a>Triggered when users click the skip button, which works only if you have called <strong id="en-us_topic_0000001060518078_b494641310465"><a name="en-us_topic_0000001060518078_b494641310465"></a><a name="en-us_topic_0000001060518078_b494641310465"></a>setNextButtonStatus</strong> method to allow users to skip all steps.</p> 569</td> 570</tr> 571<tr id="en-us_topic_0000001060518078_row153591438186"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060518078_p163591032182"><a name="en-us_topic_0000001060518078_p163591032182"></a><a name="en-us_topic_0000001060518078_p163591032182"></a>change</p> 572</td> 573<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060518078_p1535910381819"><a name="en-us_topic_0000001060518078_p1535910381819"></a><a name="en-us_topic_0000001060518078_p1535910381819"></a>{ prevIndex: prevIndex, index: index}</p> 574</td> 575<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060518078_p113602034189"><a name="en-us_topic_0000001060518078_p113602034189"></a><a name="en-us_topic_0000001060518078_p113602034189"></a>Triggered when users click the left or right (text) button of the step navigator to switch between steps. <strong id="en-us_topic_0000001060518078_b108361233105012"><a name="en-us_topic_0000001060518078_b108361233105012"></a><a name="en-us_topic_0000001060518078_b108361233105012"></a>prevIndex</strong> indicates the index of the previous step, and <strong id="en-us_topic_0000001060518078_b1014617216510"><a name="en-us_topic_0000001060518078_b1014617216510"></a><a name="en-us_topic_0000001060518078_b1014617216510"></a>index</strong> indicates that of the current step.</p> 576</td> 577</tr> 578<tr id="en-us_topic_0000001060518078_row6686131145112"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060518078_p126879113514"><a name="en-us_topic_0000001060518078_p126879113514"></a><a name="en-us_topic_0000001060518078_p126879113514"></a>next</p> 579</td> 580<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060518078_p06871911115113"><a name="en-us_topic_0000001060518078_p06871911115113"></a><a name="en-us_topic_0000001060518078_p06871911115113"></a>{ index: index, pendingIndex: pendingIndex }</p> 581</td> 582<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060518078_p18140235202411"><a name="en-us_topic_0000001060518078_p18140235202411"></a><a name="en-us_topic_0000001060518078_p18140235202411"></a>Triggered when users click the next (text) button. <strong id="en-us_topic_0000001060518078_b155446175519"><a name="en-us_topic_0000001060518078_b155446175519"></a><a name="en-us_topic_0000001060518078_b155446175519"></a>index</strong> indicates the index of the current step, and <strong id="en-us_topic_0000001060518078_b16471726587"><a name="en-us_topic_0000001060518078_b16471726587"></a><a name="en-us_topic_0000001060518078_b16471726587"></a>pendingIndex</strong> indicates that of the step to go. The return value is in <strong id="en-us_topic_0000001060518078_b20759101845911"><a name="en-us_topic_0000001060518078_b20759101845911"></a><a name="en-us_topic_0000001060518078_b20759101845911"></a>{pendingIndex:</strong><em id="en-us_topic_0000001060518078_i13961625125919"><a name="en-us_topic_0000001060518078_i13961625125919"></a><a name="en-us_topic_0000001060518078_i13961625125919"></a> pendingIndex</em><strong id="en-us_topic_0000001060518078_b1882982055918"><a name="en-us_topic_0000001060518078_b1882982055918"></a><a name="en-us_topic_0000001060518078_b1882982055918"></a>}</strong> format. You can use <strong id="en-us_topic_0000001060518078_b79512405598"><a name="en-us_topic_0000001060518078_b79512405598"></a><a name="en-us_topic_0000001060518078_b79512405598"></a>pendingIndex</strong> to specify a <strong id="en-us_topic_0000001060518078_b1235062917016"><a name="en-us_topic_0000001060518078_b1235062917016"></a><a name="en-us_topic_0000001060518078_b1235062917016"></a><stepper-item></strong> child component as the next step to go.</p> 583</td> 584</tr> 585<tr id="en-us_topic_0000001060518078_row914118186514"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060518078_p1414151817510"><a name="en-us_topic_0000001060518078_p1414151817510"></a><a name="en-us_topic_0000001060518078_p1414151817510"></a>back</p> 586</td> 587<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060518078_p16910122113429"><a name="en-us_topic_0000001060518078_p16910122113429"></a><a name="en-us_topic_0000001060518078_p16910122113429"></a>{ index: index, pendingIndex: pendingIndex }</p> 588</td> 589<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060518078_p714261895119"><a name="en-us_topic_0000001060518078_p714261895119"></a><a name="en-us_topic_0000001060518078_p714261895119"></a>Triggered when users click the previous (text) button. <strong id="en-us_topic_0000001060518078_b1620921210312"><a name="en-us_topic_0000001060518078_b1620921210312"></a><a name="en-us_topic_0000001060518078_b1620921210312"></a>index</strong> indicates the index of the current step, and <strong id="en-us_topic_0000001060518078_b1621511211318"><a name="en-us_topic_0000001060518078_b1621511211318"></a><a name="en-us_topic_0000001060518078_b1621511211318"></a>pendingIndex</strong> indicates that of the step to go. The return value is in Object:{ <strong id="en-us_topic_0000001060518078_b102171121532"><a name="en-us_topic_0000001060518078_b102171121532"></a><a name="en-us_topic_0000001060518078_b102171121532"></a>{pendingIndex:</strong><em id="en-us_topic_0000001060518078_i42187121636"><a name="en-us_topic_0000001060518078_i42187121636"></a><a name="en-us_topic_0000001060518078_i42187121636"></a> pendingIndex</em><strong id="en-us_topic_0000001060518078_b1622051211313"><a name="en-us_topic_0000001060518078_b1622051211313"></a><a name="en-us_topic_0000001060518078_b1622051211313"></a>}</strong> format. You can use <strong id="en-us_topic_0000001060518078_b822118128316"><a name="en-us_topic_0000001060518078_b822118128316"></a><a name="en-us_topic_0000001060518078_b822118128316"></a>pendingIndex</strong> to specify a <strong id="en-us_topic_0000001060518078_b192236121235"><a name="en-us_topic_0000001060518078_b192236121235"></a><a name="en-us_topic_0000001060518078_b192236121235"></a><stepper-item></strong> child component as the previous step.</p> 590</td> 591</tr> 592</tbody> 593</table> 594 595## Method<a name="en-us_topic_0000001060518078_section1954212182148"></a> 596 597<a name="en-us_topic_0000001060518078_table12793153991411"></a> 598<table><thead align="left"><tr id="en-us_topic_0000001060518078_row15793239141412"><th class="cellrowborder" valign="top" width="19.561956195619562%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001060518078_p9794143915141"><a name="en-us_topic_0000001060518078_p9794143915141"></a><a name="en-us_topic_0000001060518078_p9794143915141"></a>Name</p> 599</th> 600<th class="cellrowborder" valign="top" width="24.102410241024103%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001060518078_p107942395147"><a name="en-us_topic_0000001060518078_p107942395147"></a><a name="en-us_topic_0000001060518078_p107942395147"></a>Parameter</p> 601</th> 602<th class="cellrowborder" valign="top" width="56.33563356335634%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001060518078_p11794133913143"><a name="en-us_topic_0000001060518078_p11794133913143"></a><a name="en-us_topic_0000001060518078_p11794133913143"></a>Description</p> 603</th> 604</tr> 605</thead> 606<tbody><tr id="en-us_topic_0000001060518078_row157940399145"><td class="cellrowborder" valign="top" width="19.561956195619562%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060518078_p1479453913144"><a name="en-us_topic_0000001060518078_p1479453913144"></a><a name="en-us_topic_0000001060518078_p1479453913144"></a>setNextButtonStatus</p> 607</td> 608<td class="cellrowborder" valign="top" width="24.102410241024103%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060518078_p10794163914147"><a name="en-us_topic_0000001060518078_p10794163914147"></a><a name="en-us_topic_0000001060518078_p10794163914147"></a>{ status: string, label: label }</p> 609</td> 610<td class="cellrowborder" valign="top" width="56.33563356335634%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060518078_p12794143917141"><a name="en-us_topic_0000001060518078_p12794143917141"></a><a name="en-us_topic_0000001060518078_p12794143917141"></a>Sets the status of the next (text) button in this step navigator. Available <strong id="en-us_topic_0000001060518078_b29094326514"><a name="en-us_topic_0000001060518078_b29094326514"></a><a name="en-us_topic_0000001060518078_b29094326514"></a>status</strong> values are as follows:</p> 611<a name="en-us_topic_0000001060518078_ol12242138121713"></a><a name="en-us_topic_0000001060518078_ol12242138121713"></a><ol id="en-us_topic_0000001060518078_ol12242138121713"><li><strong id="en-us_topic_0000001060518078_b1032161115214"><a name="en-us_topic_0000001060518078_b1032161115214"></a><a name="en-us_topic_0000001060518078_b1032161115214"></a>normal</strong>: The next button is displayed normally and can navigate users to the next step when it is clicked.</li><li><strong id="en-us_topic_0000001060518078_b1661325920517"><a name="en-us_topic_0000001060518078_b1661325920517"></a><a name="en-us_topic_0000001060518078_b1661325920517"></a>disabled</strong>: The next button is grayed out and unavailable.</li><li><strong id="en-us_topic_0000001060518078_b873175710711"><a name="en-us_topic_0000001060518078_b873175710711"></a><a name="en-us_topic_0000001060518078_b873175710711"></a>waiting</strong>: The next button is not displayed, and a process bar is displayed instead.</li><li><strong id="en-us_topic_0000001060518078_b1990819331594"><a name="en-us_topic_0000001060518078_b1990819331594"></a><a name="en-us_topic_0000001060518078_b1990819331594"></a>skip</strong>: The skip button is displayed to allow users to skip all remaining steps.</li></ol> 612</td> 613</tr> 614</tbody> 615</table> 616 617## Example Code<a name="en-us_topic_0000001060518078_section15374183712313"></a> 618 619``` 620<!-- xxx.hml --> 621<div class = "container"> 622 <stepper class="stepper" id="mystepper" index="0" onnext="nextclick" onback="backclick"> 623 <stepper-item class ="stepperItem" label="{{label_1}}"> 624 <div class = "stepperItemContent" > 625 <text class = "text">First screen</text> 626 </div> 627 <button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button> 628 </stepper-item> 629 <stepper-item class ="stepperItem" label="{{label_2}}"> 630 <div class = "stepperItemContent" > 631 <text class = "text">Second screen</text> 632 </div> 633 <button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button> 634 </stepper-item> 635 <stepper-item class ="stepperItem" label="{{label_3}}"> 636 <div class = "stepperItemContent" > 637 <text class = "text">Third screen</text> 638 </div> 639 <button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button> 640 </stepper-item> 641 </stepper> 642</div> 643``` 644 645``` 646/* xxx.css */ 647.container { 648 margin-top: 20px; 649 flex-direction: column; 650 align-items: center; 651 height: 300px; 652} 653.stepperItem { 654 flex-direction: column; 655 align-items: center; 656} 657.stepperItemContent { 658 color: #0000ff; 659 font-size: 50px; 660 justify-content: center; 661} 662.button { 663 width: 60%; 664 margin-top: 30px; 665 justify-content: center; 666} 667``` 668 669``` 670// xxx.js 671export default { 672 data: { 673 label_1: 674 { 675 prevLabel: 'BACK', 676 nextLabel: 'NEXT', 677 status: 'normal' 678 }, 679 label_2: 680 { 681 prevLabel: 'BACK', 682 nextLabel: 'NEXT', 683 status: 'normal' 684 }, 685 label_3: 686 { 687 prevLabel: 'BACK', 688 nextLabel: 'NEXT', 689 status: 'normal' 690 }, 691 }, 692 setRightButton(e) { 693 this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'}); 694 }, 695 nextclick(e) { 696 var index = { 697 pendingIndex: e.pendingIndex 698 } 699 return index; 700 }, 701 backclick(e) { 702 var index = { 703 pendingIndex: e.pendingIndex 704 } 705 return index; 706 }, 707} 708``` 709 710 711 712
