1# grid-col<a name="EN-US_TOPIC_0000001162414641"></a> 2 3- [Permission List](#en-us_topic_0000001063130862_section11257113618419) 4- [Child Component](#en-us_topic_0000001063130862_section9288143101012) 5- [Attribute](#en-us_topic_0000001063130862_section1976213199113) 6- [Style](#en-us_topic_0000001063130862_section1948816404128) 7- [Event](#en-us_topic_0000001063130862_section94351031102113) 8- [Example Code](#en-us_topic_0000001063130862_section2021865273710) 9 10The **<grid-col\>** is the child component of the **<grid-row\>** container. 11 12## Permission List<a name="en-us_topic_0000001063130862_section11257113618419"></a> 13 14None 15 16## Child Component<a name="en-us_topic_0000001063130862_section9288143101012"></a> 17 18Supported 19 20## Attribute<a name="en-us_topic_0000001063130862_section1976213199113"></a> 21 22<a name="en-us_topic_0000001063130862_table20633101642315"></a> 23<table><thead align="left"><tr id="en-us_topic_0000001063130862_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a>Name</p> 24</th> 25<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a>Type</p> 26</th> 27<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"></a>Default Value</p> 28</th> 29<th class="cellrowborder" valign="top" width="7.449999999999999%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001063130862_p824610360217"><a name="en-us_topic_0000001063130862_p824610360217"></a><a name="en-us_topic_0000001063130862_p824610360217"></a>Mandatory</p> 30</th> 31<th class="cellrowborder" valign="top" width="35.83%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"></a>Description</p> 32</th> 33</tr> 34</thead> 35<tbody><tr id="en-us_topic_0000001063130862_row61510615123"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p13694117171213"><a name="en-us_topic_0000001063130862_p13694117171213"></a><a name="en-us_topic_0000001063130862_p13694117171213"></a>xs</p> 36</td> 37<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p17694191719123"><a name="en-us_topic_0000001063130862_p17694191719123"></a><a name="en-us_topic_0000001063130862_p17694191719123"></a>number|object</p> 38</td> 39<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p9694171712125"><a name="en-us_topic_0000001063130862_p9694171712125"></a><a name="en-us_topic_0000001063130862_p9694171712125"></a>-</p> 40</td> 41<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p769441711125"><a name="en-us_topic_0000001063130862_p769441711125"></a><a name="en-us_topic_0000001063130862_p769441711125"></a>No</p> 42</td> 43<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p3694217141213"><a name="en-us_topic_0000001063130862_p3694217141213"></a><a name="en-us_topic_0000001063130862_p3694217141213"></a>Number of columns occupied by this item and offset columns when <strong id="en-us_topic_0000001063130862_b2730139165"><a name="en-us_topic_0000001063130862_b2730139165"></a><a name="en-us_topic_0000001063130862_b2730139165"></a>sizetype</strong> is <strong id="en-us_topic_0000001063130862_b181713015162"><a name="en-us_topic_0000001063130862_b181713015162"></a><a name="en-us_topic_0000001063130862_b181713015162"></a>xs</strong>. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, <strong id="en-us_topic_0000001063130862_b19696173081219"><a name="en-us_topic_0000001063130862_b19696173081219"></a><a name="en-us_topic_0000001063130862_b19696173081219"></a>{"span": 1, "offset": 0}</strong>.</p> 44</td> 45</tr> 46<tr id="en-us_topic_0000001063130862_row683183131212"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p15694417181219"><a name="en-us_topic_0000001063130862_p15694417181219"></a><a name="en-us_topic_0000001063130862_p15694417181219"></a>sm</p> 47</td> 48<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p15694141741210"><a name="en-us_topic_0000001063130862_p15694141741210"></a><a name="en-us_topic_0000001063130862_p15694141741210"></a>number|object</p> 49</td> 50<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p66941517171212"><a name="en-us_topic_0000001063130862_p66941517171212"></a><a name="en-us_topic_0000001063130862_p66941517171212"></a>-</p> 51</td> 52<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p4694111714123"><a name="en-us_topic_0000001063130862_p4694111714123"></a><a name="en-us_topic_0000001063130862_p4694111714123"></a>No</p> 53</td> 54<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p17694117171211"><a name="en-us_topic_0000001063130862_p17694117171211"></a><a name="en-us_topic_0000001063130862_p17694117171211"></a>Number of columns occupied by this item and offset columns when <strong id="en-us_topic_0000001063130862_b964791471919"><a name="en-us_topic_0000001063130862_b964791471919"></a><a name="en-us_topic_0000001063130862_b964791471919"></a>sizetype</strong> is <strong id="en-us_topic_0000001063130862_b0648714191910"><a name="en-us_topic_0000001063130862_b0648714191910"></a><a name="en-us_topic_0000001063130862_b0648714191910"></a>sm</strong>. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, <strong id="en-us_topic_0000001063130862_b464831451918"><a name="en-us_topic_0000001063130862_b464831451918"></a><a name="en-us_topic_0000001063130862_b464831451918"></a>{"span": 1, "offset": 0}</strong>.</p> 55</td> 56</tr> 57<tr id="en-us_topic_0000001063130862_row1211310592118"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p4694161710123"><a name="en-us_topic_0000001063130862_p4694161710123"></a><a name="en-us_topic_0000001063130862_p4694161710123"></a>md</p> 58</td> 59<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p569551751220"><a name="en-us_topic_0000001063130862_p569551751220"></a><a name="en-us_topic_0000001063130862_p569551751220"></a>number|object</p> 60</td> 61<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p86952172121"><a name="en-us_topic_0000001063130862_p86952172121"></a><a name="en-us_topic_0000001063130862_p86952172121"></a>-</p> 62</td> 63<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p3695171711214"><a name="en-us_topic_0000001063130862_p3695171711214"></a><a name="en-us_topic_0000001063130862_p3695171711214"></a>No</p> 64</td> 65<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p66953176126"><a name="en-us_topic_0000001063130862_p66953176126"></a><a name="en-us_topic_0000001063130862_p66953176126"></a>Number of columns occupied by this item and offset columns when <strong id="en-us_topic_0000001063130862_b1331803320193"><a name="en-us_topic_0000001063130862_b1331803320193"></a><a name="en-us_topic_0000001063130862_b1331803320193"></a>sizetype</strong> is <strong id="en-us_topic_0000001063130862_b9324153381911"><a name="en-us_topic_0000001063130862_b9324153381911"></a><a name="en-us_topic_0000001063130862_b9324153381911"></a>md</strong>. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, <strong id="en-us_topic_0000001063130862_b173250330195"><a name="en-us_topic_0000001063130862_b173250330195"></a><a name="en-us_topic_0000001063130862_b173250330195"></a>{"span": 1, "offset": 0}</strong>.</p> 66</td> 67</tr> 68<tr id="en-us_topic_0000001063130862_row9263155681117"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p10695101717122"><a name="en-us_topic_0000001063130862_p10695101717122"></a><a name="en-us_topic_0000001063130862_p10695101717122"></a>lg</p> 69</td> 70<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p5695131701217"><a name="en-us_topic_0000001063130862_p5695131701217"></a><a name="en-us_topic_0000001063130862_p5695131701217"></a>number|object</p> 71</td> 72<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p1469501714124"><a name="en-us_topic_0000001063130862_p1469501714124"></a><a name="en-us_topic_0000001063130862_p1469501714124"></a>-</p> 73</td> 74<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p1769511715127"><a name="en-us_topic_0000001063130862_p1769511715127"></a><a name="en-us_topic_0000001063130862_p1769511715127"></a>No</p> 75</td> 76<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p8695111741217"><a name="en-us_topic_0000001063130862_p8695111741217"></a><a name="en-us_topic_0000001063130862_p8695111741217"></a>Number of columns occupied by this item and offset columns when <strong id="en-us_topic_0000001063130862_b148141243141918"><a name="en-us_topic_0000001063130862_b148141243141918"></a><a name="en-us_topic_0000001063130862_b148141243141918"></a>sizetype</strong> is <strong id="en-us_topic_0000001063130862_b1981914316199"><a name="en-us_topic_0000001063130862_b1981914316199"></a><a name="en-us_topic_0000001063130862_b1981914316199"></a>lg</strong>. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, <strong id="en-us_topic_0000001063130862_b8820204320198"><a name="en-us_topic_0000001063130862_b8820204320198"></a><a name="en-us_topic_0000001063130862_b8820204320198"></a>{"span": 1, "offset": 0}</strong>.</p> 77</td> 78</tr> 79<tr id="en-us_topic_0000001063130862_row1236753141115"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p166957175127"><a name="en-us_topic_0000001063130862_p166957175127"></a><a name="en-us_topic_0000001063130862_p166957175127"></a>span</p> 80</td> 81<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p1569561741210"><a name="en-us_topic_0000001063130862_p1569561741210"></a><a name="en-us_topic_0000001063130862_p1569561741210"></a>number</p> 82</td> 83<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p17695201719121"><a name="en-us_topic_0000001063130862_p17695201719121"></a><a name="en-us_topic_0000001063130862_p17695201719121"></a>1</p> 84</td> 85<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p156951617101214"><a name="en-us_topic_0000001063130862_p156951617101214"></a><a name="en-us_topic_0000001063130862_p156951617101214"></a>No</p> 86</td> 87<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p1169581712121"><a name="en-us_topic_0000001063130862_p1169581712121"></a><a name="en-us_topic_0000001063130862_p1169581712121"></a>Default number of columns occupied by this item when no breakpoint is set.</p> 88</td> 89</tr> 90<tr id="en-us_topic_0000001063130862_row1348115011117"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p12695141741216"><a name="en-us_topic_0000001063130862_p12695141741216"></a><a name="en-us_topic_0000001063130862_p12695141741216"></a>offset</p> 91</td> 92<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p0695131711124"><a name="en-us_topic_0000001063130862_p0695131711124"></a><a name="en-us_topic_0000001063130862_p0695131711124"></a>number</p> 93</td> 94<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p8695111710129"><a name="en-us_topic_0000001063130862_p8695111710129"></a><a name="en-us_topic_0000001063130862_p8695111710129"></a>0</p> 95</td> 96<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p15695111781220"><a name="en-us_topic_0000001063130862_p15695111781220"></a><a name="en-us_topic_0000001063130862_p15695111781220"></a>No</p> 97</td> 98<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p2069531710128"><a name="en-us_topic_0000001063130862_p2069531710128"></a><a name="en-us_topic_0000001063130862_p2069531710128"></a>Default number of offset columns in the container layout direction when <strong id="en-us_topic_0000001063130862_b4434112162515"><a name="en-us_topic_0000001063130862_b4434112162515"></a><a name="en-us_topic_0000001063130862_b4434112162515"></a>"offset"</strong> is not set for a specific <strong id="en-us_topic_0000001063130862_b1253195119225"><a name="en-us_topic_0000001063130862_b1253195119225"></a><a name="en-us_topic_0000001063130862_b1253195119225"></a>sizetype</strong>.</p> 99</td> 100</tr> 101<tr id="en-us_topic_0000001063130862_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"></a>id</p> 102</td> 103<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"></a>string</p> 104</td> 105<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"></a>-</p> 106</td> 107<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p42461736102118"><a name="en-us_topic_0000001063130862_p42461736102118"></a><a name="en-us_topic_0000001063130862_p42461736102118"></a>No</p> 108</td> 109<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"></a>Unique ID of a component.</p> 110</td> 111</tr> 112<tr id="en-us_topic_0000001063130862_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"></a>style</p> 113</td> 114<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"></a>string</p> 115</td> 116<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"></a>-</p> 117</td> 118<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p17246836142119"><a name="en-us_topic_0000001063130862_p17246836142119"></a><a name="en-us_topic_0000001063130862_p17246836142119"></a>No</p> 119</td> 120<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"></a>Style declaration of a component.</p> 121</td> 122</tr> 123<tr id="en-us_topic_0000001063130862_row10634131610230"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"></a>class</p> 124</td> 125<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"></a>string</p> 126</td> 127<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"></a>-</p> 128</td> 129<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p324614367213"><a name="en-us_topic_0000001063130862_p324614367213"></a><a name="en-us_topic_0000001063130862_p324614367213"></a>No</p> 130</td> 131<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"></a>Style class of a component, which is used to refer to a style table.</p> 132</td> 133</tr> 134<tr id="en-us_topic_0000001063130862_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_p1786251117156"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_p1786251117156"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_p1786251117156"></a>ref</p> 135</td> 136<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_p1086241119157"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_p1086241119157"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_p1086241119157"></a>string</p> 137</td> 138<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_p586281111151"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_p586281111151"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_p586281111151"></a>-</p> 139</td> 140<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p1624612362219"><a name="en-us_topic_0000001063130862_p1624612362219"></a><a name="en-us_topic_0000001063130862_p1624612362219"></a>No</p> 141</td> 142<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_p113416153342"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_p113416153342"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_p113416153342"></a>Used to register reference information of child elements<span id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_ph5815920163518"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_ph5815920163518"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_ph5815920163518"></a> or child components</span>. The reference information is registered with the parent component on <strong id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_b08212202354"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_b08212202354"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_b08212202354"></a>$refs</strong>.</p> 143</td> 144</tr> 145<tr id="en-us_topic_0000001063130862_row1863421642313"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"></a>disabled</p> 146</td> 147<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"></a>boolean</p> 148</td> 149<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"></a>false</p> 150</td> 151<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p192476368214"><a name="en-us_topic_0000001063130862_p192476368214"></a><a name="en-us_topic_0000001063130862_p192476368214"></a>No</p> 152</td> 153<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"></a>Whether the component is disabled. If it is disabled, it cannot respond to user interaction.</p> 154</td> 155</tr> 156<tr id="en-us_topic_0000001063130862_row1263451617236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"></a>data</p> 157</td> 158<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"></a>string</p> 159</td> 160<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"></a>-</p> 161</td> 162<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p22471736132114"><a name="en-us_topic_0000001063130862_p22471736132114"></a><a name="en-us_topic_0000001063130862_p22471736132114"></a>No</p> 163</td> 164<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"></a>Attribute set for components to facilitate data storage and reading.</p> 165</td> 166</tr> 167</tbody> 168</table> 169 170## Style<a name="en-us_topic_0000001063130862_section1948816404128"></a> 171 172<a name="en-us_topic_0000001063130862_table19959164918413"></a> 173<table><thead align="left"><tr id="en-us_topic_0000001063130862_row695974912415"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"></a>Name</p> 174</th> 175<th class="cellrowborder" valign="top" width="12.218778122187782%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"></a>Type</p> 176</th> 177<th class="cellrowborder" valign="top" width="13.03869613038696%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"></a>Default Value</p> 178</th> 179<th class="cellrowborder" valign="top" width="8.4991500849915%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001063130862_p0959184916417"><a name="en-us_topic_0000001063130862_p0959184916417"></a><a name="en-us_topic_0000001063130862_p0959184916417"></a>Mandatory</p> 180</th> 181<th class="cellrowborder" valign="top" width="43.12568743125688%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"></a>Description</p> 182</th> 183</tr> 184</thead> 185<tbody><tr id="en-us_topic_0000001063130862_row72422774310"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p106156422433"><a name="en-us_topic_0000001063130862_p106156422433"></a><a name="en-us_topic_0000001063130862_p106156422433"></a>flex-direction</p> 186</td> 187<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p46158429435"><a name="en-us_topic_0000001063130862_p46158429435"></a><a name="en-us_topic_0000001063130862_p46158429435"></a>string</p> 188</td> 189<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p961534217431"><a name="en-us_topic_0000001063130862_p961534217431"></a><a name="en-us_topic_0000001063130862_p961534217431"></a>row</p> 190</td> 191<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p86151342174319"><a name="en-us_topic_0000001063130862_p86151342174319"></a><a name="en-us_topic_0000001063130862_p86151342174319"></a>No</p> 192</td> 193<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p9615134214436"><a name="en-us_topic_0000001063130862_p9615134214436"></a><a name="en-us_topic_0000001063130862_p9615134214436"></a>Main axis direction of the container. Available values are as follows:</p> 194<a name="en-us_topic_0000001063130862_ul10615342184320"></a><a name="en-us_topic_0000001063130862_ul10615342184320"></a><ul id="en-us_topic_0000001063130862_ul10615342184320"><li><strong id="en-us_topic_0000001063130862_b1376512564223"><a name="en-us_topic_0000001063130862_b1376512564223"></a><a name="en-us_topic_0000001063130862_b1376512564223"></a>column</strong>: Items are placed vertically from top to bottom.</li><li><strong id="en-us_topic_0000001063130862_b461175812215"><a name="en-us_topic_0000001063130862_b461175812215"></a><a name="en-us_topic_0000001063130862_b461175812215"></a>row</strong>: Items are placed horizontally from left to right.</li></ul> 195</td> 196</tr> 197<tr id="en-us_topic_0000001063130862_row324311719436"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p12616104254316"><a name="en-us_topic_0000001063130862_p12616104254316"></a><a name="en-us_topic_0000001063130862_p12616104254316"></a>flex-wrap</p> 198</td> 199<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p1861624216433"><a name="en-us_topic_0000001063130862_p1861624216433"></a><a name="en-us_topic_0000001063130862_p1861624216433"></a>string</p> 200</td> 201<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p26161242174317"><a name="en-us_topic_0000001063130862_p26161242174317"></a><a name="en-us_topic_0000001063130862_p26161242174317"></a>nowrap</p> 202</td> 203<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p116166424431"><a name="en-us_topic_0000001063130862_p116166424431"></a><a name="en-us_topic_0000001063130862_p116166424431"></a>No</p> 204</td> 205<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p13616842134313"><a name="en-us_topic_0000001063130862_p13616842134313"></a><a name="en-us_topic_0000001063130862_p13616842134313"></a>Whether items in the container are displayed in a single axis or multiple axes. Currently, dynamic modification is not supported. Available values are as follows:</p> 206<a name="en-us_topic_0000001063130862_ul136169424431"></a><a name="en-us_topic_0000001063130862_ul136169424431"></a><ul id="en-us_topic_0000001063130862_ul136169424431"><li><strong id="en-us_topic_0000001063130862_b1899950182014"><a name="en-us_topic_0000001063130862_b1899950182014"></a><a name="en-us_topic_0000001063130862_b1899950182014"></a>nowrap</strong>: Items are displayed on a single axis.</li><li><strong id="en-us_topic_0000001063130862_b18315182162018"><a name="en-us_topic_0000001063130862_b18315182162018"></a><a name="en-us_topic_0000001063130862_b18315182162018"></a>wrap</strong>: Items are displayed on multiple axes.</li></ul> 207</td> 208</tr> 209<tr id="en-us_topic_0000001063130862_row11243147194319"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p961654212431"><a name="en-us_topic_0000001063130862_p961654212431"></a><a name="en-us_topic_0000001063130862_p961654212431"></a>justify-content</p> 210</td> 211<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p86163428431"><a name="en-us_topic_0000001063130862_p86163428431"></a><a name="en-us_topic_0000001063130862_p86163428431"></a>string</p> 212</td> 213<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p26161142184319"><a name="en-us_topic_0000001063130862_p26161142184319"></a><a name="en-us_topic_0000001063130862_p26161142184319"></a>flex-start</p> 214</td> 215<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p1561694284310"><a name="en-us_topic_0000001063130862_p1561694284310"></a><a name="en-us_topic_0000001063130862_p1561694284310"></a>No</p> 216</td> 217<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p176161342184317"><a name="en-us_topic_0000001063130862_p176161342184317"></a><a name="en-us_topic_0000001063130862_p176161342184317"></a>How items are aligned along the main axis of the current row in the container. Available values are as follows:</p> 218<a name="en-us_topic_0000001063130862_ul5616174210438"></a><a name="en-us_topic_0000001063130862_ul5616174210438"></a><ul id="en-us_topic_0000001063130862_ul5616174210438"><li><strong id="en-us_topic_0000001063130862_b1442428202016"><a name="en-us_topic_0000001063130862_b1442428202016"></a><a name="en-us_topic_0000001063130862_b1442428202016"></a>flex-start</strong>: Items are packed towards the start row.</li><li><strong id="en-us_topic_0000001063130862_b233318913202"><a name="en-us_topic_0000001063130862_b233318913202"></a><a name="en-us_topic_0000001063130862_b233318913202"></a>flex-end</strong>: Items are packed towards the end row.</li><li><strong id="en-us_topic_0000001063130862_b162541410172015"><a name="en-us_topic_0000001063130862_b162541410172015"></a><a name="en-us_topic_0000001063130862_b162541410172015"></a>center</strong>: Items are centered along the row.</li><li><strong id="en-us_topic_0000001063130862_b131513117202"><a name="en-us_topic_0000001063130862_b131513117202"></a><a name="en-us_topic_0000001063130862_b131513117202"></a>space-between</strong>: Items are positioned with space between the rows.</li><li><strong id="en-us_topic_0000001063130862_b1021031292014"><a name="en-us_topic_0000001063130862_b1021031292014"></a><a name="en-us_topic_0000001063130862_b1021031292014"></a>space-around</strong>: Items are positioned with space before, between, and after the rows.</li></ul> 219</td> 220</tr> 221<tr id="en-us_topic_0000001063130862_row3243270439"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p12617942184311"><a name="en-us_topic_0000001063130862_p12617942184311"></a><a name="en-us_topic_0000001063130862_p12617942184311"></a>align-items</p> 222</td> 223<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p15617194264312"><a name="en-us_topic_0000001063130862_p15617194264312"></a><a name="en-us_topic_0000001063130862_p15617194264312"></a>string</p> 224</td> 225<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p061744213433"><a name="en-us_topic_0000001063130862_p061744213433"></a><a name="en-us_topic_0000001063130862_p061744213433"></a>stretch</p> 226</td> 227<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p12617154214437"><a name="en-us_topic_0000001063130862_p12617154214437"></a><a name="en-us_topic_0000001063130862_p12617154214437"></a>No</p> 228</td> 229<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p9617542124318"><a name="en-us_topic_0000001063130862_p9617542124318"></a><a name="en-us_topic_0000001063130862_p9617542124318"></a>How items are aligned along the cross axis of the current row in the container. Available values are as follows:</p> 230<a name="en-us_topic_0000001063130862_ul166171442134312"></a><a name="en-us_topic_0000001063130862_ul166171442134312"></a><ul id="en-us_topic_0000001063130862_ul166171442134312"><li><strong id="en-us_topic_0000001063130862_b52351418182019"><a name="en-us_topic_0000001063130862_b52351418182019"></a><a name="en-us_topic_0000001063130862_b52351418182019"></a>stretch</strong>: Items are stretched to the same height or width as the container in the cross axis direction. </li><li><strong id="en-us_topic_0000001063130862_b19675172015207"><a name="en-us_topic_0000001063130862_b19675172015207"></a><a name="en-us_topic_0000001063130862_b19675172015207"></a>flex-start</strong>: Items are aligned to the start of the cross axis.</li><li><strong id="en-us_topic_0000001063130862_b2654721132018"><a name="en-us_topic_0000001063130862_b2654721132018"></a><a name="en-us_topic_0000001063130862_b2654721132018"></a>flex-end</strong>: Items are aligned to the end of the cross axis.</li><li><strong id="en-us_topic_0000001063130862_b4585102215204"><a name="en-us_topic_0000001063130862_b4585102215204"></a><a name="en-us_topic_0000001063130862_b4585102215204"></a>center</strong>: Items are aligned in the middle of the cross axis.</li></ul> 231</td> 232</tr> 233<tr id="en-us_topic_0000001063130862_row924418734317"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p661810427433"><a name="en-us_topic_0000001063130862_p661810427433"></a><a name="en-us_topic_0000001063130862_p661810427433"></a>align-content</p> 234</td> 235<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p186181042174316"><a name="en-us_topic_0000001063130862_p186181042174316"></a><a name="en-us_topic_0000001063130862_p186181042174316"></a>string</p> 236</td> 237<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p19618144284315"><a name="en-us_topic_0000001063130862_p19618144284315"></a><a name="en-us_topic_0000001063130862_p19618144284315"></a>flex-start</p> 238</td> 239<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p461804254314"><a name="en-us_topic_0000001063130862_p461804254314"></a><a name="en-us_topic_0000001063130862_p461804254314"></a>No</p> 240</td> 241<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p13619134216439"><a name="en-us_topic_0000001063130862_p13619134216439"></a><a name="en-us_topic_0000001063130862_p13619134216439"></a>Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:</p> 242<a name="en-us_topic_0000001063130862_ul56191424436"></a><a name="en-us_topic_0000001063130862_ul56191424436"></a><ul id="en-us_topic_0000001063130862_ul56191424436"><li><strong id="en-us_topic_0000001063130862_b232014272206"><a name="en-us_topic_0000001063130862_b232014272206"></a><a name="en-us_topic_0000001063130862_b232014272206"></a>flex-start</strong>: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.</li><li><strong id="en-us_topic_0000001063130862_b034111308204"><a name="en-us_topic_0000001063130862_b034111308204"></a><a name="en-us_topic_0000001063130862_b034111308204"></a>flex-end</strong>: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.</li><li><strong id="en-us_topic_0000001063130862_b58521334203"><a name="en-us_topic_0000001063130862_b58521334203"></a><a name="en-us_topic_0000001063130862_b58521334203"></a>center</strong>: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first row is equal to the spacing between the end of the container's cross axis and the last row.</li><li><strong id="en-us_topic_0000001063130862_b126908361201"><a name="en-us_topic_0000001063130862_b126908361201"></a><a name="en-us_topic_0000001063130862_b126908361201"></a>space-between</strong>: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.</li><li><strong id="en-us_topic_0000001063130862_b19242184011208"><a name="en-us_topic_0000001063130862_b19242184011208"></a><a name="en-us_topic_0000001063130862_b19242184011208"></a>space-around</strong>: All rows are evenly distributed in the container, and the spacing between two adjacent rows is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.</li></ul> 243</td> 244</tr> 245<tr id="en-us_topic_0000001063130862_row4448901436"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p166198429435"><a name="en-us_topic_0000001063130862_p166198429435"></a><a name="en-us_topic_0000001063130862_p166198429435"></a>display</p> 246</td> 247<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p86191542144318"><a name="en-us_topic_0000001063130862_p86191542144318"></a><a name="en-us_topic_0000001063130862_p86191542144318"></a>string</p> 248</td> 249<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p5619184218430"><a name="en-us_topic_0000001063130862_p5619184218430"></a><a name="en-us_topic_0000001063130862_p5619184218430"></a>flex</p> 250</td> 251<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p12619124234310"><a name="en-us_topic_0000001063130862_p12619124234310"></a><a name="en-us_topic_0000001063130862_p12619124234310"></a>No</p> 252</td> 253<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p1861914421435"><a name="en-us_topic_0000001063130862_p1861914421435"></a><a name="en-us_topic_0000001063130862_p1861914421435"></a>Type of the view box of the element. Currently, dynamic modification is not supported. Text alignment mode. Available values include:</p> 254<a name="en-us_topic_0000001063130862_ul861920428436"></a><a name="en-us_topic_0000001063130862_ul861920428436"></a><ul id="en-us_topic_0000001063130862_ul861920428436"><li><strong id="en-us_topic_0000001063130862_b616734818208"><a name="en-us_topic_0000001063130862_b616734818208"></a><a name="en-us_topic_0000001063130862_b616734818208"></a>flex</strong>: flexible layout</li><li><strong id="en-us_topic_0000001063130862_b62721549192011"><a name="en-us_topic_0000001063130862_b62721549192011"></a><a name="en-us_topic_0000001063130862_b62721549192011"></a>grid</strong>: grid layout</li><li><strong id="en-us_topic_0000001063130862_b835965032015"><a name="en-us_topic_0000001063130862_b835965032015"></a><a name="en-us_topic_0000001063130862_b835965032015"></a>none</strong>: This item is not rendered.</li></ul> 255</td> 256</tr> 257<tr id="en-us_topic_0000001063130862_row77805615421"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p5620184220430"><a name="en-us_topic_0000001063130862_p5620184220430"></a><a name="en-us_topic_0000001063130862_p5620184220430"></a>grid-template-[columns|rows]</p> 258</td> 259<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p16206428434"><a name="en-us_topic_0000001063130862_p16206428434"></a><a name="en-us_topic_0000001063130862_p16206428434"></a>string</p> 260</td> 261<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p146205423435"><a name="en-us_topic_0000001063130862_p146205423435"></a><a name="en-us_topic_0000001063130862_p146205423435"></a>1 row, 1 column</p> 262</td> 263<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p6620194215437"><a name="en-us_topic_0000001063130862_p6620194215437"></a><a name="en-us_topic_0000001063130862_p6620194215437"></a>No</p> 264</td> 265<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p362010429434"><a name="en-us_topic_0000001063130862_p362010429434"></a><a name="en-us_topic_0000001063130862_p362010429434"></a>Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when <strong id="en-us_topic_0000001063130862_b10585155511205"><a name="en-us_topic_0000001063130862_b10585155511205"></a><a name="en-us_topic_0000001063130862_b10585155511205"></a>display</strong> is set to <strong id="en-us_topic_0000001063130862_b105911555201"><a name="en-us_topic_0000001063130862_b105911555201"></a><a name="en-us_topic_0000001063130862_b105911555201"></a>grid</strong>.</p> 266<p id="en-us_topic_0000001063130862_p176201942154312"><a name="en-us_topic_0000001063130862_p176201942154312"></a><a name="en-us_topic_0000001063130862_p176201942154312"></a>For example, set <strong id="en-us_topic_0000001063130862_b199088562205"><a name="en-us_topic_0000001063130862_b199088562205"></a><a name="en-us_topic_0000001063130862_b199088562205"></a>grid-template-columns</strong> to:</p> 267<p id="en-us_topic_0000001063130862_p062024213430"><a name="en-us_topic_0000001063130862_p062024213430"></a><a name="en-us_topic_0000001063130862_p062024213430"></a>(1) <strong id="en-us_topic_0000001063130862_b9433155813209"><a name="en-us_topic_0000001063130862_b9433155813209"></a><a name="en-us_topic_0000001063130862_b9433155813209"></a>50px 100px 60px</strong>: There are three columns. The first column is 50 px, the second column is 100 px, and the third column is 60 px.</p> 268<p id="en-us_topic_0000001063130862_p126201742204315"><a name="en-us_topic_0000001063130862_p126201742204315"></a><a name="en-us_topic_0000001063130862_p126201742204315"></a>(2) <strong id="en-us_topic_0000001063130862_b161711008212"><a name="en-us_topic_0000001063130862_b161711008212"></a><a name="en-us_topic_0000001063130862_b161711008212"></a>1fr 1fr 2fr</strong>: There are three columns, and the width allowed by the parent component is divided into four equal shares. The first column occupies one share, the second column occupies one share, and the third column occupies two shares.</p> 269<p id="en-us_topic_0000001063130862_p6620142164312"><a name="en-us_topic_0000001063130862_p6620142164312"></a><a name="en-us_topic_0000001063130862_p6620142164312"></a>(3) <strong id="en-us_topic_0000001063130862_b291228214"><a name="en-us_topic_0000001063130862_b291228214"></a><a name="en-us_topic_0000001063130862_b291228214"></a>30% 20% 50%</strong>: There are three columns. The first column occupies 30% of the total width allowed by the parent component, the second column occupies 20%, and the third column occupies 50%.</p> 270<p id="en-us_topic_0000001063130862_p10620114264315"><a name="en-us_topic_0000001063130862_p10620114264315"></a><a name="en-us_topic_0000001063130862_p10620114264315"></a>(4) <strong id="en-us_topic_0000001063130862_b118014510216"><a name="en-us_topic_0000001063130862_b118014510216"></a><a name="en-us_topic_0000001063130862_b118014510216"></a>repeat (2,100px)</strong>: There are two columns. The first column is 100 px, and the second column is 100 px.</p> 271<p id="en-us_topic_0000001063130862_p4620164212437"><a name="en-us_topic_0000001063130862_p4620164212437"></a><a name="en-us_topic_0000001063130862_p4620164212437"></a>(5) <strong id="en-us_topic_0000001063130862_b4921587212"><a name="en-us_topic_0000001063130862_b4921587212"></a><a name="en-us_topic_0000001063130862_b4921587212"></a>auto 1fr 1fr</strong>: There are three columns. The first column is adaptive to the width required by its child components. The remaining space is divided into two equal shares, one share occupied by each of the two columns.</p> 272</td> 273</tr> 274<tr id="en-us_topic_0000001063130862_row8906194914426"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p1462094219433"><a name="en-us_topic_0000001063130862_p1462094219433"></a><a name="en-us_topic_0000001063130862_p1462094219433"></a>grid-[columns|rows]-gap</p> 275</td> 276<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p1762094215431"><a name="en-us_topic_0000001063130862_p1762094215431"></a><a name="en-us_topic_0000001063130862_p1762094215431"></a><length></p> 277</td> 278<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p16621114219434"><a name="en-us_topic_0000001063130862_p16621114219434"></a><a name="en-us_topic_0000001063130862_p16621114219434"></a>0</p> 279</td> 280<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p0621144214313"><a name="en-us_topic_0000001063130862_p0621144214313"></a><a name="en-us_topic_0000001063130862_p0621144214313"></a>No</p> 281</td> 282<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p5621164210433"><a name="en-us_topic_0000001063130862_p5621164210433"></a><a name="en-us_topic_0000001063130862_p5621164210433"></a>Size of the gap between two consecutive rows or columns in a grid layout. You can also use <strong id="en-us_topic_0000001063130862_b12431413218"><a name="en-us_topic_0000001063130862_b12431413218"></a><a name="en-us_topic_0000001063130862_b12431413218"></a>grid-gap</strong> to set the same size of the gap between rows and columns. This attribute is valid only when <strong id="en-us_topic_0000001063130862_b173311412210"><a name="en-us_topic_0000001063130862_b173311412210"></a><a name="en-us_topic_0000001063130862_b173311412210"></a>display</strong> is set to <strong id="en-us_topic_0000001063130862_b333214202117"><a name="en-us_topic_0000001063130862_b333214202117"></a><a name="en-us_topic_0000001063130862_b333214202117"></a>grid</strong>.</p> 283</td> 284</tr> 285<tr id="en-us_topic_0000001063130862_row63681446134219"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p56214422438"><a name="en-us_topic_0000001063130862_p56214422438"></a><a name="en-us_topic_0000001063130862_p56214422438"></a>grid-row-[start|end]</p> 286</td> 287<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p6621242164316"><a name="en-us_topic_0000001063130862_p6621242164316"></a><a name="en-us_topic_0000001063130862_p6621242164316"></a>number</p> 288</td> 289<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p762154294314"><a name="en-us_topic_0000001063130862_p762154294314"></a><a name="en-us_topic_0000001063130862_p762154294314"></a>-</p> 290</td> 291<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p1962114294317"><a name="en-us_topic_0000001063130862_p1962114294317"></a><a name="en-us_topic_0000001063130862_p1962114294317"></a>No</p> 292</td> 293<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p4621124244316"><a name="en-us_topic_0000001063130862_p4621124244316"></a><a name="en-us_topic_0000001063130862_p4621124244316"></a>Start and end row numbers of the current item in the grid layout. This attribute is valid only when <strong id="en-us_topic_0000001063130862_b10351201882119"><a name="en-us_topic_0000001063130862_b10351201882119"></a><a name="en-us_topic_0000001063130862_b10351201882119"></a>display</strong> of the parent component is <strong id="en-us_topic_0000001063130862_b1435618186213"><a name="en-us_topic_0000001063130862_b1435618186213"></a><a name="en-us_topic_0000001063130862_b1435618186213"></a>grid</strong>. (The <strong id="en-us_topic_0000001063130862_b435641819210"><a name="en-us_topic_0000001063130862_b435641819210"></a><a name="en-us_topic_0000001063130862_b435641819210"></a>display</strong> attribute of the parent component can be set to <strong id="en-us_topic_0000001063130862_b735718181213"><a name="en-us_topic_0000001063130862_b735718181213"></a><a name="en-us_topic_0000001063130862_b735718181213"></a>grid</strong> only for the <strong id="en-us_topic_0000001063130862_b83583181217"><a name="en-us_topic_0000001063130862_b83583181217"></a><a name="en-us_topic_0000001063130862_b83583181217"></a><div></strong> container.)</p> 294</td> 295</tr> 296<tr id="en-us_topic_0000001063130862_row1842574317422"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p1362154264312"><a name="en-us_topic_0000001063130862_p1362154264312"></a><a name="en-us_topic_0000001063130862_p1362154264312"></a>grid-column-[start|end]</p> 297</td> 298<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p2621174211439"><a name="en-us_topic_0000001063130862_p2621174211439"></a><a name="en-us_topic_0000001063130862_p2621174211439"></a>number</p> 299</td> 300<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p1621124212439"><a name="en-us_topic_0000001063130862_p1621124212439"></a><a name="en-us_topic_0000001063130862_p1621124212439"></a>-</p> 301</td> 302<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p15621124214313"><a name="en-us_topic_0000001063130862_p15621124214313"></a><a name="en-us_topic_0000001063130862_p15621124214313"></a>No</p> 303</td> 304<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p562119425433"><a name="en-us_topic_0000001063130862_p562119425433"></a><a name="en-us_topic_0000001063130862_p562119425433"></a>Start and end column numbers of the current item in the grid layout. This attribute is valid only when <strong id="en-us_topic_0000001063130862_b0020230213"><a name="en-us_topic_0000001063130862_b0020230213"></a><a name="en-us_topic_0000001063130862_b0020230213"></a>display</strong> of the parent component is <strong id="en-us_topic_0000001063130862_b55623152116"><a name="en-us_topic_0000001063130862_b55623152116"></a><a name="en-us_topic_0000001063130862_b55623152116"></a>grid</strong>. (The <strong id="en-us_topic_0000001063130862_b126192342112"><a name="en-us_topic_0000001063130862_b126192342112"></a><a name="en-us_topic_0000001063130862_b126192342112"></a>display</strong> attribute of the parent component can be set to <strong id="en-us_topic_0000001063130862_b186523122116"><a name="en-us_topic_0000001063130862_b186523122116"></a><a name="en-us_topic_0000001063130862_b186523122116"></a>grid</strong> only for the <strong id="en-us_topic_0000001063130862_b167172313216"><a name="en-us_topic_0000001063130862_b167172313216"></a><a name="en-us_topic_0000001063130862_b167172313216"></a><div></strong> container.)</p> 305</td> 306</tr> 307<tr id="en-us_topic_0000001063130862_row1595144863117"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"></a>height</p> 308</td> 309<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"></a><length><span id="en-us_topic_0000001063130862_en-us_topic_0000001050791158_ph11748352163918"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050791158_ph11748352163918"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050791158_ph11748352163918"></a> | <percentage></span></p> 310</td> 311<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"></a>-</p> 312</td> 313<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p71741417194619"><a name="en-us_topic_0000001063130862_p71741417194619"></a><a name="en-us_topic_0000001063130862_p71741417194619"></a>No</p> 314</td> 315<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001050791158_p1477601264"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050791158_p1477601264"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050791158_p1477601264"></a>Component height</p> 316<p id="en-us_topic_0000001063130862_en-us_topic_0000001050791158_p208761554184020"><a name="en-us_topic_0000001063130862_en-us_topic_0000001050791158_p208761554184020"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001050791158_p208761554184020"></a>If this attribute is not set, the height required for the element content is used. </p> 317</td> 318</tr> 319<tr id="en-us_topic_0000001063130862_row596084984110"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a8ff18465b8f0453c836067e5902b7eb6"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a8ff18465b8f0453c836067e5902b7eb6"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a8ff18465b8f0453c836067e5902b7eb6"></a>padding</p> 320</td> 321<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a53628f36a25a4823a901d5b66860f44e"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a53628f36a25a4823a901d5b66860f44e"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a53628f36a25a4823a901d5b66860f44e"></a><length> | <percentage><sup id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_sup1886516813013"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_sup1886516813013"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_sup1886516813013"></a>5+</sup></p> 322</td> 323<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_adc824deaee924821a47a798b589f22c8"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_adc824deaee924821a47a798b589f22c8"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_adc824deaee924821a47a798b589f22c8"></a>0</p> 324</td> 325<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p19729127112814"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p19729127112814"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p19729127112814"></a>No</p> 326</td> 327<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p157435053316"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p157435053316"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p157435053316"></a>Shorthand attribute to set all padding attributes.</p> 328<div class="p" id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a68a6d5ddc59c49f0aaddd82e75932524"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a68a6d5ddc59c49f0aaddd82e75932524"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a68a6d5ddc59c49f0aaddd82e75932524"></a>The attribute can have one to four values:<a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul15202134923211"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul15202134923211"></a><ul id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul15202134923211"><li><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p10614155353215"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p10614155353215"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p10614155353215"></a>If you set only one value, it specifies the padding for four sides.</p> 329</li><li><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p10614175393216"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p10614175393216"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p10614175393216"></a>If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.</p> 330</li><li><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p8614205393214"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p8614205393214"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p8614205393214"></a>If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.</p> 331</li><li><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p106141853193215"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p106141853193215"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p106141853193215"></a>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).</p> 332</li></ul> 333</div> 334</td> 335</tr> 336<tr id="en-us_topic_0000001063130862_row29611949164112"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ab0185a7b5a4944f3b38f8c71c8ca794d"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ab0185a7b5a4944f3b38f8c71c8ca794d"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ab0185a7b5a4944f3b38f8c71c8ca794d"></a>padding-[left|top|right|bottom]</p> 337</td> 338<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a49dd523e2f1b4253a19231e776dc1951"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a49dd523e2f1b4253a19231e776dc1951"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a49dd523e2f1b4253a19231e776dc1951"></a><length> | <percentage><sup id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_sup19949912807"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_sup19949912807"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_sup19949912807"></a>5+</sup></p> 339</td> 340<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_af52ecd93919b4fa08ae4d376e3d544a2"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_af52ecd93919b4fa08ae4d376e3d544a2"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_af52ecd93919b4fa08ae4d376e3d544a2"></a>0</p> 341</td> 342<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p11729374289"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p11729374289"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p11729374289"></a>No</p> 343</td> 344<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a3575ab240d384ab1a21119ea3428ab7d"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a3575ab240d384ab1a21119ea3428ab7d"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a3575ab240d384ab1a21119ea3428ab7d"></a>Left, top, right, and bottom padding (in px).</p> 345</td> 346</tr> 347<tr id="en-us_topic_0000001063130862_row11961184912413"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p769124717365"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p769124717365"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p769124717365"></a>padding-[start|end]</p> 348</td> 349<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p157617124374"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p157617124374"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p157617124374"></a><length> | <percentage><sup id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_sup8490161513019"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_sup8490161513019"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_sup8490161513019"></a>5+</sup></p> 350</td> 351<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1069144703616"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1069144703616"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1069144703616"></a>0</p> 352</td> 353<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1373027182819"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1373027182819"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1373027182819"></a>No</p> 354</td> 355<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1269184753610"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1269184753610"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1269184753610"></a>Start and end padding.</p> 356</td> 357</tr> 358<tr id="en-us_topic_0000001063130862_row4963104994120"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a222bb48f24014f2eb2b16a1a840bbebb"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a222bb48f24014f2eb2b16a1a840bbebb"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a222bb48f24014f2eb2b16a1a840bbebb"></a>border</p> 359</td> 360<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a79b4eaf9983c44d0aad39ff04d0997a8"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a79b4eaf9983c44d0aad39ff04d0997a8"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a79b4eaf9983c44d0aad39ff04d0997a8"></a>-</p> 361</td> 362<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_aac320f4f0a42401aa7fa778d9829d77c"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_aac320f4f0a42401aa7fa778d9829d77c"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_aac320f4f0a42401aa7fa778d9829d77c"></a>0</p> 363</td> 364<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p16963114984116"><a name="en-us_topic_0000001063130862_p16963114984116"></a><a name="en-us_topic_0000001063130862_p16963114984116"></a>No</p> 365</td> 366<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a9cd962871a4c467a8e1ef452621d5cd7"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a9cd962871a4c467a8e1ef452621d5cd7"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a9cd962871a4c467a8e1ef452621d5cd7"></a>Shorthand attribute to set all borders. You can set <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b79128342503"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b79128342503"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b79128342503"></a>border-width</strong>, <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b9366173919505"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b9366173919505"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b9366173919505"></a>border-style</strong>, and <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b184351248205019"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b184351248205019"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b184351248205019"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 367</td> 368</tr> 369<tr id="en-us_topic_0000001063130862_row169631749164113"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a987708c0864a4128af094334f1b024b3"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a987708c0864a4128af094334f1b024b3"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a987708c0864a4128af094334f1b024b3"></a>border-style</p> 370</td> 371<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p513631613319"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p513631613319"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p513631613319"></a>string</p> 372</td> 373<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a2567083af59c40e58e3e4d9b0ddf1485"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a2567083af59c40e58e3e4d9b0ddf1485"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a2567083af59c40e58e3e4d9b0ddf1485"></a>solid</p> 374</td> 375<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p79641249184116"><a name="en-us_topic_0000001063130862_p79641249184116"></a><a name="en-us_topic_0000001063130862_p79641249184116"></a>No</p> 376</td> 377<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p342285712314"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p342285712314"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p342285712314"></a>Shorthand attribute to set the style for all borders. Available values are as follows:</p> 378<a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul1470834505612"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul1470834505612"></a><ul id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul1470834505612"><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b143453286360"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b143453286360"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b143453286360"></a>dotted</strong>: Dotted border. The radius of a dot is half of border-width.</li><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b792117280367"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b792117280367"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b792117280367"></a>dashed</strong>: Dashed border</li></ul> 379<a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul15621125545612"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul15621125545612"></a><ul id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul15621125545612"><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1335862963610"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1335862963610"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1335862963610"></a>solid</strong>: Solid border</li></ul> 380</td> 381</tr> 382<tr id="en-us_topic_0000001063130862_row158901822154418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_p589112225442"><a name="en-us_topic_0000001063130862_p589112225442"></a><a name="en-us_topic_0000001063130862_p589112225442"></a>border-[left|top|right|bottom]-style</p> 383</td> 384<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_p6891102211445"><a name="en-us_topic_0000001063130862_p6891102211445"></a><a name="en-us_topic_0000001063130862_p6891102211445"></a>string</p> 385</td> 386<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_p118911422104419"><a name="en-us_topic_0000001063130862_p118911422104419"></a><a name="en-us_topic_0000001063130862_p118911422104419"></a>solid</p> 387</td> 388<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p1891132284413"><a name="en-us_topic_0000001063130862_p1891132284413"></a><a name="en-us_topic_0000001063130862_p1891132284413"></a>No</p> 389</td> 390<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_p16891102274415"><a name="en-us_topic_0000001063130862_p16891102274415"></a><a name="en-us_topic_0000001063130862_p16891102274415"></a>Styles of the left, top, right, and bottom borders. The available values are <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b17769171311540"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b17769171311540"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b17769171311540"></a>dotted</strong>, <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b237141519547"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b237141519547"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b237141519547"></a>dashed</strong>, and <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b8949161613540"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b8949161613540"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b8949161613540"></a>solid</strong>.</p> 391</td> 392</tr> 393<tr id="en-us_topic_0000001063130862_row496412498416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a8afd82b1aba547d3b0188b749518b2de"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a8afd82b1aba547d3b0188b749518b2de"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a8afd82b1aba547d3b0188b749518b2de"></a>border-[left|top|right|bottom]</p> 394</td> 395<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ac4b8a3b39e5446b5868f1f2989dc9590"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ac4b8a3b39e5446b5868f1f2989dc9590"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ac4b8a3b39e5446b5868f1f2989dc9590"></a>-</p> 396</td> 397<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a3420bc82bd17458ab82fa996ade7064c"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a3420bc82bd17458ab82fa996ade7064c"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a3420bc82bd17458ab82fa996ade7064c"></a>-</p> 398</td> 399<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p67303762810"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p67303762810"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p67303762810"></a>No</p> 400</td> 401<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_af4178a066c344412afbd38f4b0c44818"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_af4178a066c344412afbd38f4b0c44818"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_af4178a066c344412afbd38f4b0c44818"></a>Shorthand attribute to set the borders for every side respectively. You can set <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b122415514554"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b122415514554"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b122415514554"></a>border-width</strong>, <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b12296178135513"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b12296178135513"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b12296178135513"></a>border-style</strong>, and <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1129701210553"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1129701210553"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1129701210553"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 402</td> 403</tr> 404<tr id="en-us_topic_0000001063130862_row3965949124116"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_adf0e0afedc774afca9cda0e509391029"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_adf0e0afedc774afca9cda0e509391029"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_adf0e0afedc774afca9cda0e509391029"></a>border-width</p> 405</td> 406<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a0782ea2c45eb4864a8df82f30dd2cd5f"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a0782ea2c45eb4864a8df82f30dd2cd5f"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a0782ea2c45eb4864a8df82f30dd2cd5f"></a><length></p> 407</td> 408<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a395cbedd521145bd820b9171ee2dd7ac"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a395cbedd521145bd820b9171ee2dd7ac"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a395cbedd521145bd820b9171ee2dd7ac"></a>0</p> 409</td> 410<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p109652499414"><a name="en-us_topic_0000001063130862_p109652499414"></a><a name="en-us_topic_0000001063130862_p109652499414"></a>No</p> 411</td> 412<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a7ae60621ea3341818a03bfdffa641894"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a7ae60621ea3341818a03bfdffa641894"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a7ae60621ea3341818a03bfdffa641894"></a>Shorthand attribute to set the width of all borders<span id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ph07997369365"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ph07997369365"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ph07997369365"></a>, or separately set the width of each border</span>.</p> 413</td> 414</tr> 415<tr id="en-us_topic_0000001063130862_row189651496412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a7371edc07c664266a2e1866f31ad0d0c"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a7371edc07c664266a2e1866f31ad0d0c"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a7371edc07c664266a2e1866f31ad0d0c"></a>border-[left|top|right|bottom]-width</p> 416</td> 417<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a2faa532b841948a7b6598542b4eccc7b"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a2faa532b841948a7b6598542b4eccc7b"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a2faa532b841948a7b6598542b4eccc7b"></a><length></p> 418</td> 419<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a87f38cfa47f54bc18c32f9671c0f9ca6"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a87f38cfa47f54bc18c32f9671c0f9ca6"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a87f38cfa47f54bc18c32f9671c0f9ca6"></a>0</p> 420</td> 421<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p896584912413"><a name="en-us_topic_0000001063130862_p896584912413"></a><a name="en-us_topic_0000001063130862_p896584912413"></a>No</p> 422</td> 423<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a20386e66c3834d5f96cf9435c4715c5b"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a20386e66c3834d5f96cf9435c4715c5b"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a20386e66c3834d5f96cf9435c4715c5b"></a>Attribute to set widths of left, top, right, and bottom borders.</p> 424</td> 425</tr> 426<tr id="en-us_topic_0000001063130862_row69651749144113"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a40a816cf0a03489d81f209a8aa7d81a6"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a40a816cf0a03489d81f209a8aa7d81a6"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a40a816cf0a03489d81f209a8aa7d81a6"></a>border-color</p> 427</td> 428<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_afcc7c948ae0947b2a78002d31f2f9748"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_afcc7c948ae0947b2a78002d31f2f9748"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_afcc7c948ae0947b2a78002d31f2f9748"></a><color></p> 429</td> 430<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ae0909d2b896342f9b2196fe0dce72920"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ae0909d2b896342f9b2196fe0dce72920"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ae0909d2b896342f9b2196fe0dce72920"></a>black</p> 431</td> 432<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p7966184984116"><a name="en-us_topic_0000001063130862_p7966184984116"></a><a name="en-us_topic_0000001063130862_p7966184984116"></a>No</p> 433</td> 434<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a76fd98995e1d4217aa703fecd69325c7"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a76fd98995e1d4217aa703fecd69325c7"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a76fd98995e1d4217aa703fecd69325c7"></a>Shorthand attribute to set the color of all borders<span id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ph9587639113619"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ph9587639113619"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ph9587639113619"></a>, or separately set the color of each border</span>.</p> 435</td> 436</tr> 437<tr id="en-us_topic_0000001063130862_row13966174910413"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a2afc646d6a2549548bcd5c4b9bed1fb5"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a2afc646d6a2549548bcd5c4b9bed1fb5"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a2afc646d6a2549548bcd5c4b9bed1fb5"></a>border-[left|top|right|bottom]-color</p> 438</td> 439<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a34556866a4f54f5da88f148fc698867b"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a34556866a4f54f5da88f148fc698867b"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a34556866a4f54f5da88f148fc698867b"></a><color></p> 440</td> 441<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a8ff58e18553846a38e82c69149e2aa30"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a8ff58e18553846a38e82c69149e2aa30"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a8ff58e18553846a38e82c69149e2aa30"></a>black</p> 442</td> 443<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_p59661649184117"><a name="en-us_topic_0000001063130862_p59661649184117"></a><a name="en-us_topic_0000001063130862_p59661649184117"></a>No</p> 444</td> 445<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a5c85947d388c4c7fbf0de07b022bb44e"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a5c85947d388c4c7fbf0de07b022bb44e"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a5c85947d388c4c7fbf0de07b022bb44e"></a>Attribute to set colors of left, top, right, and bottom borders.</p> 446</td> 447</tr> 448<tr id="en-us_topic_0000001063130862_row396610497417"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a65974e3078c447a383fb9237cc4ffa32"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a65974e3078c447a383fb9237cc4ffa32"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a65974e3078c447a383fb9237cc4ffa32"></a>border-radius</p> 449</td> 450<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a413fd0aea8b243349a19f825e96ee8b6"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a413fd0aea8b243349a19f825e96ee8b6"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a413fd0aea8b243349a19f825e96ee8b6"></a><length></p> 451</td> 452<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_af786857698c74e259f52589a6670a0a1"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_af786857698c74e259f52589a6670a0a1"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_af786857698c74e259f52589a6670a0a1"></a>-</p> 453</td> 454<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p67306752816"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p67306752816"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p67306752816"></a>No</p> 455</td> 456<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a52ca834f42124d3b8b12bbf54914fc96"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a52ca834f42124d3b8b12bbf54914fc96"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a52ca834f42124d3b8b12bbf54914fc96"></a>Attribute to set the radius of round borders of an element. <span id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ph1249443123611"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ph1249443123611"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ph1249443123611"></a>This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b124211434362"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b124211434362"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b124211434362"></a>border-width</strong>, <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b124894383615"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b124894383615"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b124894383615"></a>border-color</strong>, or <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b7166134516465"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b7166134516465"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b7166134516465"></a>border-style</strong> for all the borders at the same time.</span></p> 457</td> 458</tr> 459<tr id="en-us_topic_0000001063130862_row396604917417"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a466f1f8bc2fb404e82e8417c5133eacb"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a466f1f8bc2fb404e82e8417c5133eacb"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a466f1f8bc2fb404e82e8417c5133eacb"></a>border-[top|bottom]-[left|right]-radius</p> 460</td> 461<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a499fe910d0284647abc48b1bd0eb4868"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a499fe910d0284647abc48b1bd0eb4868"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a499fe910d0284647abc48b1bd0eb4868"></a><length></p> 462</td> 463<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ac142d1054eee499f948069f46129c492"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ac142d1054eee499f948069f46129c492"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ac142d1054eee499f948069f46129c492"></a>-</p> 464</td> 465<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p27305718283"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p27305718283"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p27305718283"></a>No</p> 466</td> 467<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a63757091a86c4ced97f0c39d37a2117c"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a63757091a86c4ced97f0c39d37a2117c"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a63757091a86c4ced97f0c39d37a2117c"></a>Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners</p> 468</td> 469</tr> 470<tr id="en-us_topic_0000001063130862_row296744944115"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ae335be2c6150440fb31b40b1ca117858"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ae335be2c6150440fb31b40b1ca117858"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ae335be2c6150440fb31b40b1ca117858"></a>background</p> 471</td> 472<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a394a81171c5c4d1aa81b94fc5d2f0f07"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a394a81171c5c4d1aa81b94fc5d2f0f07"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a394a81171c5c4d1aa81b94fc5d2f0f07"></a><linear-gradient></p> 473</td> 474<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a0734de04e90e470cb608e8d5f42c6874"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a0734de04e90e470cb608e8d5f42c6874"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a0734de04e90e470cb608e8d5f42c6874"></a>-</p> 475</td> 476<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p15730197132811"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p15730197132811"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p15730197132811"></a>No</p> 477</td> 478<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"></a><a name="en-us_topic_0000001063130862_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_0000001063130862_en-us_topic_0000001059340528_b389373419292"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b389373419292"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b389373419292"></a>background-color</strong> or <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b0399637142918"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b0399637142918"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b0399637142918"></a>background-image</strong>.</p> 479</td> 480</tr> 481<tr id="en-us_topic_0000001063130862_row1296744944115"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a2977672444224b738a566c61225961c2"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a2977672444224b738a566c61225961c2"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a2977672444224b738a566c61225961c2"></a>background-color</p> 482</td> 483<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a87186748ed7c4694aef0095d8a7f8e43"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a87186748ed7c4694aef0095d8a7f8e43"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a87186748ed7c4694aef0095d8a7f8e43"></a><color></p> 484</td> 485<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a2775a3cca8994bec9b754af0d2455eb5"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a2775a3cca8994bec9b754af0d2455eb5"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a2775a3cca8994bec9b754af0d2455eb5"></a>-</p> 486</td> 487<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p17730577282"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p17730577282"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p17730577282"></a>No</p> 488</td> 489<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a372b6089bf9746f091c91fa49b571f1d"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a372b6089bf9746f091c91fa49b571f1d"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a372b6089bf9746f091c91fa49b571f1d"></a>Background color.</p> 490</td> 491</tr> 492<tr id="en-us_topic_0000001063130862_row19672493414"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ab2dff80cd59c4db1bf4293172f89735e"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ab2dff80cd59c4db1bf4293172f89735e"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ab2dff80cd59c4db1bf4293172f89735e"></a>background-image</p> 493</td> 494<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ad9a7e9f2469b45238a6a0ac6da232286"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ad9a7e9f2469b45238a6a0ac6da232286"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ad9a7e9f2469b45238a6a0ac6da232286"></a>string</p> 495</td> 496<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a73fb72c96edd488ba74c364568e345c6"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a73fb72c96edd488ba74c364568e345c6"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a73fb72c96edd488ba74c364568e345c6"></a>-</p> 497</td> 498<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p7730976285"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p7730976285"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p7730976285"></a>No</p> 499</td> 500<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a24de29e3cb4d476fabe55d48d69350a8"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a24de29e3cb4d476fabe55d48d69350a8"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a24de29e3cb4d476fabe55d48d69350a8"></a>Background image. Currently, this attribute is not compatible with <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b17699154763620"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b17699154763620"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b17699154763620"></a>background-color</strong> or <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b87001647163613"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b87001647163613"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b87001647163613"></a>background</strong>. Local image resources are supported.</p> 501<p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p45914251572"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p45914251572"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p45914251572"></a>Example:</p> 502<p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p16184973578"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p16184973578"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p16184973578"></a>background-image: url("/common/background.png")</p> 503</td> 504</tr> 505<tr id="en-us_topic_0000001063130862_row6968174994111"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_af81424fd1fbf4f5da65ea5d136390494"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_af81424fd1fbf4f5da65ea5d136390494"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_af81424fd1fbf4f5da65ea5d136390494"></a>background-size</p> 506</td> 507<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul1065173641310"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul1065173641310"></a><ul id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul1065173641310"><li>string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 508</td> 509<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a222f4e09239a4ab08880d1d9544d337c"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a222f4e09239a4ab08880d1d9544d337c"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a222f4e09239a4ab08880d1d9544d337c"></a>auto</p> 510</td> 511<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p137309714282"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p137309714282"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p137309714282"></a>No</p> 512</td> 513<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p91971112114318"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p91971112114318"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p91971112114318"></a>Background image size.</p> 514<a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul41331853154111"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul41331853154111"></a><ul id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul41331853154111"><li>The <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1229715499365"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1229715499365"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1229715499365"></a>string</strong> values are as follows:<a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul13611494111"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul13611494111"></a><ul id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul13611494111"><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b4759749163610"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b4759749163610"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b4759749163610"></a>contain</strong>: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.</li><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b437619381712"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b437619381712"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b437619381712"></a>cover</strong>: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.</li><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1425512535366"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1425512535366"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1425512535366"></a>auto</strong>: The original image width-height ratio is retained.</li></ul> 515</li><li>The two <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b13309145193614"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b13309145193614"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b13309145193614"></a><length></strong> values are as follows:<p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1840244924418"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1840244924418"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1840244924418"></a>Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b146661156143617"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b146661156143617"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b146661156143617"></a>auto</strong> by default.</p> 516</li><li>The two <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1667415763613"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1667415763613"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1667415763613"></a><percentage></strong> values are as follows:<p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p17936154410457"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p17936154410457"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p17936154410457"></a>Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1524319254"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1524319254"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1524319254"></a>auto</strong> by default.</p> 517</li></ul> 518</td> 519</tr> 520<tr id="en-us_topic_0000001063130862_row12969849174110"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a9957170386754fb5b648ba2114bd52d4"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a9957170386754fb5b648ba2114bd52d4"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a9957170386754fb5b648ba2114bd52d4"></a>background-repeat</p> 521</td> 522<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a155b4cc325e747279694d36c2fa69bcc"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a155b4cc325e747279694d36c2fa69bcc"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a155b4cc325e747279694d36c2fa69bcc"></a>string</p> 523</td> 524<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a82029c0dc1d540cf994f690b451c48f4"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a82029c0dc1d540cf994f690b451c48f4"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a82029c0dc1d540cf994f690b451c48f4"></a>repeat</p> 525</td> 526<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1673015702810"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1673015702810"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1673015702810"></a>No</p> 527</td> 528<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_afb8e41c117884b368a0f1df348be8e54"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_afb8e41c117884b368a0f1df348be8e54"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_afb8e41c117884b368a0f1df348be8e54"></a>How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.</p> 529<a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul8236153103612"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul8236153103612"></a><ul id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul8236153103612"><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1363463710"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1363463710"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1363463710"></a>repeat</strong>: Repeatedly draws images along the x-axis and y-axis at the same time.</li><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b267416916377"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b267416916377"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b267416916377"></a>repeat-x</strong>: Repeatedly draws images along the x-axis.</li><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b625561011379"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b625561011379"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b625561011379"></a>repeat-y</strong>: Repeatedly draws images along the y-axis.</li><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1122181133715"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1122181133715"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1122181133715"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul> 530</td> 531</tr> 532<tr id="en-us_topic_0000001063130862_row9970104918413"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a709eb4a9fa87428897bebb4a98693df2"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a709eb4a9fa87428897bebb4a98693df2"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a709eb4a9fa87428897bebb4a98693df2"></a>background-position</p> 533</td> 534<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul8874155216502"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul8874155216502"></a><ul id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul8874155216502"><li>string string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 535</td> 536<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a6f8f5d1c92f447bd868a841ad1a33cb1"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a6f8f5d1c92f447bd868a841ad1a33cb1"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a6f8f5d1c92f447bd868a841ad1a33cb1"></a>0px 0px</p> 537</td> 538<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p173010720280"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p173010720280"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p173010720280"></a>No</p> 539</td> 540<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul1590812103363"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul1590812103363"></a><ul id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul1590812103363"><li>Using keywords: If only one keyword is specified, the other value is <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b5234102011540"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b5234102011540"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b5234102011540"></a>center</strong> by default. The two values define the horizontal position and vertical position, respectively.<a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul1453531734716"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul1453531734716"></a><ul id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul1453531734716"><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b0982111273712"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b0982111273712"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b0982111273712"></a>left</strong>: leftmost in the horizontal direction</li><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b866713583912"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b866713583912"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b866713583912"></a>right</strong>: rightmost in the horizontal direction</li><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b5886013193716"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b5886013193716"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b5886013193716"></a>top</strong>: top in the vertical direction</li><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b84197142376"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b84197142376"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b84197142376"></a>bottom</strong>: bottom in the vertical direction</li><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b14894114103710"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b14894114103710"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b14894114103710"></a>center</strong>: center position</li></ul> 541</li></ul> 542<a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul10908121023615"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul10908121023615"></a><ul id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul10908121023615"><li>Using <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b11401615193715"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b11401615193715"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b11401615193715"></a><length></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1341381819379"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1341381819379"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1341381819379"></a>0 0</strong> indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b48671516183714"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b48671516183714"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b48671516183714"></a>50%</strong>.</li><li>Using <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b5492717163712"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b5492717163712"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b5492717163712"></a><percentage></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b164741723183712"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b164741723183712"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b164741723183712"></a>0% 0%</strong> indicates the upper left corner. <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b64022245377"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b64022245377"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b64022245377"></a>100% 100%</strong> indicates the lower right corner. If only one value is specified, the other one is <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b7893424163718"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b7893424163718"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b7893424163718"></a>50%</strong>.</li><li>Using both <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b154811725193718"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b154811725193718"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b154811725193718"></a><percentage></strong> and <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b34834254377"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b34834254377"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b34834254377"></a><length></strong>.</li></ul> 543</td> 544</tr> 545<tr id="en-us_topic_0000001063130862_row1697134924117"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p134581712103910"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p134581712103910"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p134581712103910"></a>opacity</p> 546</td> 547<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a45185999ae584676af4c36467c2ade8b"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a45185999ae584676af4c36467c2ade8b"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a45185999ae584676af4c36467c2ade8b"></a>number</p> 548</td> 549<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a09ff20dda8e44794bca18c84f413d972"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a09ff20dda8e44794bca18c84f413d972"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_a09ff20dda8e44794bca18c84f413d972"></a>1</p> 550</td> 551<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1873011722814"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1873011722814"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1873011722814"></a>No</p> 552</td> 553<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p122515161139"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p122515161139"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p122515161139"></a>Transparency of an element. The value ranges from <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1871715526385"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1871715526385"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b1871715526385"></a>0</strong> to <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b177181452103815"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b177181452103815"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b177181452103815"></a>1</strong>. The value <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b13718155210380"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b13718155210380"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b13718155210380"></a>1</strong> means opaque, and <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b6718152103818"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b6718152103818"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b6718152103818"></a>0</strong> means completely transparent.</p> 554</td> 555</tr> 556<tr id="en-us_topic_0000001063130862_row19972174913414"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_aa2ed1da39c8e4ad78829712734226ab9"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_aa2ed1da39c8e4ad78829712734226ab9"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_aa2ed1da39c8e4ad78829712734226ab9"></a>visibility</p> 557</td> 558<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p15475737486"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p15475737486"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p15475737486"></a>string</p> 559<p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_aabfb0eb044194745af56c313f40e7781"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_aabfb0eb044194745af56c313f40e7781"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_aabfb0eb044194745af56c313f40e7781"></a></p> 560</td> 561<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_acaca80d4ef9a4f0d87adf92cb2d1ff9a"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_acaca80d4ef9a4f0d87adf92cb2d1ff9a"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_acaca80d4ef9a4f0d87adf92cb2d1ff9a"></a>visible</p> 562</td> 563<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p57301471281"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p57301471281"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p57301471281"></a>No</p> 564</td> 565<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1568839154517"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1568839154517"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p1568839154517"></a>Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b15844103015378"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b15844103015378"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b15844103015378"></a>display</strong> attribute to <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b4845153013712"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b4845153013712"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b4845153013712"></a>none</strong>.) Available values are as follows:</p> 566<a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul751984164920"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul751984164920"></a><ul id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_ul751984164920"><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b17429331133711"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b17429331133711"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b17429331133711"></a>visible</strong>: The element is visible.</li><li><strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b109191231193710"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b109191231193710"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b109191231193710"></a>hidden</strong>: The element is hidden but still takes up space.</li></ul> 567<div class="note" id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_note4549524649"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_note4549524649"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_note4549524649"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p25499241642"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p25499241642"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_p25499241642"></a>If both <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b719810016405"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b719810016405"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b719810016405"></a>visibility</strong> and <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b187052264018"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b187052264018"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b187052264018"></a>display</strong> are set, only <strong id="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b107788924011"><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b107788924011"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001059340528_b107788924011"></a>display</strong> takes effect.</p> 568</div></div> 569</td> 570</tr> 571</tbody> 572</table> 573 574## Event<a name="en-us_topic_0000001063130862_section94351031102113"></a> 575 576<a name="en-us_topic_0000001063130862_table14104163373718"></a> 577<table><thead align="left"><tr id="en-us_topic_0000001063130862_row9104173393711"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a>Name</p> 578</th> 579<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a>Parameter</p> 580</th> 581<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a>Triggered when</p> 582</th> 583</tr> 584</thead> 585<tbody><tr id="en-us_topic_0000001063130862_row710443313711"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a>touchstart</p> 586</td> 587<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 588</td> 589<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a>The tapping starts</p> 590</td> 591</tr> 592<tr id="en-us_topic_0000001063130862_row1210463313376"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a>touchmove</p> 593</td> 594<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 595</td> 596<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a>The tapping moves</p> 597</td> 598</tr> 599<tr id="en-us_topic_0000001063130862_row151052033153711"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a>touchcancel</p> 600</td> 601<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 602</td> 603<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a>The tapping is interrupted</p> 604</td> 605</tr> 606<tr id="en-us_topic_0000001063130862_row161051433163710"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a>touchend</p> 607</td> 608<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 609</td> 610<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a>The tapping ends</p> 611</td> 612</tr> 613<tr id="en-us_topic_0000001063130862_row161051433123719"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a>click</p> 614</td> 615<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a>-</p> 616</td> 617<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a>A component is clicked</p> 618</td> 619</tr> 620<tr id="en-us_topic_0000001063130862_row191052033143714"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a>longpress</p> 621</td> 622<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a>-</p> 623</td> 624<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a>A component is long pressed</p> 625</td> 626</tr> 627<tr id="en-us_topic_0000001063130862_row19105133153711"></tr> 628<tr id="en-us_topic_0000001063130862_row110643393712"></tr> 629<tr id="en-us_topic_0000001063130862_row1510617331378"></tr> 630<tr id="en-us_topic_0000001063130862_row11106533193718"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_p12706561061"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_p12706561061"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_p12706561061"></a>swipe<sup id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_sup35424382912"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_sup35424382912"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_sup35424382912"></a>5+</sup></p> 631</td> 632<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_p11711056161"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_p11711056161"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_p11711056161"></a><a href="universal-events.md#en-us_topic_0000001058460527_table111811577714">SwipeEvent</a></p> 633</td> 634<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001063130862_en-us_topic_0000001058460527_p2711556162"><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_p2711556162"></a><a name="en-us_topic_0000001063130862_en-us_topic_0000001058460527_p2711556162"></a>A user quickly swipes on a component.</p> 635</td> 636</tr> 637</tbody> 638</table> 639 640## Example Code<a name="en-us_topic_0000001063130862_section2021865273710"></a> 641 642``` 643<!-- index.hml --> 644<div class="container"> 645 <grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;"> 646 <grid-row style="height:400px;justify-content:space-around;"> 647 <grid-col span="1"> 648 <div style="align-items: center;justify-content: center;height: 100%;width: 100%;"> 649 <text style="color: dodgerblue;" onclick="getCol">Element text</text> 650 </div> 651 </grid-col> 652 <grid-col span="4" style="background-color:orange;"> 653 <div style="width: 100%;height: 100%;padding: 20px;align-items: center;"> 654 <text onclick="getColWidth">Element text</text> 655 </div> 656 </grid-col> 657 </grid-row> 658 </grid-container> 659</div> 660``` 661 662``` 663/* index.css */ 664.container { 665 flex-direction: column; 666 padding-top: 80px; 667} 668``` 669 670``` 671// index.js 672import prompt from '@system.prompt'; 673export default { 674 getCol(e) { 675 this.$element('mygrid').getColumns(function (result) { 676 prompt.showToast({ 677 message: e.target.id + ' result = ' + result, 678 duration: 3000, 679 }); 680 }) 681 }, 682 getColWidth(e) { 683 this.$element('mygrid').getColumnWidth(function (result) { 684 prompt.showToast({ 685 message: e.target.id + ' result = ' + result, 686 duration: 3000, 687 }); 688 }) 689 } 690} 691``` 692 693
