1# 通用样式<a name="ZH-CN_TOPIC_0000001163932190"></a> 2 3组件普遍支持的可以在style或css中设置组件外观样式。 4 5<a name="zh-cn_topic_0000001173324679_td0e7eac6a0284816a5c047f153c07d82"></a> 6<table><thead align="left"><tr id="zh-cn_topic_0000001173324679_rccf63bae170347ec85cc93fb5c6c2dbb"><th class="cellrowborder" valign="top" width="27.04270427042704%" id="mcps1.1.5.1.1"><p id="zh-cn_topic_0000001173324679_a14a0c012a26248cfbec6b13dcc4f2cbe"><a name="zh-cn_topic_0000001173324679_a14a0c012a26248cfbec6b13dcc4f2cbe"></a><a name="zh-cn_topic_0000001173324679_a14a0c012a26248cfbec6b13dcc4f2cbe"></a>名称</p> 7</th> 8<th class="cellrowborder" valign="top" width="20.402040204020402%" id="mcps1.1.5.1.2"><p id="zh-cn_topic_0000001173324679_a8dc328a555a74157a00de86181fc3a7b"><a name="zh-cn_topic_0000001173324679_a8dc328a555a74157a00de86181fc3a7b"></a><a name="zh-cn_topic_0000001173324679_a8dc328a555a74157a00de86181fc3a7b"></a>类型</p> 9</th> 10<th class="cellrowborder" valign="top" width="11.601160116011602%" id="mcps1.1.5.1.3"><p id="zh-cn_topic_0000001173324679_a41a31e48d0c74ad4982add2655515c82"><a name="zh-cn_topic_0000001173324679_a41a31e48d0c74ad4982add2655515c82"></a><a name="zh-cn_topic_0000001173324679_a41a31e48d0c74ad4982add2655515c82"></a>默认值</p> 11</th> 12<th class="cellrowborder" valign="top" width="40.954095409540955%" id="mcps1.1.5.1.4"><p id="zh-cn_topic_0000001173324679_af7a726e456f7485c87bd4e0527bc6584"><a name="zh-cn_topic_0000001173324679_af7a726e456f7485c87bd4e0527bc6584"></a><a name="zh-cn_topic_0000001173324679_af7a726e456f7485c87bd4e0527bc6584"></a>描述</p> 13</th> 14</tr> 15</thead> 16<tbody><tr id="zh-cn_topic_0000001173324679_r86e8f72ab5d34004853cb4c0d2f72c9d"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a8bc81ecef4934adf91deb1d6167045d7"><a name="zh-cn_topic_0000001173324679_a8bc81ecef4934adf91deb1d6167045d7"></a><a name="zh-cn_topic_0000001173324679_a8bc81ecef4934adf91deb1d6167045d7"></a>width</p> 17</td> 18<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a59692217b9c94353a020a2f0a20f01a7"><a name="zh-cn_topic_0000001173324679_a59692217b9c94353a020a2f0a20f01a7"></a><a name="zh-cn_topic_0000001173324679_a59692217b9c94353a020a2f0a20f01a7"></a><length> | <percentage></p> 19</td> 20<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p3948114217528"><a name="zh-cn_topic_0000001173324679_p3948114217528"></a><a name="zh-cn_topic_0000001173324679_p3948114217528"></a>-</p> 21</td> 22<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p624653010258"><a name="zh-cn_topic_0000001173324679_p624653010258"></a><a name="zh-cn_topic_0000001173324679_p624653010258"></a>设置组件自身的宽度。</p> 23<p id="zh-cn_topic_0000001173324679_p84811050134010"><a name="zh-cn_topic_0000001173324679_p84811050134010"></a><a name="zh-cn_topic_0000001173324679_p84811050134010"></a>缺省时使用元素自身内容需要的宽度。</p> 24</td> 25</tr> 26<tr id="zh-cn_topic_0000001173324679_r4f331adcbe404a8081155e9582e2e1ba"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a738cc687552c4b8cb1aa9f9e7d9ea8c2"><a name="zh-cn_topic_0000001173324679_a738cc687552c4b8cb1aa9f9e7d9ea8c2"></a><a name="zh-cn_topic_0000001173324679_a738cc687552c4b8cb1aa9f9e7d9ea8c2"></a>height</p> 27</td> 28<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a82c5d9c65b3646ec92afe5f0f47a2149"><a name="zh-cn_topic_0000001173324679_a82c5d9c65b3646ec92afe5f0f47a2149"></a><a name="zh-cn_topic_0000001173324679_a82c5d9c65b3646ec92afe5f0f47a2149"></a><length><span id="zh-cn_topic_0000001173324679_ph11748352163918"><a name="zh-cn_topic_0000001173324679_ph11748352163918"></a><a name="zh-cn_topic_0000001173324679_ph11748352163918"></a></span> | <percentage></p> 29</td> 30<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a7e6c7daafecf475888d0420835662eb4"><a name="zh-cn_topic_0000001173324679_a7e6c7daafecf475888d0420835662eb4"></a><a name="zh-cn_topic_0000001173324679_a7e6c7daafecf475888d0420835662eb4"></a>-</p> 31</td> 32<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p1477601264"><a name="zh-cn_topic_0000001173324679_p1477601264"></a><a name="zh-cn_topic_0000001173324679_p1477601264"></a>设置组件自身的高度。</p> 33<p id="zh-cn_topic_0000001173324679_p208761554184020"><a name="zh-cn_topic_0000001173324679_p208761554184020"></a><a name="zh-cn_topic_0000001173324679_p208761554184020"></a>缺省时使用元素自身内容需要的高度。</p> 34</td> 35</tr> 36<tr id="zh-cn_topic_0000001173324679_row13660102510327"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p6377163523212"><a name="zh-cn_topic_0000001173324679_p6377163523212"></a><a name="zh-cn_topic_0000001173324679_p6377163523212"></a>min-width<sup id="zh-cn_topic_0000001173324679_sup537763519325"><a name="zh-cn_topic_0000001173324679_sup537763519325"></a><a name="zh-cn_topic_0000001173324679_sup537763519325"></a><span>5+</span></sup></p> 37</td> 38<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p1637715359321"><a name="zh-cn_topic_0000001173324679_p1637715359321"></a><a name="zh-cn_topic_0000001173324679_p1637715359321"></a><length> | <percentage><sup id="zh-cn_topic_0000001173324679_sup21401217019"><a name="zh-cn_topic_0000001173324679_sup21401217019"></a><a name="zh-cn_topic_0000001173324679_sup21401217019"></a><span>6+</span></sup></p> 39</td> 40<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p7377133512326"><a name="zh-cn_topic_0000001173324679_p7377133512326"></a><a name="zh-cn_topic_0000001173324679_p7377133512326"></a>0</p> 41</td> 42<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p183771735113211"><a name="zh-cn_topic_0000001173324679_p183771735113211"></a><a name="zh-cn_topic_0000001173324679_p183771735113211"></a>设置元素的最小宽度。</p> 43</td> 44</tr> 45<tr id="zh-cn_topic_0000001173324679_row1165519287327"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p73779355328"><a name="zh-cn_topic_0000001173324679_p73779355328"></a><a name="zh-cn_topic_0000001173324679_p73779355328"></a>min-height<sup id="zh-cn_topic_0000001173324679_sup11377735113211"><a name="zh-cn_topic_0000001173324679_sup11377735113211"></a><a name="zh-cn_topic_0000001173324679_sup11377735113211"></a>5+</sup></p> 46</td> 47<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p3377335143216"><a name="zh-cn_topic_0000001173324679_p3377335143216"></a><a name="zh-cn_topic_0000001173324679_p3377335143216"></a><length> | <percentage><sup id="zh-cn_topic_0000001173324679_sup18164144009"><a name="zh-cn_topic_0000001173324679_sup18164144009"></a><a name="zh-cn_topic_0000001173324679_sup18164144009"></a><span>6+</span></sup></p> 48</td> 49<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p1737743533212"><a name="zh-cn_topic_0000001173324679_p1737743533212"></a><a name="zh-cn_topic_0000001173324679_p1737743533212"></a>0</p> 50</td> 51<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p337818353329"><a name="zh-cn_topic_0000001173324679_p337818353329"></a><a name="zh-cn_topic_0000001173324679_p337818353329"></a>设置元素的最小高度。</p> 52</td> 53</tr> 54<tr id="zh-cn_topic_0000001173324679_row1202531163210"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p10378183533219"><a name="zh-cn_topic_0000001173324679_p10378183533219"></a><a name="zh-cn_topic_0000001173324679_p10378183533219"></a>max-width<sup id="zh-cn_topic_0000001173324679_sup537813511327"><a name="zh-cn_topic_0000001173324679_sup537813511327"></a><a name="zh-cn_topic_0000001173324679_sup537813511327"></a><span>5+</span></sup></p> 55</td> 56<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p8251271007"><a name="zh-cn_topic_0000001173324679_p8251271007"></a><a name="zh-cn_topic_0000001173324679_p8251271007"></a><length> | <percentage><sup id="zh-cn_topic_0000001173324679_sup8251271603"><a name="zh-cn_topic_0000001173324679_sup8251271603"></a><a name="zh-cn_topic_0000001173324679_sup8251271603"></a><span>6+</span></sup></p> 57</td> 58<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p737817355325"><a name="zh-cn_topic_0000001173324679_p737817355325"></a><a name="zh-cn_topic_0000001173324679_p737817355325"></a>-</p> 59</td> 60<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p19378203513216"><a name="zh-cn_topic_0000001173324679_p19378203513216"></a><a name="zh-cn_topic_0000001173324679_p19378203513216"></a>设置元素的最大宽度。默认无限制。</p> 61</td> 62</tr> 63<tr id="zh-cn_topic_0000001173324679_row3921633163215"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p8378135193215"><a name="zh-cn_topic_0000001173324679_p8378135193215"></a><a name="zh-cn_topic_0000001173324679_p8378135193215"></a>max-height<sup id="zh-cn_topic_0000001173324679_sup63781535163210"><a name="zh-cn_topic_0000001173324679_sup63781535163210"></a><a name="zh-cn_topic_0000001173324679_sup63781535163210"></a>5+</sup></p> 64</td> 65<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p173788353327"><a name="zh-cn_topic_0000001173324679_p173788353327"></a><a name="zh-cn_topic_0000001173324679_p173788353327"></a><length> | <percentage><sup id="zh-cn_topic_0000001173324679_sup370891800"><a name="zh-cn_topic_0000001173324679_sup370891800"></a><a name="zh-cn_topic_0000001173324679_sup370891800"></a><span>6+</span></sup></p> 66</td> 67<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p11378193523214"><a name="zh-cn_topic_0000001173324679_p11378193523214"></a><a name="zh-cn_topic_0000001173324679_p11378193523214"></a>-</p> 68</td> 69<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p23781235203214"><a name="zh-cn_topic_0000001173324679_p23781235203214"></a><a name="zh-cn_topic_0000001173324679_p23781235203214"></a>设置元素的最大高度。默认无限制。</p> 70</td> 71</tr> 72<tr id="zh-cn_topic_0000001173324679_rbc132bca84214d4295bfeb9530425f5c"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a8ff18465b8f0453c836067e5902b7eb6"><a name="zh-cn_topic_0000001173324679_a8ff18465b8f0453c836067e5902b7eb6"></a><a name="zh-cn_topic_0000001173324679_a8ff18465b8f0453c836067e5902b7eb6"></a>padding</p> 73</td> 74<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a53628f36a25a4823a901d5b66860f44e"><a name="zh-cn_topic_0000001173324679_a53628f36a25a4823a901d5b66860f44e"></a><a name="zh-cn_topic_0000001173324679_a53628f36a25a4823a901d5b66860f44e"></a><length> | <percentage><sup id="zh-cn_topic_0000001173324679_sup1886516813013"><a name="zh-cn_topic_0000001173324679_sup1886516813013"></a><a name="zh-cn_topic_0000001173324679_sup1886516813013"></a><span>5+</span></sup></p> 75</td> 76<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_adc824deaee924821a47a798b589f22c8"><a name="zh-cn_topic_0000001173324679_adc824deaee924821a47a798b589f22c8"></a><a name="zh-cn_topic_0000001173324679_adc824deaee924821a47a798b589f22c8"></a>0</p> 77</td> 78<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p157435053316"><a name="zh-cn_topic_0000001173324679_p157435053316"></a><a name="zh-cn_topic_0000001173324679_p157435053316"></a>使用简写属性设置所有的内边距属性。</p> 79<div class="p" id="zh-cn_topic_0000001173324679_a68a6d5ddc59c49f0aaddd82e75932524"><a name="zh-cn_topic_0000001173324679_a68a6d5ddc59c49f0aaddd82e75932524"></a><a name="zh-cn_topic_0000001173324679_a68a6d5ddc59c49f0aaddd82e75932524"></a>该属性可以有1到4个值：<a name="zh-cn_topic_0000001173324679_ul15202134923211"></a><a name="zh-cn_topic_0000001173324679_ul15202134923211"></a><ul id="zh-cn_topic_0000001173324679_ul15202134923211"><li><p id="zh-cn_topic_0000001173324679_p10614155353215"><a name="zh-cn_topic_0000001173324679_p10614155353215"></a><a name="zh-cn_topic_0000001173324679_p10614155353215"></a>指定一个值时，该值指定四个边的内边距。</p> 80</li><li><p id="zh-cn_topic_0000001173324679_p10614175393216"><a name="zh-cn_topic_0000001173324679_p10614175393216"></a><a name="zh-cn_topic_0000001173324679_p10614175393216"></a>指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。</p> 81</li><li><p id="zh-cn_topic_0000001173324679_p8614205393214"><a name="zh-cn_topic_0000001173324679_p8614205393214"></a><a name="zh-cn_topic_0000001173324679_p8614205393214"></a>指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。</p> 82</li><li><p id="zh-cn_topic_0000001173324679_p106141853193215"><a name="zh-cn_topic_0000001173324679_p106141853193215"></a><a name="zh-cn_topic_0000001173324679_p106141853193215"></a>指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。</p> 83</li></ul> 84</div> 85</td> 86</tr> 87<tr id="zh-cn_topic_0000001173324679_r5b9c603c3e9b4695b8908eb599f7146b"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_ab0185a7b5a4944f3b38f8c71c8ca794d"><a name="zh-cn_topic_0000001173324679_ab0185a7b5a4944f3b38f8c71c8ca794d"></a><a name="zh-cn_topic_0000001173324679_ab0185a7b5a4944f3b38f8c71c8ca794d"></a>padding-[left|top|right|bottom]</p> 88</td> 89<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a49dd523e2f1b4253a19231e776dc1951"><a name="zh-cn_topic_0000001173324679_a49dd523e2f1b4253a19231e776dc1951"></a><a name="zh-cn_topic_0000001173324679_a49dd523e2f1b4253a19231e776dc1951"></a><length> | <percentage><sup id="zh-cn_topic_0000001173324679_sup19949912807"><a name="zh-cn_topic_0000001173324679_sup19949912807"></a><a name="zh-cn_topic_0000001173324679_sup19949912807"></a><span>5+</span></sup></p> 90</td> 91<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_af52ecd93919b4fa08ae4d376e3d544a2"><a name="zh-cn_topic_0000001173324679_af52ecd93919b4fa08ae4d376e3d544a2"></a><a name="zh-cn_topic_0000001173324679_af52ecd93919b4fa08ae4d376e3d544a2"></a>0</p> 92</td> 93<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a3575ab240d384ab1a21119ea3428ab7d"><a name="zh-cn_topic_0000001173324679_a3575ab240d384ab1a21119ea3428ab7d"></a><a name="zh-cn_topic_0000001173324679_a3575ab240d384ab1a21119ea3428ab7d"></a>设置左、上、右、下内边距属性。</p> 94</td> 95</tr> 96<tr id="zh-cn_topic_0000001173324679_row116908472362"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p769124717365"><a name="zh-cn_topic_0000001173324679_p769124717365"></a><a name="zh-cn_topic_0000001173324679_p769124717365"></a>padding-[start|end]</p> 97</td> 98<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p157617124374"><a name="zh-cn_topic_0000001173324679_p157617124374"></a><a name="zh-cn_topic_0000001173324679_p157617124374"></a><length> | <percentage><sup id="zh-cn_topic_0000001173324679_sup8490161513019"><a name="zh-cn_topic_0000001173324679_sup8490161513019"></a><a name="zh-cn_topic_0000001173324679_sup8490161513019"></a><span>5+</span></sup></p> 99</td> 100<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p1069144703616"><a name="zh-cn_topic_0000001173324679_p1069144703616"></a><a name="zh-cn_topic_0000001173324679_p1069144703616"></a>0</p> 101</td> 102<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p1269184753610"><a name="zh-cn_topic_0000001173324679_p1269184753610"></a><a name="zh-cn_topic_0000001173324679_p1269184753610"></a>设置起始和末端内边距属性。</p> 103</td> 104</tr> 105<tr id="zh-cn_topic_0000001173324679_ra1f0ab04099e40da96fcea74a214d6dc"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_afa508e5429d948b2b561943d6b2f0f31"><a name="zh-cn_topic_0000001173324679_afa508e5429d948b2b561943d6b2f0f31"></a><a name="zh-cn_topic_0000001173324679_afa508e5429d948b2b561943d6b2f0f31"></a>margin</p> 106</td> 107<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a4dab4f9d97a74a27a45b7ef1d2ab08e6"><a name="zh-cn_topic_0000001173324679_a4dab4f9d97a74a27a45b7ef1d2ab08e6"></a><a name="zh-cn_topic_0000001173324679_a4dab4f9d97a74a27a45b7ef1d2ab08e6"></a><length> | <percentage><sup id="zh-cn_topic_0000001173324679_sup1433352175220"><a name="zh-cn_topic_0000001173324679_sup1433352175220"></a><a name="zh-cn_topic_0000001173324679_sup1433352175220"></a>5+</sup></p> 108</td> 109<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a5e3c234d78214e8180b51d237adda154"><a name="zh-cn_topic_0000001173324679_a5e3c234d78214e8180b51d237adda154"></a><a name="zh-cn_topic_0000001173324679_a5e3c234d78214e8180b51d237adda154"></a>0</p> 110</td> 111<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a1d350e36a773420baf5ebb930cd5ad66"><a name="zh-cn_topic_0000001173324679_a1d350e36a773420baf5ebb930cd5ad66"></a><a name="zh-cn_topic_0000001173324679_a1d350e36a773420baf5ebb930cd5ad66"></a>使用简写属性设置所有的外边距属性，该属性可以有1到4个值。</p> 112<a name="zh-cn_topic_0000001173324679_ul5333133311105"></a><a name="zh-cn_topic_0000001173324679_ul5333133311105"></a><ul id="zh-cn_topic_0000001173324679_ul5333133311105"><li><p id="zh-cn_topic_0000001173324679_p03345339103"><a name="zh-cn_topic_0000001173324679_p03345339103"></a><a name="zh-cn_topic_0000001173324679_p03345339103"></a>只有一个值时，这个值会被指定给全部的四个边。</p> 113</li><li><p id="zh-cn_topic_0000001173324679_p1133420334108"><a name="zh-cn_topic_0000001173324679_p1133420334108"></a><a name="zh-cn_topic_0000001173324679_p1133420334108"></a>两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。</p> 114</li><li><p id="zh-cn_topic_0000001173324679_p193341533191015"><a name="zh-cn_topic_0000001173324679_p193341533191015"></a><a name="zh-cn_topic_0000001173324679_p193341533191015"></a>三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。</p> 115</li><li><p id="zh-cn_topic_0000001173324679_p733412334102"><a name="zh-cn_topic_0000001173324679_p733412334102"></a><a name="zh-cn_topic_0000001173324679_p733412334102"></a>四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。</p> 116</li></ul> 117</td> 118</tr> 119<tr id="zh-cn_topic_0000001173324679_rbcdeb5f7b53646bcbeb0d9ce45842f34"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a70939a36b2b04dd8bec21f5bddc8637e"><a name="zh-cn_topic_0000001173324679_a70939a36b2b04dd8bec21f5bddc8637e"></a><a name="zh-cn_topic_0000001173324679_a70939a36b2b04dd8bec21f5bddc8637e"></a>margin-[left|top|right|bottom]</p> 120</td> 121<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_ae53ac9ac370d483990e04ea9789c1e49"><a name="zh-cn_topic_0000001173324679_ae53ac9ac370d483990e04ea9789c1e49"></a><a name="zh-cn_topic_0000001173324679_ae53ac9ac370d483990e04ea9789c1e49"></a><length> | <percentage><sup id="zh-cn_topic_0000001173324679_sup378331720532"><a name="zh-cn_topic_0000001173324679_sup378331720532"></a><a name="zh-cn_topic_0000001173324679_sup378331720532"></a><span>5+</span></sup></p> 122</td> 123<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a180cd037e6174e5c82f35a3a66b6f2ec"><a name="zh-cn_topic_0000001173324679_a180cd037e6174e5c82f35a3a66b6f2ec"></a><a name="zh-cn_topic_0000001173324679_a180cd037e6174e5c82f35a3a66b6f2ec"></a>0</p> 124</td> 125<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a487d09add6e54c5c89fa4f22e9318271"><a name="zh-cn_topic_0000001173324679_a487d09add6e54c5c89fa4f22e9318271"></a><a name="zh-cn_topic_0000001173324679_a487d09add6e54c5c89fa4f22e9318271"></a>设置左、上、右、下外边距属性。</p> 126</td> 127</tr> 128<tr id="zh-cn_topic_0000001173324679_row2347125383714"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p9492107123816"><a name="zh-cn_topic_0000001173324679_p9492107123816"></a><a name="zh-cn_topic_0000001173324679_p9492107123816"></a>margin-[start|end]</p> 129</td> 130<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p164928753815"><a name="zh-cn_topic_0000001173324679_p164928753815"></a><a name="zh-cn_topic_0000001173324679_p164928753815"></a><length> | <percentage><sup id="zh-cn_topic_0000001173324679_sup164498399219"><a name="zh-cn_topic_0000001173324679_sup164498399219"></a><a name="zh-cn_topic_0000001173324679_sup164498399219"></a><span>5+</span></sup></p> 131</td> 132<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p1549213793811"><a name="zh-cn_topic_0000001173324679_p1549213793811"></a><a name="zh-cn_topic_0000001173324679_p1549213793811"></a>0</p> 133</td> 134<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p1049212715388"><a name="zh-cn_topic_0000001173324679_p1049212715388"></a><a name="zh-cn_topic_0000001173324679_p1049212715388"></a>设置起始和末端外边距属性。</p> 135</td> 136</tr> 137<tr id="zh-cn_topic_0000001173324679_r60ccba1f3cc54a4399490c92f2fd350d"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a222bb48f24014f2eb2b16a1a840bbebb"><a name="zh-cn_topic_0000001173324679_a222bb48f24014f2eb2b16a1a840bbebb"></a><a name="zh-cn_topic_0000001173324679_a222bb48f24014f2eb2b16a1a840bbebb"></a>border</p> 138</td> 139<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a79b4eaf9983c44d0aad39ff04d0997a8"><a name="zh-cn_topic_0000001173324679_a79b4eaf9983c44d0aad39ff04d0997a8"></a><a name="zh-cn_topic_0000001173324679_a79b4eaf9983c44d0aad39ff04d0997a8"></a>-</p> 140</td> 141<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_aac320f4f0a42401aa7fa778d9829d77c"><a name="zh-cn_topic_0000001173324679_aac320f4f0a42401aa7fa778d9829d77c"></a><a name="zh-cn_topic_0000001173324679_aac320f4f0a42401aa7fa778d9829d77c"></a>0</p> 142</td> 143<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a9cd962871a4c467a8e1ef452621d5cd7"><a name="zh-cn_topic_0000001173324679_a9cd962871a4c467a8e1ef452621d5cd7"></a><a name="zh-cn_topic_0000001173324679_a9cd962871a4c467a8e1ef452621d5cd7"></a>使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。</p> 144</td> 145</tr> 146<tr id="zh-cn_topic_0000001173324679_rf47e6860036e4ababdf04b51974c019c"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a987708c0864a4128af094334f1b024b3"><a name="zh-cn_topic_0000001173324679_a987708c0864a4128af094334f1b024b3"></a><a name="zh-cn_topic_0000001173324679_a987708c0864a4128af094334f1b024b3"></a>border-style</p> 147</td> 148<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p513631613319"><a name="zh-cn_topic_0000001173324679_p513631613319"></a><a name="zh-cn_topic_0000001173324679_p513631613319"></a>string</p> 149</td> 150<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a2567083af59c40e58e3e4d9b0ddf1485"><a name="zh-cn_topic_0000001173324679_a2567083af59c40e58e3e4d9b0ddf1485"></a><a name="zh-cn_topic_0000001173324679_a2567083af59c40e58e3e4d9b0ddf1485"></a>solid</p> 151</td> 152<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p342285712314"><a name="zh-cn_topic_0000001173324679_p342285712314"></a><a name="zh-cn_topic_0000001173324679_p342285712314"></a>使用简写属性设置所有边框的样式，可选值为：</p> 153<a name="zh-cn_topic_0000001173324679_ul1470834505612"></a><a name="zh-cn_topic_0000001173324679_ul1470834505612"></a><ul id="zh-cn_topic_0000001173324679_ul1470834505612"><li>dotted：显示为一系列圆点，圆点半径为border-width的一半。</li><li>dashed：显示为一系列短的方形虚线。</li></ul> 154<a name="zh-cn_topic_0000001173324679_ul15621125545612"></a><a name="zh-cn_topic_0000001173324679_ul15621125545612"></a><ul id="zh-cn_topic_0000001173324679_ul15621125545612"><li>solid：显示为一条实线。</li></ul> 155</td> 156</tr> 157<tr id="zh-cn_topic_0000001173324679_row4953937976"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p119531437370"><a name="zh-cn_topic_0000001173324679_p119531437370"></a><a name="zh-cn_topic_0000001173324679_p119531437370"></a>border-[left|top|right|bottom]-style</p> 158</td> 159<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p129532037175"><a name="zh-cn_topic_0000001173324679_p129532037175"></a><a name="zh-cn_topic_0000001173324679_p129532037175"></a>string</p> 160</td> 161<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p495312372717"><a name="zh-cn_topic_0000001173324679_p495312372717"></a><a name="zh-cn_topic_0000001173324679_p495312372717"></a>solid</p> 162</td> 163<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p595353718719"><a name="zh-cn_topic_0000001173324679_p595353718719"></a><a name="zh-cn_topic_0000001173324679_p595353718719"></a>分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。</p> 164</td> 165</tr> 166<tr id="zh-cn_topic_0000001173324679_r6d2787d3df7c4c88ab88ab99a87459d3"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a8afd82b1aba547d3b0188b749518b2de"><a name="zh-cn_topic_0000001173324679_a8afd82b1aba547d3b0188b749518b2de"></a><a name="zh-cn_topic_0000001173324679_a8afd82b1aba547d3b0188b749518b2de"></a>border-[left|top|right|bottom]</p> 167</td> 168<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_ac4b8a3b39e5446b5868f1f2989dc9590"><a name="zh-cn_topic_0000001173324679_ac4b8a3b39e5446b5868f1f2989dc9590"></a><a name="zh-cn_topic_0000001173324679_ac4b8a3b39e5446b5868f1f2989dc9590"></a>-</p> 169</td> 170<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a3420bc82bd17458ab82fa996ade7064c"><a name="zh-cn_topic_0000001173324679_a3420bc82bd17458ab82fa996ade7064c"></a><a name="zh-cn_topic_0000001173324679_a3420bc82bd17458ab82fa996ade7064c"></a>-</p> 171</td> 172<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_af4178a066c344412afbd38f4b0c44818"><a name="zh-cn_topic_0000001173324679_af4178a066c344412afbd38f4b0c44818"></a><a name="zh-cn_topic_0000001173324679_af4178a066c344412afbd38f4b0c44818"></a>使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。</p> 173</td> 174</tr> 175<tr id="zh-cn_topic_0000001173324679_ra8d2cc3cfa024bb3a5c167e3a84d974e"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_adf0e0afedc774afca9cda0e509391029"><a name="zh-cn_topic_0000001173324679_adf0e0afedc774afca9cda0e509391029"></a><a name="zh-cn_topic_0000001173324679_adf0e0afedc774afca9cda0e509391029"></a>border-width</p> 176</td> 177<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a0782ea2c45eb4864a8df82f30dd2cd5f"><a name="zh-cn_topic_0000001173324679_a0782ea2c45eb4864a8df82f30dd2cd5f"></a><a name="zh-cn_topic_0000001173324679_a0782ea2c45eb4864a8df82f30dd2cd5f"></a><length></p> 178</td> 179<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a395cbedd521145bd820b9171ee2dd7ac"><a name="zh-cn_topic_0000001173324679_a395cbedd521145bd820b9171ee2dd7ac"></a><a name="zh-cn_topic_0000001173324679_a395cbedd521145bd820b9171ee2dd7ac"></a>0</p> 180</td> 181<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a7ae60621ea3341818a03bfdffa641894"><a name="zh-cn_topic_0000001173324679_a7ae60621ea3341818a03bfdffa641894"></a><a name="zh-cn_topic_0000001173324679_a7ae60621ea3341818a03bfdffa641894"></a>使用简写属性设置元素的所有边框宽度<span id="zh-cn_topic_0000001173324679_ph13216153653618"><a name="zh-cn_topic_0000001173324679_ph13216153653618"></a><a name="zh-cn_topic_0000001173324679_ph13216153653618"></a>，或者单独为各边边框设置宽度</span>。</p> 182</td> 183</tr> 184<tr id="zh-cn_topic_0000001173324679_r97f2117589624b018d91ca8a099f3264"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a7371edc07c664266a2e1866f31ad0d0c"><a name="zh-cn_topic_0000001173324679_a7371edc07c664266a2e1866f31ad0d0c"></a><a name="zh-cn_topic_0000001173324679_a7371edc07c664266a2e1866f31ad0d0c"></a>border-[left|top|right|bottom]-width</p> 185</td> 186<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a2faa532b841948a7b6598542b4eccc7b"><a name="zh-cn_topic_0000001173324679_a2faa532b841948a7b6598542b4eccc7b"></a><a name="zh-cn_topic_0000001173324679_a2faa532b841948a7b6598542b4eccc7b"></a><length></p> 187</td> 188<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a87f38cfa47f54bc18c32f9671c0f9ca6"><a name="zh-cn_topic_0000001173324679_a87f38cfa47f54bc18c32f9671c0f9ca6"></a><a name="zh-cn_topic_0000001173324679_a87f38cfa47f54bc18c32f9671c0f9ca6"></a>0</p> 189</td> 190<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a20386e66c3834d5f96cf9435c4715c5b"><a name="zh-cn_topic_0000001173324679_a20386e66c3834d5f96cf9435c4715c5b"></a><a name="zh-cn_topic_0000001173324679_a20386e66c3834d5f96cf9435c4715c5b"></a>分别设置左、上、右、下四个边框的宽度。</p> 191</td> 192</tr> 193<tr id="zh-cn_topic_0000001173324679_rebb331f7734b46b98d7d630beb4bfc40"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a40a816cf0a03489d81f209a8aa7d81a6"><a name="zh-cn_topic_0000001173324679_a40a816cf0a03489d81f209a8aa7d81a6"></a><a name="zh-cn_topic_0000001173324679_a40a816cf0a03489d81f209a8aa7d81a6"></a>border-color</p> 194</td> 195<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_afcc7c948ae0947b2a78002d31f2f9748"><a name="zh-cn_topic_0000001173324679_afcc7c948ae0947b2a78002d31f2f9748"></a><a name="zh-cn_topic_0000001173324679_afcc7c948ae0947b2a78002d31f2f9748"></a><color></p> 196</td> 197<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_ae0909d2b896342f9b2196fe0dce72920"><a name="zh-cn_topic_0000001173324679_ae0909d2b896342f9b2196fe0dce72920"></a><a name="zh-cn_topic_0000001173324679_ae0909d2b896342f9b2196fe0dce72920"></a>black</p> 198</td> 199<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a76fd98995e1d4217aa703fecd69325c7"><a name="zh-cn_topic_0000001173324679_a76fd98995e1d4217aa703fecd69325c7"></a><a name="zh-cn_topic_0000001173324679_a76fd98995e1d4217aa703fecd69325c7"></a>使用简写属性设置元素的所有边框颜色<span id="zh-cn_topic_0000001173324679_ph112821853719"><a name="zh-cn_topic_0000001173324679_ph112821853719"></a><a name="zh-cn_topic_0000001173324679_ph112821853719"></a>，或者单独为各边边框设置颜色</span>。</p> 200</td> 201</tr> 202<tr id="zh-cn_topic_0000001173324679_r92bbe455dcbe40c9aeeb71145a46dee7"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a2afc646d6a2549548bcd5c4b9bed1fb5"><a name="zh-cn_topic_0000001173324679_a2afc646d6a2549548bcd5c4b9bed1fb5"></a><a name="zh-cn_topic_0000001173324679_a2afc646d6a2549548bcd5c4b9bed1fb5"></a>border-[left|top|right|bottom]-color</p> 203</td> 204<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a34556866a4f54f5da88f148fc698867b"><a name="zh-cn_topic_0000001173324679_a34556866a4f54f5da88f148fc698867b"></a><a name="zh-cn_topic_0000001173324679_a34556866a4f54f5da88f148fc698867b"></a><color></p> 205</td> 206<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a8ff58e18553846a38e82c69149e2aa30"><a name="zh-cn_topic_0000001173324679_a8ff58e18553846a38e82c69149e2aa30"></a><a name="zh-cn_topic_0000001173324679_a8ff58e18553846a38e82c69149e2aa30"></a>black</p> 207</td> 208<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a5c85947d388c4c7fbf0de07b022bb44e"><a name="zh-cn_topic_0000001173324679_a5c85947d388c4c7fbf0de07b022bb44e"></a><a name="zh-cn_topic_0000001173324679_a5c85947d388c4c7fbf0de07b022bb44e"></a>分别设置左、上、右、下四个边框的颜色。</p> 209</td> 210</tr> 211<tr id="zh-cn_topic_0000001173324679_r466497bc9bfd48f9a3e718beb413ac0c"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a65974e3078c447a383fb9237cc4ffa32"><a name="zh-cn_topic_0000001173324679_a65974e3078c447a383fb9237cc4ffa32"></a><a name="zh-cn_topic_0000001173324679_a65974e3078c447a383fb9237cc4ffa32"></a>border-radius</p> 212</td> 213<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a413fd0aea8b243349a19f825e96ee8b6"><a name="zh-cn_topic_0000001173324679_a413fd0aea8b243349a19f825e96ee8b6"></a><a name="zh-cn_topic_0000001173324679_a413fd0aea8b243349a19f825e96ee8b6"></a><length></p> 214</td> 215<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_af786857698c74e259f52589a6670a0a1"><a name="zh-cn_topic_0000001173324679_af786857698c74e259f52589a6670a0a1"></a><a name="zh-cn_topic_0000001173324679_af786857698c74e259f52589a6670a0a1"></a>-</p> 216</td> 217<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a52ca834f42124d3b8b12bbf54914fc96"><a name="zh-cn_topic_0000001173324679_a52ca834f42124d3b8b12bbf54914fc96"></a><a name="zh-cn_topic_0000001173324679_a52ca834f42124d3b8b12bbf54914fc96"></a>border-radius属性是设置元素的外边框圆角半径。<span id="zh-cn_topic_0000001173324679_ph817510495223"><a name="zh-cn_topic_0000001173324679_ph817510495223"></a><a name="zh-cn_topic_0000001173324679_ph817510495223"></a>设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。</span></p> 218</td> 219</tr> 220<tr id="zh-cn_topic_0000001173324679_rd4fc211b573447a1a1b7841a144eccae"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a466f1f8bc2fb404e82e8417c5133eacb"><a name="zh-cn_topic_0000001173324679_a466f1f8bc2fb404e82e8417c5133eacb"></a><a name="zh-cn_topic_0000001173324679_a466f1f8bc2fb404e82e8417c5133eacb"></a>border-[top|bottom]-[left|right]-radius</p> 221</td> 222<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a499fe910d0284647abc48b1bd0eb4868"><a name="zh-cn_topic_0000001173324679_a499fe910d0284647abc48b1bd0eb4868"></a><a name="zh-cn_topic_0000001173324679_a499fe910d0284647abc48b1bd0eb4868"></a><length></p> 223</td> 224<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_ac142d1054eee499f948069f46129c492"><a name="zh-cn_topic_0000001173324679_ac142d1054eee499f948069f46129c492"></a><a name="zh-cn_topic_0000001173324679_ac142d1054eee499f948069f46129c492"></a>-</p> 225</td> 226<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a63757091a86c4ced97f0c39d37a2117c"><a name="zh-cn_topic_0000001173324679_a63757091a86c4ced97f0c39d37a2117c"></a><a name="zh-cn_topic_0000001173324679_a63757091a86c4ced97f0c39d37a2117c"></a>分别设置左上，右上，右下和左下四个角的圆角半径。</p> 227</td> 228</tr> 229<tr id="zh-cn_topic_0000001173324679_re84d5481999b4984ac1242cc5cdf20ca"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_ae335be2c6150440fb31b40b1ca117858"><a name="zh-cn_topic_0000001173324679_ae335be2c6150440fb31b40b1ca117858"></a><a name="zh-cn_topic_0000001173324679_ae335be2c6150440fb31b40b1ca117858"></a>background</p> 230</td> 231<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a394a81171c5c4d1aa81b94fc5d2f0f07"><a name="zh-cn_topic_0000001173324679_a394a81171c5c4d1aa81b94fc5d2f0f07"></a><a name="zh-cn_topic_0000001173324679_a394a81171c5c4d1aa81b94fc5d2f0f07"></a><linear-gradient></p> 232</td> 233<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a0734de04e90e470cb608e8d5f42c6874"><a name="zh-cn_topic_0000001173324679_a0734de04e90e470cb608e8d5f42c6874"></a><a name="zh-cn_topic_0000001173324679_a0734de04e90e470cb608e8d5f42c6874"></a>-</p> 234</td> 235<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a1d2985ee819d4cfd87861080354def51"><a name="zh-cn_topic_0000001173324679_a1d2985ee819d4cfd87861080354def51"></a><a name="zh-cn_topic_0000001173324679_a1d2985ee819d4cfd87861080354def51"></a>仅支持设置<a href="js-components-common-gradient.md">渐变样式</a>，与background-color、background-image不兼容。</p> 236</td> 237</tr> 238<tr id="zh-cn_topic_0000001173324679_r81e36151ade9499aa21d3c0b72da1111"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a2977672444224b738a566c61225961c2"><a name="zh-cn_topic_0000001173324679_a2977672444224b738a566c61225961c2"></a><a name="zh-cn_topic_0000001173324679_a2977672444224b738a566c61225961c2"></a>background-color</p> 239</td> 240<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a87186748ed7c4694aef0095d8a7f8e43"><a name="zh-cn_topic_0000001173324679_a87186748ed7c4694aef0095d8a7f8e43"></a><a name="zh-cn_topic_0000001173324679_a87186748ed7c4694aef0095d8a7f8e43"></a><color></p> 241</td> 242<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a2775a3cca8994bec9b754af0d2455eb5"><a name="zh-cn_topic_0000001173324679_a2775a3cca8994bec9b754af0d2455eb5"></a><a name="zh-cn_topic_0000001173324679_a2775a3cca8994bec9b754af0d2455eb5"></a>-</p> 243</td> 244<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a372b6089bf9746f091c91fa49b571f1d"><a name="zh-cn_topic_0000001173324679_a372b6089bf9746f091c91fa49b571f1d"></a><a name="zh-cn_topic_0000001173324679_a372b6089bf9746f091c91fa49b571f1d"></a>设置背景颜色。</p> 245</td> 246</tr> 247<tr id="zh-cn_topic_0000001173324679_r80de1dc3e37848b38f65fd4ef7711bfa"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_ab2dff80cd59c4db1bf4293172f89735e"><a name="zh-cn_topic_0000001173324679_ab2dff80cd59c4db1bf4293172f89735e"></a><a name="zh-cn_topic_0000001173324679_ab2dff80cd59c4db1bf4293172f89735e"></a>background-image</p> 248</td> 249<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_ad9a7e9f2469b45238a6a0ac6da232286"><a name="zh-cn_topic_0000001173324679_ad9a7e9f2469b45238a6a0ac6da232286"></a><a name="zh-cn_topic_0000001173324679_ad9a7e9f2469b45238a6a0ac6da232286"></a>string</p> 250</td> 251<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a73fb72c96edd488ba74c364568e345c6"><a name="zh-cn_topic_0000001173324679_a73fb72c96edd488ba74c364568e345c6"></a><a name="zh-cn_topic_0000001173324679_a73fb72c96edd488ba74c364568e345c6"></a>-</p> 252</td> 253<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a24de29e3cb4d476fabe55d48d69350a8"><a name="zh-cn_topic_0000001173324679_a24de29e3cb4d476fabe55d48d69350a8"></a><a name="zh-cn_topic_0000001173324679_a24de29e3cb4d476fabe55d48d69350a8"></a>设置背景图片。与background-color、background不兼容，支持本地图片资源地址。</p> 254<p id="zh-cn_topic_0000001173324679_p434668142510"><a name="zh-cn_topic_0000001173324679_p434668142510"></a><a name="zh-cn_topic_0000001173324679_p434668142510"></a>示例：</p> 255<a name="zh-cn_topic_0000001173324679_ul11766913172513"></a><a name="zh-cn_topic_0000001173324679_ul11766913172513"></a><ul id="zh-cn_topic_0000001173324679_ul11766913172513"><li>background-image: url("/common/background.png")</li></ul> 256</td> 257</tr> 258<tr id="zh-cn_topic_0000001173324679_re1870d7c91f148e8ad7264a95eb2c580"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_af81424fd1fbf4f5da65ea5d136390494"><a name="zh-cn_topic_0000001173324679_af81424fd1fbf4f5da65ea5d136390494"></a><a name="zh-cn_topic_0000001173324679_af81424fd1fbf4f5da65ea5d136390494"></a>background-size</p> 259</td> 260<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><a name="zh-cn_topic_0000001173324679_ul1065173641310"></a><a name="zh-cn_topic_0000001173324679_ul1065173641310"></a><ul id="zh-cn_topic_0000001173324679_ul1065173641310"><li>string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 261</td> 262<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a222f4e09239a4ab08880d1d9544d337c"><a name="zh-cn_topic_0000001173324679_a222f4e09239a4ab08880d1d9544d337c"></a><a name="zh-cn_topic_0000001173324679_a222f4e09239a4ab08880d1d9544d337c"></a>auto</p> 263</td> 264<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p91971112114318"><a name="zh-cn_topic_0000001173324679_p91971112114318"></a><a name="zh-cn_topic_0000001173324679_p91971112114318"></a>设置背景图片的大小。</p> 265<a name="zh-cn_topic_0000001173324679_ul41331853154111"></a><a name="zh-cn_topic_0000001173324679_ul41331853154111"></a><ul id="zh-cn_topic_0000001173324679_ul41331853154111"><li>string可选值：<a name="zh-cn_topic_0000001173324679_ul13611494111"></a><a name="zh-cn_topic_0000001173324679_ul13611494111"></a><ul id="zh-cn_topic_0000001173324679_ul13611494111"><li>contain：把图片扩展至最大尺寸，以使其高度和宽度完全适用内容区域。</li><li>cover：把背景图片扩展至足够大，以使背景图片完全覆盖背景区域；背景图片的某些部分也许无法显示在背景定位区域中。</li><li>auto：保持原图的比例不变。</li></ul> 266</li><li>length值参数方式：<p id="zh-cn_topic_0000001173324679_p1840244924418"><a name="zh-cn_topic_0000001173324679_p1840244924418"></a><a name="zh-cn_topic_0000001173324679_p1840244924418"></a>设置背景图片的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。</p> 267</li><li>百分比参数方式：<p id="zh-cn_topic_0000001173324679_p17936154410457"><a name="zh-cn_topic_0000001173324679_p17936154410457"></a><a name="zh-cn_topic_0000001173324679_p17936154410457"></a>以父元素的百分比来设置背景图片的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。</p> 268</li></ul> 269</td> 270</tr> 271<tr id="zh-cn_topic_0000001173324679_r2f8ec5072a754e038c89308dd8997259"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a9957170386754fb5b648ba2114bd52d4"><a name="zh-cn_topic_0000001173324679_a9957170386754fb5b648ba2114bd52d4"></a><a name="zh-cn_topic_0000001173324679_a9957170386754fb5b648ba2114bd52d4"></a>background-repeat</p> 272</td> 273<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a155b4cc325e747279694d36c2fa69bcc"><a name="zh-cn_topic_0000001173324679_a155b4cc325e747279694d36c2fa69bcc"></a><a name="zh-cn_topic_0000001173324679_a155b4cc325e747279694d36c2fa69bcc"></a>string</p> 274</td> 275<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a82029c0dc1d540cf994f690b451c48f4"><a name="zh-cn_topic_0000001173324679_a82029c0dc1d540cf994f690b451c48f4"></a><a name="zh-cn_topic_0000001173324679_a82029c0dc1d540cf994f690b451c48f4"></a>repeat</p> 276</td> 277<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_afb8e41c117884b368a0f1df348be8e54"><a name="zh-cn_topic_0000001173324679_afb8e41c117884b368a0f1df348be8e54"></a><a name="zh-cn_topic_0000001173324679_afb8e41c117884b368a0f1df348be8e54"></a>针对重复背景图片样式进行设置，背景图片默认在水平和垂直方向上重复。</p> 278<a name="zh-cn_topic_0000001173324679_ul8236153103612"></a><a name="zh-cn_topic_0000001173324679_ul8236153103612"></a><ul id="zh-cn_topic_0000001173324679_ul8236153103612"><li>repeat：在水平轴和竖直轴上同时重复绘制图片。</li><li>repeat-x：只在水平轴上重复绘制图片。</li><li>repeat-y：只在竖直轴上重复绘制图片。</li><li>no-repeat：不会重复绘制图片。</li></ul> 279</td> 280</tr> 281<tr id="zh-cn_topic_0000001173324679_r74d37bef16544cddbabf94a6c0d8f0f6"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a709eb4a9fa87428897bebb4a98693df2"><a name="zh-cn_topic_0000001173324679_a709eb4a9fa87428897bebb4a98693df2"></a><a name="zh-cn_topic_0000001173324679_a709eb4a9fa87428897bebb4a98693df2"></a>background-position</p> 282</td> 283<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><a name="zh-cn_topic_0000001173324679_ul8874155216502"></a><a name="zh-cn_topic_0000001173324679_ul8874155216502"></a><ul id="zh-cn_topic_0000001173324679_ul8874155216502"><li>string string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 284</td> 285<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a6f8f5d1c92f447bd868a841ad1a33cb1"><a name="zh-cn_topic_0000001173324679_a6f8f5d1c92f447bd868a841ad1a33cb1"></a><a name="zh-cn_topic_0000001173324679_a6f8f5d1c92f447bd868a841ad1a33cb1"></a>0px 0px</p> 286</td> 287<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><a name="zh-cn_topic_0000001173324679_ul1590812103363"></a><a name="zh-cn_topic_0000001173324679_ul1590812103363"></a><ul id="zh-cn_topic_0000001173324679_ul1590812103363"><li>关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<a name="zh-cn_topic_0000001173324679_ul1453531734716"></a><a name="zh-cn_topic_0000001173324679_ul1453531734716"></a><ul id="zh-cn_topic_0000001173324679_ul1453531734716"><li>left：水平方向上最左侧。</li><li>right：水平方向上最右侧。</li><li>top：竖直方向上最顶部。</li><li>bottom：竖直方向上最底部。</li><li>center：水平方向或竖直方向上中间位置。</li></ul> 288</li></ul> 289<a name="zh-cn_topic_0000001173324679_ul10908121023615"></a><a name="zh-cn_topic_0000001173324679_ul10908121023615"></a><ul id="zh-cn_topic_0000001173324679_ul10908121023615"><li>length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。</li><li>百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。</li><li>可以混合使用<percentage>和<length>。</li></ul> 290</td> 291</tr> 292<tr id="zh-cn_topic_0000001173324679_row1994075164514"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p17940151124510"><a name="zh-cn_topic_0000001173324679_p17940151124510"></a><a name="zh-cn_topic_0000001173324679_p17940151124510"></a>box-shadow<sup id="zh-cn_topic_0000001173324679_sup787912854114"><a name="zh-cn_topic_0000001173324679_sup787912854114"></a><a name="zh-cn_topic_0000001173324679_sup787912854114"></a><span>5+</span></sup></p> 293</td> 294<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p194095154515"><a name="zh-cn_topic_0000001173324679_p194095154515"></a><a name="zh-cn_topic_0000001173324679_p194095154515"></a>string</p> 295</td> 296<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p169401351174518"><a name="zh-cn_topic_0000001173324679_p169401351174518"></a><a name="zh-cn_topic_0000001173324679_p169401351174518"></a>0</p> 297</td> 298<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p15549650195115"><a name="zh-cn_topic_0000001173324679_p15549650195115"></a><a name="zh-cn_topic_0000001173324679_p15549650195115"></a>语法：box-shadow: h-shadow v-shadow blur spread color</p> 299<p id="zh-cn_topic_0000001173324679_p15254131712491"><a name="zh-cn_topic_0000001173324679_p15254131712491"></a><a name="zh-cn_topic_0000001173324679_p15254131712491"></a>通过这个样式可以设置当前组件的阴影样式，包括水平位置(必填)、垂直位置(必填)、模糊半径(可选，默认值为0)、阴影延展距离(可选，默认值为0)、阴影颜色(可选，默认值为黑色)。</p> 300<p id="zh-cn_topic_0000001173324679_p1431193714518"><a name="zh-cn_topic_0000001173324679_p1431193714518"></a><a name="zh-cn_topic_0000001173324679_p1431193714518"></a>示例：</p> 301<a name="zh-cn_topic_0000001173324679_ul131475255546"></a><a name="zh-cn_topic_0000001173324679_ul131475255546"></a><ul id="zh-cn_topic_0000001173324679_ul131475255546"><li>box-shadow :10px 20px 5px 10px #888888</li><li>box-shadow :100px 100px 30px red</li><li>box-shadow :-100px -100px 0px 40px</li></ul> 302</td> 303</tr> 304<tr id="zh-cn_topic_0000001173324679_row82361948145612"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p1823644815567"><a name="zh-cn_topic_0000001173324679_p1823644815567"></a><a name="zh-cn_topic_0000001173324679_p1823644815567"></a>filter<sup id="zh-cn_topic_0000001173324679_sup1229754054112"><a name="zh-cn_topic_0000001173324679_sup1229754054112"></a><a name="zh-cn_topic_0000001173324679_sup1229754054112"></a><span>5+</span></sup></p> 305</td> 306<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p92361748195619"><a name="zh-cn_topic_0000001173324679_p92361748195619"></a><a name="zh-cn_topic_0000001173324679_p92361748195619"></a>string</p> 307</td> 308<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p92369486566"><a name="zh-cn_topic_0000001173324679_p92369486566"></a><a name="zh-cn_topic_0000001173324679_p92369486566"></a>-</p> 309</td> 310<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p52361548125619"><a name="zh-cn_topic_0000001173324679_p52361548125619"></a><a name="zh-cn_topic_0000001173324679_p52361548125619"></a>语法：filter: blur(px)</p> 311<p id="zh-cn_topic_0000001173324679_p1290013181816"><a name="zh-cn_topic_0000001173324679_p1290013181816"></a><a name="zh-cn_topic_0000001173324679_p1290013181816"></a>通过这个样式可以设置当前组件布局范围的内容模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。</p> 312<p id="zh-cn_topic_0000001173324679_p95511781130"><a name="zh-cn_topic_0000001173324679_p95511781130"></a><a name="zh-cn_topic_0000001173324679_p95511781130"></a>示例：</p> 313<a name="zh-cn_topic_0000001173324679_ul59611445632"></a><a name="zh-cn_topic_0000001173324679_ul59611445632"></a><ul id="zh-cn_topic_0000001173324679_ul59611445632"><li>filter: blur(10px)</li></ul> 314</td> 315</tr> 316<tr id="zh-cn_topic_0000001173324679_row673615525313"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p1973618528317"><a name="zh-cn_topic_0000001173324679_p1973618528317"></a><a name="zh-cn_topic_0000001173324679_p1973618528317"></a>backdrop-filter<sup id="zh-cn_topic_0000001173324679_sup1384544716411"><a name="zh-cn_topic_0000001173324679_sup1384544716411"></a><a name="zh-cn_topic_0000001173324679_sup1384544716411"></a><span>5+</span></sup></p> 317</td> 318<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p1473620522315"><a name="zh-cn_topic_0000001173324679_p1473620522315"></a><a name="zh-cn_topic_0000001173324679_p1473620522315"></a>string</p> 319</td> 320<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p873645220314"><a name="zh-cn_topic_0000001173324679_p873645220314"></a><a name="zh-cn_topic_0000001173324679_p873645220314"></a>-</p> 321</td> 322<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p208828572419"><a name="zh-cn_topic_0000001173324679_p208828572419"></a><a name="zh-cn_topic_0000001173324679_p208828572419"></a>语法：backdrop-filter: blur(px)</p> 323<p id="zh-cn_topic_0000001173324679_p98987193518"><a name="zh-cn_topic_0000001173324679_p98987193518"></a><a name="zh-cn_topic_0000001173324679_p98987193518"></a>通过这个样式可以设置当前组件布局范围的背景模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。</p> 324<p id="zh-cn_topic_0000001173324679_p88987195517"><a name="zh-cn_topic_0000001173324679_p88987195517"></a><a name="zh-cn_topic_0000001173324679_p88987195517"></a>示例：</p> 325<a name="zh-cn_topic_0000001173324679_ul48981719759"></a><a name="zh-cn_topic_0000001173324679_ul48981719759"></a><ul id="zh-cn_topic_0000001173324679_ul48981719759"><li>backdrop-filter: blur(10px)</li></ul> 326</td> 327</tr> 328<tr id="zh-cn_topic_0000001173324679_rebe2f395a6c34b04be864a46ba6b10ae"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p134581712103910"><a name="zh-cn_topic_0000001173324679_p134581712103910"></a><a name="zh-cn_topic_0000001173324679_p134581712103910"></a>opacity</p> 329</td> 330<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a45185999ae584676af4c36467c2ade8b"><a name="zh-cn_topic_0000001173324679_a45185999ae584676af4c36467c2ade8b"></a><a name="zh-cn_topic_0000001173324679_a45185999ae584676af4c36467c2ade8b"></a>number</p> 331</td> 332<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a09ff20dda8e44794bca18c84f413d972"><a name="zh-cn_topic_0000001173324679_a09ff20dda8e44794bca18c84f413d972"></a><a name="zh-cn_topic_0000001173324679_a09ff20dda8e44794bca18c84f413d972"></a>1</p> 333</td> 334<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p122515161139"><a name="zh-cn_topic_0000001173324679_p122515161139"></a><a name="zh-cn_topic_0000001173324679_p122515161139"></a>元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。</p> 335</td> 336</tr> 337<tr id="zh-cn_topic_0000001173324679_r0dd61199ee2f4b64bd93b7448bbde433"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_aeda9e2f8d8344958bf4f43d429dcb55e"><a name="zh-cn_topic_0000001173324679_aeda9e2f8d8344958bf4f43d429dcb55e"></a><a name="zh-cn_topic_0000001173324679_aeda9e2f8d8344958bf4f43d429dcb55e"></a>display</p> 338</td> 339<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p1544115441446"><a name="zh-cn_topic_0000001173324679_p1544115441446"></a><a name="zh-cn_topic_0000001173324679_p1544115441446"></a>string</p> 340<p id="zh-cn_topic_0000001173324679_aaaa164aa970b490fb048e5f260f1c661"><a name="zh-cn_topic_0000001173324679_aaaa164aa970b490fb048e5f260f1c661"></a><a name="zh-cn_topic_0000001173324679_aaaa164aa970b490fb048e5f260f1c661"></a></p> 341</td> 342<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_aa5ce61466c9847dbb7f44852338d9006"><a name="zh-cn_topic_0000001173324679_aa5ce61466c9847dbb7f44852338d9006"></a><a name="zh-cn_topic_0000001173324679_aa5ce61466c9847dbb7f44852338d9006"></a>flex</p> 343</td> 344<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p23704018414"><a name="zh-cn_topic_0000001173324679_p23704018414"></a><a name="zh-cn_topic_0000001173324679_p23704018414"></a>确定一个元素所产生的框的类型，可选值为：</p> 345<a name="zh-cn_topic_0000001173324679_ul12227103394916"></a><a name="zh-cn_topic_0000001173324679_ul12227103394916"></a><ul id="zh-cn_topic_0000001173324679_ul12227103394916"><li>flex：弹性布局。</li><li>none：不渲染此元素。</li></ul> 346</td> 347</tr> 348<tr id="zh-cn_topic_0000001173324679_r2260108545704aeb885aa4e3fd8cdbcb"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_aa2ed1da39c8e4ad78829712734226ab9"><a name="zh-cn_topic_0000001173324679_aa2ed1da39c8e4ad78829712734226ab9"></a><a name="zh-cn_topic_0000001173324679_aa2ed1da39c8e4ad78829712734226ab9"></a>visibility</p> 349</td> 350<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p15475737486"><a name="zh-cn_topic_0000001173324679_p15475737486"></a><a name="zh-cn_topic_0000001173324679_p15475737486"></a>string</p> 351<p id="zh-cn_topic_0000001173324679_aabfb0eb044194745af56c313f40e7781"><a name="zh-cn_topic_0000001173324679_aabfb0eb044194745af56c313f40e7781"></a><a name="zh-cn_topic_0000001173324679_aabfb0eb044194745af56c313f40e7781"></a></p> 352</td> 353<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_acaca80d4ef9a4f0d87adf92cb2d1ff9a"><a name="zh-cn_topic_0000001173324679_acaca80d4ef9a4f0d87adf92cb2d1ff9a"></a><a name="zh-cn_topic_0000001173324679_acaca80d4ef9a4f0d87adf92cb2d1ff9a"></a>visible</p> 354</td> 355<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p1568839154517"><a name="zh-cn_topic_0000001173324679_p1568839154517"></a><a name="zh-cn_topic_0000001173324679_p1568839154517"></a>是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：</p> 356<a name="zh-cn_topic_0000001173324679_ul751984164920"></a><a name="zh-cn_topic_0000001173324679_ul751984164920"></a><ul id="zh-cn_topic_0000001173324679_ul751984164920"><li>visible：元素正常显示。</li><li>hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。</li></ul> 357<div class="note" id="zh-cn_topic_0000001173324679_note4549524649"><a name="zh-cn_topic_0000001173324679_note4549524649"></a><a name="zh-cn_topic_0000001173324679_note4549524649"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173324679_p25499241642"><a name="zh-cn_topic_0000001173324679_p25499241642"></a><a name="zh-cn_topic_0000001173324679_p25499241642"></a>visibility和display样式都设置时，仅display生效。</p> 358</div></div> 359</td> 360</tr> 361<tr id="zh-cn_topic_0000001173324679_r92a9fc54538249b5828980638c60071b"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_ad74a6a48aca7439e9344c18c26b4177e"><a name="zh-cn_topic_0000001173324679_ad74a6a48aca7439e9344c18c26b4177e"></a><a name="zh-cn_topic_0000001173324679_ad74a6a48aca7439e9344c18c26b4177e"></a>flex</p> 362</td> 363<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a2e6e5192a1534872be5fcfd9f83e3fdc"><a name="zh-cn_topic_0000001173324679_a2e6e5192a1534872be5fcfd9f83e3fdc"></a><a name="zh-cn_topic_0000001173324679_a2e6e5192a1534872be5fcfd9f83e3fdc"></a>number | string</p> 364</td> 365<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a8512eda38e25410685be8a8992890257"><a name="zh-cn_topic_0000001173324679_a8512eda38e25410685be8a8992890257"></a><a name="zh-cn_topic_0000001173324679_a8512eda38e25410685be8a8992890257"></a>-</p> 366</td> 367<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a11c317cdfa7d4066878d86c6b3bcbd82"><a name="zh-cn_topic_0000001173324679_a11c317cdfa7d4066878d86c6b3bcbd82"></a><a name="zh-cn_topic_0000001173324679_a11c317cdfa7d4066878d86c6b3bcbd82"></a>规定当前组件如何适应父组件中的可用空间。</p> 368<p id="zh-cn_topic_0000001173324679_p6968144051814"><a name="zh-cn_topic_0000001173324679_p6968144051814"></a><a name="zh-cn_topic_0000001173324679_p6968144051814"></a>flex可以指定1个、2个<sup id="zh-cn_topic_0000001173324679_sup894453017315"><a name="zh-cn_topic_0000001173324679_sup894453017315"></a><a name="zh-cn_topic_0000001173324679_sup894453017315"></a>5+</sup>或3个<sup id="zh-cn_topic_0000001173324679_sup1255142393114"><a name="zh-cn_topic_0000001173324679_sup1255142393114"></a><a name="zh-cn_topic_0000001173324679_sup1255142393114"></a>5+</sup>值。</p> 369<p id="zh-cn_topic_0000001173324679_p16733313171911"><a name="zh-cn_topic_0000001173324679_p16733313171911"></a><a name="zh-cn_topic_0000001173324679_p16733313171911"></a>单值语法：</p> 370<a name="zh-cn_topic_0000001173324679_ul93371539192211"></a><a name="zh-cn_topic_0000001173324679_ul93371539192211"></a><ul id="zh-cn_topic_0000001173324679_ul93371539192211"><li>一个无单位数：用来设置组件的flex-grow。</li><li>一个有效的宽度值<sup id="zh-cn_topic_0000001173324679_sup133014373318"><a name="zh-cn_topic_0000001173324679_sup133014373318"></a><a name="zh-cn_topic_0000001173324679_sup133014373318"></a>5+</sup>：用来设置组件的flex-basis。</li></ul> 371<p id="zh-cn_topic_0000001173324679_p6786171632018"><a name="zh-cn_topic_0000001173324679_p6786171632018"></a><a name="zh-cn_topic_0000001173324679_p6786171632018"></a>双值语法<sup id="zh-cn_topic_0000001173324679_sup39514502313"><a name="zh-cn_topic_0000001173324679_sup39514502313"></a><a name="zh-cn_topic_0000001173324679_sup39514502313"></a>5+</sup>：</p> 372<p id="zh-cn_topic_0000001173324679_p6400429122011"><a name="zh-cn_topic_0000001173324679_p6400429122011"></a><a name="zh-cn_topic_0000001173324679_p6400429122011"></a>第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：</p> 373<a name="zh-cn_topic_0000001173324679_ul767043502219"></a><a name="zh-cn_topic_0000001173324679_ul767043502219"></a><ul id="zh-cn_topic_0000001173324679_ul767043502219"><li>一个无单位数：用来设置组件的flex-shrink。</li><li>一个有效的宽度值：用来设置组件的flex-basis。</li></ul> 374<p id="zh-cn_topic_0000001173324679_p748416351217"><a name="zh-cn_topic_0000001173324679_p748416351217"></a><a name="zh-cn_topic_0000001173324679_p748416351217"></a>三值语法<sup id="zh-cn_topic_0000001173324679_sup718215417318"><a name="zh-cn_topic_0000001173324679_sup718215417318"></a><a name="zh-cn_topic_0000001173324679_sup718215417318"></a>5+</sup>：</p> 375<p id="zh-cn_topic_0000001173324679_p7373204832111"><a name="zh-cn_topic_0000001173324679_p7373204832111"></a><a name="zh-cn_topic_0000001173324679_p7373204832111"></a>第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。</p> 376<div class="note" id="zh-cn_topic_0000001173324679_note34891253201520"><a name="zh-cn_topic_0000001173324679_note34891253201520"></a><a name="zh-cn_topic_0000001173324679_note34891253201520"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173324679_p1248915538152"><a name="zh-cn_topic_0000001173324679_p1248915538152"></a><a name="zh-cn_topic_0000001173324679_p1248915538152"></a>仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item><sup id="zh-cn_topic_0000001173324679_sup151201733905"><a name="zh-cn_topic_0000001173324679_sup151201733905"></a><a name="zh-cn_topic_0000001173324679_sup151201733905"></a><span>5+</span></sup>时生效。</p> 377</div></div> 378</td> 379</tr> 380<tr id="zh-cn_topic_0000001173324679_r5f813e3521f94c6e995388e103618445"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a5d88cacaaf5c4f6a87390ab916b695c6"><a name="zh-cn_topic_0000001173324679_a5d88cacaaf5c4f6a87390ab916b695c6"></a><a name="zh-cn_topic_0000001173324679_a5d88cacaaf5c4f6a87390ab916b695c6"></a>flex-grow</p> 381</td> 382<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a2c379e3af283446da446f1631e572efd"><a name="zh-cn_topic_0000001173324679_a2c379e3af283446da446f1631e572efd"></a><a name="zh-cn_topic_0000001173324679_a2c379e3af283446da446f1631e572efd"></a>number</p> 383</td> 384<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_aa374f6c7415a4ee48a06930d76c55be7"><a name="zh-cn_topic_0000001173324679_aa374f6c7415a4ee48a06930d76c55be7"></a><a name="zh-cn_topic_0000001173324679_aa374f6c7415a4ee48a06930d76c55be7"></a>0</p> 385</td> 386<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p4437122419557"><a name="zh-cn_topic_0000001173324679_p4437122419557"></a><a name="zh-cn_topic_0000001173324679_p4437122419557"></a>设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。</p> 387<div class="note" id="zh-cn_topic_0000001173324679_note201231734212"><a name="zh-cn_topic_0000001173324679_note201231734212"></a><a name="zh-cn_topic_0000001173324679_note201231734212"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173324679_p184555314553"><a name="zh-cn_topic_0000001173324679_p184555314553"></a><a name="zh-cn_topic_0000001173324679_p184555314553"></a>仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item><sup id="zh-cn_topic_0000001173324679_sup1562417244014"><a name="zh-cn_topic_0000001173324679_sup1562417244014"></a><a name="zh-cn_topic_0000001173324679_sup1562417244014"></a><span>5+</span></sup>时生效。</p> 388</div></div> 389</td> 390</tr> 391<tr id="zh-cn_topic_0000001173324679_r61282e986a5f4475a63704a514097c62"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_ac65ef7e2b1f24a13b09c495f643168c9"><a name="zh-cn_topic_0000001173324679_ac65ef7e2b1f24a13b09c495f643168c9"></a><a name="zh-cn_topic_0000001173324679_ac65ef7e2b1f24a13b09c495f643168c9"></a>flex-shrink</p> 392</td> 393<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a98e7d367f0e649699892ae5bad6ade37"><a name="zh-cn_topic_0000001173324679_a98e7d367f0e649699892ae5bad6ade37"></a><a name="zh-cn_topic_0000001173324679_a98e7d367f0e649699892ae5bad6ade37"></a>number</p> 394</td> 395<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a422d978368814d12a33201cb839060ee"><a name="zh-cn_topic_0000001173324679_a422d978368814d12a33201cb839060ee"></a><a name="zh-cn_topic_0000001173324679_a422d978368814d12a33201cb839060ee"></a>1</p> 396</td> 397<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_ab032342dfe56460ca742800de482ca0f"><a name="zh-cn_topic_0000001173324679_ab032342dfe56460ca742800de482ca0f"></a><a name="zh-cn_topic_0000001173324679_ab032342dfe56460ca742800de482ca0f"></a>设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。</p> 398<div class="note" id="zh-cn_topic_0000001173324679_note147160917217"><a name="zh-cn_topic_0000001173324679_note147160917217"></a><a name="zh-cn_topic_0000001173324679_note147160917217"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173324679_p844914328577"><a name="zh-cn_topic_0000001173324679_p844914328577"></a><a name="zh-cn_topic_0000001173324679_p844914328577"></a>仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item><sup id="zh-cn_topic_0000001173324679_sup11917913210"><a name="zh-cn_topic_0000001173324679_sup11917913210"></a><a name="zh-cn_topic_0000001173324679_sup11917913210"></a><span>5+</span></sup>时生效。</p> 399</div></div> 400</td> 401</tr> 402<tr id="zh-cn_topic_0000001173324679_r7758e3a4a5934e188ff90936ec9de163"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a82c323a994634032963169eeee1a55e4"><a name="zh-cn_topic_0000001173324679_a82c323a994634032963169eeee1a55e4"></a><a name="zh-cn_topic_0000001173324679_a82c323a994634032963169eeee1a55e4"></a>flex-basis</p> 403</td> 404<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p1148910787"><a name="zh-cn_topic_0000001173324679_p1148910787"></a><a name="zh-cn_topic_0000001173324679_p1148910787"></a><length></p> 405<p id="zh-cn_topic_0000001173324679_a43613cf0c2184c0d8b44e8d292f6edb7"><a name="zh-cn_topic_0000001173324679_a43613cf0c2184c0d8b44e8d292f6edb7"></a><a name="zh-cn_topic_0000001173324679_a43613cf0c2184c0d8b44e8d292f6edb7"></a></p> 406</td> 407<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_ab9e1c7dc25f840e58993af05c1d32109"><a name="zh-cn_topic_0000001173324679_ab9e1c7dc25f840e58993af05c1d32109"></a><a name="zh-cn_topic_0000001173324679_ab9e1c7dc25f840e58993af05c1d32109"></a>-</p> 408</td> 409<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a0993ef9b0ef64785a76e6310dd834f09"><a name="zh-cn_topic_0000001173324679_a0993ef9b0ef64785a76e6310dd834f09"></a><a name="zh-cn_topic_0000001173324679_a0993ef9b0ef64785a76e6310dd834f09"></a>设置组件在主轴方向上的初始大小。</p> 410<div class="note" id="zh-cn_topic_0000001173324679_note62848141222"><a name="zh-cn_topic_0000001173324679_note62848141222"></a><a name="zh-cn_topic_0000001173324679_note62848141222"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173324679_p16711745115718"><a name="zh-cn_topic_0000001173324679_p16711745115718"></a><a name="zh-cn_topic_0000001173324679_p16711745115718"></a>仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item><sup id="zh-cn_topic_0000001173324679_sup18172111711115"><a name="zh-cn_topic_0000001173324679_sup18172111711115"></a><a name="zh-cn_topic_0000001173324679_sup18172111711115"></a><span>5+</span></sup>时生效。</p> 411</div></div> 412</td> 413</tr> 414<tr id="zh-cn_topic_0000001173324679_row68521132124719"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p1852163211475"><a name="zh-cn_topic_0000001173324679_p1852163211475"></a><a name="zh-cn_topic_0000001173324679_p1852163211475"></a>align-self<sup id="zh-cn_topic_0000001173324679_sup188874714717"><a name="zh-cn_topic_0000001173324679_sup188874714717"></a><a name="zh-cn_topic_0000001173324679_sup188874714717"></a>6+</sup></p> 415</td> 416<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p1853113211479"><a name="zh-cn_topic_0000001173324679_p1853113211479"></a><a name="zh-cn_topic_0000001173324679_p1853113211479"></a>string</p> 417</td> 418<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p15208521144814"><a name="zh-cn_topic_0000001173324679_p15208521144814"></a><a name="zh-cn_topic_0000001173324679_p15208521144814"></a>-</p> 419</td> 420<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p18535328478"><a name="zh-cn_topic_0000001173324679_p18535328478"></a><a name="zh-cn_topic_0000001173324679_p18535328478"></a>设置自身在父元素交叉轴上的对齐方式，该样式会覆盖父元素的align-items样式，仅在父容器为div、list。可选值为：</p> 421<a name="zh-cn_topic_0000001173324679_ul16801138134811"></a><a name="zh-cn_topic_0000001173324679_ul16801138134811"></a><ul id="zh-cn_topic_0000001173324679_ul16801138134811"><li>stretch 弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。</li><li>flex-start 元素向交叉轴起点对齐。</li><li>flex-end 元素向交叉轴终点对齐。</li><li>center 元素在交叉轴居中。</li><li>baseline 元素在交叉轴基线对齐。</li></ul> 422</td> 423</tr> 424<tr id="zh-cn_topic_0000001173324679_r873309c7368d4074bbd6048bf6f7d8b6"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a50180d720a374549ae72c848e53320cb"><a name="zh-cn_topic_0000001173324679_a50180d720a374549ae72c848e53320cb"></a><a name="zh-cn_topic_0000001173324679_a50180d720a374549ae72c848e53320cb"></a>position</p> 425</td> 426<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_a63672ed9a4c040f7a6ec9c8089b79bb6"><a name="zh-cn_topic_0000001173324679_a63672ed9a4c040f7a6ec9c8089b79bb6"></a><a name="zh-cn_topic_0000001173324679_a63672ed9a4c040f7a6ec9c8089b79bb6"></a>string</p> 427</td> 428<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a2666820c71eb420485e4d20e55b4eabe"><a name="zh-cn_topic_0000001173324679_a2666820c71eb420485e4d20e55b4eabe"></a><a name="zh-cn_topic_0000001173324679_a2666820c71eb420485e4d20e55b4eabe"></a>relative</p> 429</td> 430<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_ae28abf4e47a740efbd45a8f280577912"><a name="zh-cn_topic_0000001173324679_ae28abf4e47a740efbd45a8f280577912"></a><a name="zh-cn_topic_0000001173324679_ae28abf4e47a740efbd45a8f280577912"></a>设置元素的定位类型，不支持动态变更。</p> 431<a name="zh-cn_topic_0000001173324679_ul17185232185014"></a><a name="zh-cn_topic_0000001173324679_ul17185232185014"></a><ul id="zh-cn_topic_0000001173324679_ul17185232185014"><li>fixed：相对与整个界面进行定位。</li><li>absolute：相对于父元素进行定位。</li><li>relative：相对于其正常位置进行定位。</li></ul> 432<div class="note" id="zh-cn_topic_0000001173324679_note167617191219"><a name="zh-cn_topic_0000001173324679_note167617191219"></a><a name="zh-cn_topic_0000001173324679_note167617191219"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173324679_p1839092815101"><a name="zh-cn_topic_0000001173324679_p1839092815101"></a><a name="zh-cn_topic_0000001173324679_p1839092815101"></a>absolute属性仅在父容器为<div>、<stack>时生效。</p> 433</div></div> 434</td> 435</tr> 436<tr id="zh-cn_topic_0000001173324679_r134d69553376475c9aada631cc431396"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_a70405cb9696b4329ac7625af93310018"><a name="zh-cn_topic_0000001173324679_a70405cb9696b4329ac7625af93310018"></a><a name="zh-cn_topic_0000001173324679_a70405cb9696b4329ac7625af93310018"></a>[left|top<span id="zh-cn_topic_0000001173324679_ph14927143614712"><a name="zh-cn_topic_0000001173324679_ph14927143614712"></a><a name="zh-cn_topic_0000001173324679_ph14927143614712"></a>|right|bottom</span>]</p> 437</td> 438<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p1849062221214"><a name="zh-cn_topic_0000001173324679_p1849062221214"></a><a name="zh-cn_topic_0000001173324679_p1849062221214"></a><length> | <percentage><sup id="zh-cn_topic_0000001173324679_sup780503811531"><a name="zh-cn_topic_0000001173324679_sup780503811531"></a><a name="zh-cn_topic_0000001173324679_sup780503811531"></a><span>6</span><span>+</span></sup></p> 439</td> 440<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_a579ac7c03d1d46758ebaacd565d86ed3"><a name="zh-cn_topic_0000001173324679_a579ac7c03d1d46758ebaacd565d86ed3"></a><a name="zh-cn_topic_0000001173324679_a579ac7c03d1d46758ebaacd565d86ed3"></a>-</p> 441</td> 442<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_a9a662a62cd9b40eaa0cb9ca082b6d1c2"><a name="zh-cn_topic_0000001173324679_a9a662a62cd9b40eaa0cb9ca082b6d1c2"></a><a name="zh-cn_topic_0000001173324679_a9a662a62cd9b40eaa0cb9ca082b6d1c2"></a>left|top<span id="zh-cn_topic_0000001173324679_ph116191353154713"><a name="zh-cn_topic_0000001173324679_ph116191353154713"></a><a name="zh-cn_topic_0000001173324679_ph116191353154713"></a>|right|bottom</span>需要配合position样式使用，来确定元素的偏移位置。</p> 443<a name="zh-cn_topic_0000001173324679_ul12671003525"></a><a name="zh-cn_topic_0000001173324679_ul12671003525"></a><ul id="zh-cn_topic_0000001173324679_ul12671003525"><li>left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。</li><li>top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。</li><li>right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。</li><li>bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。</li></ul> 444</td> 445</tr> 446<tr id="zh-cn_topic_0000001173324679_row3707155785514"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p582085817554"><a name="zh-cn_topic_0000001173324679_p582085817554"></a><a name="zh-cn_topic_0000001173324679_p582085817554"></a>[start | end]<sup id="zh-cn_topic_0000001173324679_sup072040165910"><a name="zh-cn_topic_0000001173324679_sup072040165910"></a><a name="zh-cn_topic_0000001173324679_sup072040165910"></a><span>6+</span></sup></p> 447</td> 448<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p1182055810551"><a name="zh-cn_topic_0000001173324679_p1182055810551"></a><a name="zh-cn_topic_0000001173324679_p1182055810551"></a><length> | <percentage></p> 449</td> 450<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p18820145810555"><a name="zh-cn_topic_0000001173324679_p18820145810555"></a><a name="zh-cn_topic_0000001173324679_p18820145810555"></a>-</p> 451</td> 452<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p3748160105710"><a name="zh-cn_topic_0000001173324679_p3748160105710"></a><a name="zh-cn_topic_0000001173324679_p3748160105710"></a>start | end需要配合position样式使用，来确定元素的偏移位置。</p> 453<a name="zh-cn_topic_0000001173324679_ul177495065715"></a><a name="zh-cn_topic_0000001173324679_ul177495065715"></a><ul id="zh-cn_topic_0000001173324679_ul177495065715"><li>start属性规定元素的起始边缘。该属性定义了定位元素起始外边距边界与其包含块起始边界之间的偏移。</li><li>end属性规定元素的结尾边缘。该属性定义了一个定位元素的结尾边距边界与其包含块结尾边界之间的偏移。</li></ul> 454</td> 455</tr> 456<tr id="zh-cn_topic_0000001173324679_row18741629184812"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p183768265013"><a name="zh-cn_topic_0000001173324679_p183768265013"></a><a name="zh-cn_topic_0000001173324679_p183768265013"></a>z-index<sup id="zh-cn_topic_0000001173324679_sup47906591838"><a name="zh-cn_topic_0000001173324679_sup47906591838"></a><a name="zh-cn_topic_0000001173324679_sup47906591838"></a><span>6+</span></sup></p> 457</td> 458<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p33757225014"><a name="zh-cn_topic_0000001173324679_p33757225014"></a><a name="zh-cn_topic_0000001173324679_p33757225014"></a>number</p> 459</td> 460<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p2037472185010"><a name="zh-cn_topic_0000001173324679_p2037472185010"></a><a name="zh-cn_topic_0000001173324679_p2037472185010"></a>-</p> 461</td> 462<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p235472205018"><a name="zh-cn_topic_0000001173324679_p235472205018"></a><a name="zh-cn_topic_0000001173324679_p235472205018"></a>表示对于同一父节点其子节点的渲染顺序。数值越大，渲染数据越靠后。</p> 463<div class="note" id="zh-cn_topic_0000001173324679_note2062416595525"><a name="zh-cn_topic_0000001173324679_note2062416595525"></a><a name="zh-cn_topic_0000001173324679_note2062416595525"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173324679_p1862510596524"><a name="zh-cn_topic_0000001173324679_p1862510596524"></a><a name="zh-cn_topic_0000001173324679_p1862510596524"></a>z-index不支持auto，并且opacity等其他样式不会影响z-index的渲染顺序。</p> 464</div></div> 465</td> 466</tr> 467<tr id="zh-cn_topic_0000001173324679_row81981557165511"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p201997571556"><a name="zh-cn_topic_0000001173324679_p201997571556"></a><a name="zh-cn_topic_0000001173324679_p201997571556"></a>image-fill<sup id="zh-cn_topic_0000001173324679_sup173048147917"><a name="zh-cn_topic_0000001173324679_sup173048147917"></a><a name="zh-cn_topic_0000001173324679_sup173048147917"></a>6+</sup></p> 468</td> 469<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p12199165718558"><a name="zh-cn_topic_0000001173324679_p12199165718558"></a><a name="zh-cn_topic_0000001173324679_p12199165718558"></a><color></p> 470</td> 471<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p15199105785518"><a name="zh-cn_topic_0000001173324679_p15199105785518"></a><a name="zh-cn_topic_0000001173324679_p15199105785518"></a>-</p> 472</td> 473<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p819913575558"><a name="zh-cn_topic_0000001173324679_p819913575558"></a><a name="zh-cn_topic_0000001173324679_p819913575558"></a>为svg图片填充颜色，支持组件范围（与设置图片资源的属性）：button（icon属性）、piece（icon属性）、search（icon属性）、input（headericon属性）、textarea（headericon属性）、image（src属性）、toolbar-item(icon属性)。</p> 474<p id="zh-cn_topic_0000001173324679_p10159166173611"><a name="zh-cn_topic_0000001173324679_p10159166173611"></a><a name="zh-cn_topic_0000001173324679_p10159166173611"></a>svg图片文件内的fill属性颜色值在渲染时将被替换为image-fill所配的颜色值，且仅对svg图片内显示声明的fill属性生效。</p> 475</td> 476</tr> 477<tr id="zh-cn_topic_0000001173324679_row1123215188489"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p82332182487"><a name="zh-cn_topic_0000001173324679_p82332182487"></a><a name="zh-cn_topic_0000001173324679_p82332182487"></a>clip-path<sup id="zh-cn_topic_0000001173324679_sup72421215138"><a name="zh-cn_topic_0000001173324679_sup72421215138"></a><a name="zh-cn_topic_0000001173324679_sup72421215138"></a>6+</sup></p> 478</td> 479<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p823311817485"><a name="zh-cn_topic_0000001173324679_p823311817485"></a><a name="zh-cn_topic_0000001173324679_p823311817485"></a>[ <geometry-box> || <basic-shape> ] | none</p> 480</td> 481<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p12330183481"><a name="zh-cn_topic_0000001173324679_p12330183481"></a><a name="zh-cn_topic_0000001173324679_p12330183481"></a>-</p> 482</td> 483<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p3233818114810"><a name="zh-cn_topic_0000001173324679_p3233818114810"></a><a name="zh-cn_topic_0000001173324679_p3233818114810"></a>设置组件的裁剪区域。区域内的部分显示，区域外的不显示。</p> 484<p id="zh-cn_topic_0000001173324679_p154319832714"><a name="zh-cn_topic_0000001173324679_p154319832714"></a><a name="zh-cn_topic_0000001173324679_p154319832714"></a><geometry-box>：表示裁剪区域的作用范围，默认为border-box。可选值为：</p> 485<a name="zh-cn_topic_0000001173324679_ul17350142316276"></a><a name="zh-cn_topic_0000001173324679_ul17350142316276"></a><ul id="zh-cn_topic_0000001173324679_ul17350142316276"><li>margin-box：margin计算入长宽尺寸内。</li><li>border-box：border计算入长宽尺寸内。</li><li>padding-box：padding计算入长宽尺寸内。</li><li>content-box：margin/border/padding不计算入长宽尺寸内。</li></ul> 486<p id="zh-cn_topic_0000001173324679_p27639253501"><a name="zh-cn_topic_0000001173324679_p27639253501"></a><a name="zh-cn_topic_0000001173324679_p27639253501"></a><basic-shape>：表示裁剪的形状。包含以下类型：</p> 487<a name="zh-cn_topic_0000001173324679_ul1217191102613"></a><a name="zh-cn_topic_0000001173324679_ul1217191102613"></a><ul id="zh-cn_topic_0000001173324679_ul1217191102613"><li>inset，格式为：inset( <percentage>{1,4} [ round <'border-radius'> ]? )。</li><li>circle，格式为：circle( [ <percentage> ]? [ at <percentage> <percentage> ]? )。</li><li>ellipse，格式为：ellipse( [ <percentage>{2} ]? [ at <percentage> <percentage> ]? )。</li><li>polygon，格式为：polygon( [ <percentage> <percentage> ]# )</li><li>path，格式为：path( <string> )。</li></ul> 488</td> 489</tr> 490<tr id="zh-cn_topic_0000001173324679_row1142541162310"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p1442631102316"><a name="zh-cn_topic_0000001173324679_p1442631102316"></a><a name="zh-cn_topic_0000001173324679_p1442631102316"></a>mask-image<sup id="zh-cn_topic_0000001173324679_sup39819127293"><a name="zh-cn_topic_0000001173324679_sup39819127293"></a><a name="zh-cn_topic_0000001173324679_sup39819127293"></a>6+</sup></p> 491</td> 492<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><a name="zh-cn_topic_0000001173324679_ul1679352103015"></a><a name="zh-cn_topic_0000001173324679_ul1679352103015"></a><ul id="zh-cn_topic_0000001173324679_ul1679352103015"><li><linear-gradient></li><li>string</li></ul> 493</td> 494<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p144260132315"><a name="zh-cn_topic_0000001173324679_p144260132315"></a><a name="zh-cn_topic_0000001173324679_p144260132315"></a>-</p> 495</td> 496<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p142619115239"><a name="zh-cn_topic_0000001173324679_p142619115239"></a><a name="zh-cn_topic_0000001173324679_p142619115239"></a>设置渐变色遮罩或本地图片设置。</p> 497<p id="zh-cn_topic_0000001173324679_p19331162103919"><a name="zh-cn_topic_0000001173324679_p19331162103919"></a><a name="zh-cn_topic_0000001173324679_p19331162103919"></a>设置渐变色遮罩，示例：</p> 498<p id="zh-cn_topic_0000001173324679_p73311427390"><a name="zh-cn_topic_0000001173324679_p73311427390"></a><a name="zh-cn_topic_0000001173324679_p73311427390"></a>linear-gradient(to left, black, white)</p> 499<p id="zh-cn_topic_0000001173324679_p183310263912"><a name="zh-cn_topic_0000001173324679_p183310263912"></a><a name="zh-cn_topic_0000001173324679_p183310263912"></a>设置纯色遮罩，示例：</p> 500<p id="zh-cn_topic_0000001173324679_p143319223910"><a name="zh-cn_topic_0000001173324679_p143319223910"></a><a name="zh-cn_topic_0000001173324679_p143319223910"></a>linear-gradient(to right, grey , grey)</p> 501<p id="zh-cn_topic_0000001173324679_p1933119218398"><a name="zh-cn_topic_0000001173324679_p1933119218398"></a><a name="zh-cn_topic_0000001173324679_p1933119218398"></a>设置本地svg图片为遮罩，示例：url(common/mask.svg)</p> 502</td> 503</tr> 504<tr id="zh-cn_topic_0000001173324679_row1620144617234"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p19620146162316"><a name="zh-cn_topic_0000001173324679_p19620146162316"></a><a name="zh-cn_topic_0000001173324679_p19620146162316"></a>mask-size<sup id="zh-cn_topic_0000001173324679_sup19969212192918"><a name="zh-cn_topic_0000001173324679_sup19969212192918"></a><a name="zh-cn_topic_0000001173324679_sup19969212192918"></a>6+</sup></p> 505</td> 506<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><a name="zh-cn_topic_0000001173324679_ul16293555102918"></a><a name="zh-cn_topic_0000001173324679_ul16293555102918"></a><ul id="zh-cn_topic_0000001173324679_ul16293555102918"><li>string</li><li><length><length></li><li><percentage> <percentage></li></ul> 507</td> 508<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p2620154652312"><a name="zh-cn_topic_0000001173324679_p2620154652312"></a><a name="zh-cn_topic_0000001173324679_p2620154652312"></a>auto</p> 509</td> 510<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p265717128307"><a name="zh-cn_topic_0000001173324679_p265717128307"></a><a name="zh-cn_topic_0000001173324679_p265717128307"></a>设置遮罩图片显示大小，仅当mask-image为图片资源时有效。</p> 511<p id="zh-cn_topic_0000001173324679_p7530122117243"><a name="zh-cn_topic_0000001173324679_p7530122117243"></a><a name="zh-cn_topic_0000001173324679_p7530122117243"></a>string可选值：</p> 512<a name="zh-cn_topic_0000001173324679_ul484762411309"></a><a name="zh-cn_topic_0000001173324679_ul484762411309"></a><ul id="zh-cn_topic_0000001173324679_ul484762411309"><li>contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。</li><li>cover：把图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。</li><li>auto：保持原图的比例不变。</li></ul> 513<p id="zh-cn_topic_0000001173324679_p753017210249"><a name="zh-cn_topic_0000001173324679_p753017210249"></a><a name="zh-cn_topic_0000001173324679_p753017210249"></a>length值参数方式：设置图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。</p> 514<p id="zh-cn_topic_0000001173324679_p13530162192416"><a name="zh-cn_topic_0000001173324679_p13530162192416"></a><a name="zh-cn_topic_0000001173324679_p13530162192416"></a>百分比参数方式：以原图宽高的百分比来设置图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。</p> 515</td> 516</tr> 517<tr id="zh-cn_topic_0000001173324679_row208901544153013"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p128908448305"><a name="zh-cn_topic_0000001173324679_p128908448305"></a><a name="zh-cn_topic_0000001173324679_p128908448305"></a>mask-position<sup id="zh-cn_topic_0000001173324679_sup1836916162918"><a name="zh-cn_topic_0000001173324679_sup1836916162918"></a><a name="zh-cn_topic_0000001173324679_sup1836916162918"></a>6+</sup></p> 518</td> 519<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><a name="zh-cn_topic_0000001173324679_ul234618590304"></a><a name="zh-cn_topic_0000001173324679_ul234618590304"></a><ul id="zh-cn_topic_0000001173324679_ul234618590304"><li>string string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 520</td> 521<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p1389084413010"><a name="zh-cn_topic_0000001173324679_p1389084413010"></a><a name="zh-cn_topic_0000001173324679_p1389084413010"></a>0px 0px</p> 522</td> 523<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p563114246318"><a name="zh-cn_topic_0000001173324679_p563114246318"></a><a name="zh-cn_topic_0000001173324679_p563114246318"></a>设置遮罩图片显示位置，仅当mask-image为图片资源时有效。关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。</p> 524<p id="zh-cn_topic_0000001173324679_p158151314323"><a name="zh-cn_topic_0000001173324679_p158151314323"></a><a name="zh-cn_topic_0000001173324679_p158151314323"></a>string可选值：</p> 525<a name="zh-cn_topic_0000001173324679_ul1565191933217"></a><a name="zh-cn_topic_0000001173324679_ul1565191933217"></a><ul id="zh-cn_topic_0000001173324679_ul1565191933217"><li>left：水平方向上最左侧。</li><li>right：水平方向上最右侧。</li><li>top：竖直方向上最顶部。</li><li>bottom：竖直方向上最底部。</li><li>center：水平方向或竖直方向上中间位置。</li></ul> 526<p id="zh-cn_topic_0000001173324679_p8631192415319"><a name="zh-cn_topic_0000001173324679_p8631192415319"></a><a name="zh-cn_topic_0000001173324679_p8631192415319"></a>length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。</p> 527<p id="zh-cn_topic_0000001173324679_p4632424173116"><a name="zh-cn_topic_0000001173324679_p4632424173116"></a><a name="zh-cn_topic_0000001173324679_p4632424173116"></a>百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。</p> 528<p id="zh-cn_topic_0000001173324679_p6632122443117"><a name="zh-cn_topic_0000001173324679_p6632122443117"></a><a name="zh-cn_topic_0000001173324679_p6632122443117"></a>可以混合使用<percentage>和<length>。</p> 529</td> 530</tr> 531<tr id="zh-cn_topic_0000001173324679_row118287509458"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p128281150144513"><a name="zh-cn_topic_0000001173324679_p128281150144513"></a><a name="zh-cn_topic_0000001173324679_p128281150144513"></a>border-image-source<sup id="zh-cn_topic_0000001173324679_sup19243191410013"><a name="zh-cn_topic_0000001173324679_sup19243191410013"></a><a name="zh-cn_topic_0000001173324679_sup19243191410013"></a>7+</sup></p> 532</td> 533<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p1082816504459"><a name="zh-cn_topic_0000001173324679_p1082816504459"></a><a name="zh-cn_topic_0000001173324679_p1082816504459"></a>string</p> 534</td> 535<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p982805004510"><a name="zh-cn_topic_0000001173324679_p982805004510"></a><a name="zh-cn_topic_0000001173324679_p982805004510"></a>-</p> 536</td> 537<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p1828135012459"><a name="zh-cn_topic_0000001173324679_p1828135012459"></a><a name="zh-cn_topic_0000001173324679_p1828135012459"></a>指定元素的边框图片。</p> 538<p id="zh-cn_topic_0000001173324679_p186361230114613"><a name="zh-cn_topic_0000001173324679_p186361230114613"></a><a name="zh-cn_topic_0000001173324679_p186361230114613"></a>示例：</p> 539<p id="zh-cn_topic_0000001173324679_p16361430134618"><a name="zh-cn_topic_0000001173324679_p16361430134618"></a><a name="zh-cn_topic_0000001173324679_p16361430134618"></a>border-image-source: url("/common/images/border.png")</p> 540</td> 541</tr> 542<tr id="zh-cn_topic_0000001173324679_row15772115124718"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p1177295194716"><a name="zh-cn_topic_0000001173324679_p1177295194716"></a><a name="zh-cn_topic_0000001173324679_p1177295194716"></a>border-image-slice<sup id="zh-cn_topic_0000001173324679_sup1452910163014"><a name="zh-cn_topic_0000001173324679_sup1452910163014"></a><a name="zh-cn_topic_0000001173324679_sup1452910163014"></a>7+</sup></p> 543</td> 544<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p107724516472"><a name="zh-cn_topic_0000001173324679_p107724516472"></a><a name="zh-cn_topic_0000001173324679_p107724516472"></a><length> | <percentage></p> 545</td> 546<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p6772145184717"><a name="zh-cn_topic_0000001173324679_p6772145184717"></a><a name="zh-cn_topic_0000001173324679_p6772145184717"></a>0</p> 547</td> 548<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p1077219518478"><a name="zh-cn_topic_0000001173324679_p1077219518478"></a><a name="zh-cn_topic_0000001173324679_p1077219518478"></a>指定图片的边界内向偏移。</p> 549<p id="zh-cn_topic_0000001173324679_p10458230144817"><a name="zh-cn_topic_0000001173324679_p10458230144817"></a><a name="zh-cn_topic_0000001173324679_p10458230144817"></a>该属性可以有1到4个值：</p> 550<p id="zh-cn_topic_0000001173324679_p17458143094817"><a name="zh-cn_topic_0000001173324679_p17458143094817"></a><a name="zh-cn_topic_0000001173324679_p17458143094817"></a>指定一个值时，该值指定四个边的内偏移。</p> 551<p id="zh-cn_topic_0000001173324679_p74581930134818"><a name="zh-cn_topic_0000001173324679_p74581930134818"></a><a name="zh-cn_topic_0000001173324679_p74581930134818"></a>指定两个值时，第一个值指定上下两边的内偏移，第二个指定左右两边的内偏移。</p> 552<p id="zh-cn_topic_0000001173324679_p144581530114818"><a name="zh-cn_topic_0000001173324679_p144581530114818"></a><a name="zh-cn_topic_0000001173324679_p144581530114818"></a>指定三个值时，第一个指定上边的内偏移，第二个指定左右两边的内偏移，第三个指定下边的内偏移。</p> 553<p id="zh-cn_topic_0000001173324679_p54581730104812"><a name="zh-cn_topic_0000001173324679_p54581730104812"></a><a name="zh-cn_topic_0000001173324679_p54581730104812"></a>指定四个值时分别为上、右、下、左边的内偏移（顺时针顺序）。</p> 554</td> 555</tr> 556<tr id="zh-cn_topic_0000001173324679_row16936853134810"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p69367530487"><a name="zh-cn_topic_0000001173324679_p69367530487"></a><a name="zh-cn_topic_0000001173324679_p69367530487"></a>border-image-width<sup id="zh-cn_topic_0000001173324679_sup10426101817011"><a name="zh-cn_topic_0000001173324679_sup10426101817011"></a><a name="zh-cn_topic_0000001173324679_sup10426101817011"></a>7+</sup></p> 557</td> 558<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p189361653134813"><a name="zh-cn_topic_0000001173324679_p189361653134813"></a><a name="zh-cn_topic_0000001173324679_p189361653134813"></a><length> | <percentage></p> 559</td> 560<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p1293610533481"><a name="zh-cn_topic_0000001173324679_p1293610533481"></a><a name="zh-cn_topic_0000001173324679_p1293610533481"></a>0</p> 561</td> 562<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p19936125310481"><a name="zh-cn_topic_0000001173324679_p19936125310481"></a><a name="zh-cn_topic_0000001173324679_p19936125310481"></a>指定图片边界的宽度。</p> 563<p id="zh-cn_topic_0000001173324679_p1975945114498"><a name="zh-cn_topic_0000001173324679_p1975945114498"></a><a name="zh-cn_topic_0000001173324679_p1975945114498"></a>指定一个值时，该值指定四个边的宽度。</p> 564<p id="zh-cn_topic_0000001173324679_p875917519493"><a name="zh-cn_topic_0000001173324679_p875917519493"></a><a name="zh-cn_topic_0000001173324679_p875917519493"></a>指定两个值时，第一个值指定上下两边的宽度 ，第二个指定左右两边的宽度。</p> 565<p id="zh-cn_topic_0000001173324679_p375975111493"><a name="zh-cn_topic_0000001173324679_p375975111493"></a><a name="zh-cn_topic_0000001173324679_p375975111493"></a>指定三个值时，第一个指定上边的宽度 ，第二个指定左右两边的宽度 ，第三个指定下边的宽度。</p> 566<p id="zh-cn_topic_0000001173324679_p1767175114494"><a name="zh-cn_topic_0000001173324679_p1767175114494"></a><a name="zh-cn_topic_0000001173324679_p1767175114494"></a>指定四个值时分别为上、右、下、左边的宽度 （顺时针顺序）。</p> 567</td> 568</tr> 569<tr id="zh-cn_topic_0000001173324679_row14666115155018"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p266619519509"><a name="zh-cn_topic_0000001173324679_p266619519509"></a><a name="zh-cn_topic_0000001173324679_p266619519509"></a>border-image-outset<sup id="zh-cn_topic_0000001173324679_sup1098614191002"><a name="zh-cn_topic_0000001173324679_sup1098614191002"></a><a name="zh-cn_topic_0000001173324679_sup1098614191002"></a>7+</sup></p> 570</td> 571<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p1866635155016"><a name="zh-cn_topic_0000001173324679_p1866635155016"></a><a name="zh-cn_topic_0000001173324679_p1866635155016"></a><length> | <percentage></p> 572</td> 573<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p1566620520503"><a name="zh-cn_topic_0000001173324679_p1566620520503"></a><a name="zh-cn_topic_0000001173324679_p1566620520503"></a>0</p> 574</td> 575<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p766695175016"><a name="zh-cn_topic_0000001173324679_p766695175016"></a><a name="zh-cn_topic_0000001173324679_p766695175016"></a>指定边框图像可超出边框的大小。</p> 576<p id="zh-cn_topic_0000001173324679_p620321917512"><a name="zh-cn_topic_0000001173324679_p620321917512"></a><a name="zh-cn_topic_0000001173324679_p620321917512"></a>指定一个值时，边框图像在四个方向超出边框的距离。</p> 577<p id="zh-cn_topic_0000001173324679_p16203119165118"><a name="zh-cn_topic_0000001173324679_p16203119165118"></a><a name="zh-cn_topic_0000001173324679_p16203119165118"></a>指定两个值时，第一个值指定上下两边的边框图像超出边框的距离，第二个指定左右两边的 。</p> 578<p id="zh-cn_topic_0000001173324679_p15203201935120"><a name="zh-cn_topic_0000001173324679_p15203201935120"></a><a name="zh-cn_topic_0000001173324679_p15203201935120"></a>指定三个值时，第一个指定上边的边框图像超出边框的距离 ，第二个指定左右两边的边框图像超出边框的距离 ，第三个指定下边的边框图像超出边框的距离 。</p> 579<p id="zh-cn_topic_0000001173324679_p19203191995117"><a name="zh-cn_topic_0000001173324679_p19203191995117"></a><a name="zh-cn_topic_0000001173324679_p19203191995117"></a>指定四个值时分别为上、右、下、左边的边框图像超出边框的距离 （顺时针顺序）。</p> 580</td> 581</tr> 582<tr id="zh-cn_topic_0000001173324679_row1450318395541"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p14503113925419"><a name="zh-cn_topic_0000001173324679_p14503113925419"></a><a name="zh-cn_topic_0000001173324679_p14503113925419"></a>border-image-repeat<sup id="zh-cn_topic_0000001173324679_sup205575211502"><a name="zh-cn_topic_0000001173324679_sup205575211502"></a><a name="zh-cn_topic_0000001173324679_sup205575211502"></a>7+</sup></p> 583</td> 584<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p125031039135411"><a name="zh-cn_topic_0000001173324679_p125031039135411"></a><a name="zh-cn_topic_0000001173324679_p125031039135411"></a>string</p> 585</td> 586<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p115039397544"><a name="zh-cn_topic_0000001173324679_p115039397544"></a><a name="zh-cn_topic_0000001173324679_p115039397544"></a>stretch</p> 587</td> 588<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p25034393547"><a name="zh-cn_topic_0000001173324679_p25034393547"></a><a name="zh-cn_topic_0000001173324679_p25034393547"></a>定义图片如何填充边框。</p> 589<p id="zh-cn_topic_0000001173324679_p1565619515552"><a name="zh-cn_topic_0000001173324679_p1565619515552"></a><a name="zh-cn_topic_0000001173324679_p1565619515552"></a>stretch: 拉伸图片以填充边框。</p> 590<p id="zh-cn_topic_0000001173324679_p1065685145518"><a name="zh-cn_topic_0000001173324679_p1065685145518"></a><a name="zh-cn_topic_0000001173324679_p1065685145518"></a>repeat：平铺图片以填充边框。</p> 591<p id="zh-cn_topic_0000001173324679_p15656195116551"><a name="zh-cn_topic_0000001173324679_p15656195116551"></a><a name="zh-cn_topic_0000001173324679_p15656195116551"></a>round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。</p> 592<p id="zh-cn_topic_0000001173324679_p1341775662416"><a name="zh-cn_topic_0000001173324679_p1341775662416"></a><a name="zh-cn_topic_0000001173324679_p1341775662416"></a>space：平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图片）。</p> 593</td> 594</tr> 595<tr id="zh-cn_topic_0000001173324679_row836255814556"><td class="cellrowborder" valign="top" width="27.04270427042704%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324679_p536220584558"><a name="zh-cn_topic_0000001173324679_p536220584558"></a><a name="zh-cn_topic_0000001173324679_p536220584558"></a>border-image<sup id="zh-cn_topic_0000001173324679_sup13625822203"><a name="zh-cn_topic_0000001173324679_sup13625822203"></a><a name="zh-cn_topic_0000001173324679_sup13625822203"></a>7+</sup></p> 596</td> 597<td class="cellrowborder" valign="top" width="20.402040204020402%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324679_p17362135835517"><a name="zh-cn_topic_0000001173324679_p17362135835517"></a><a name="zh-cn_topic_0000001173324679_p17362135835517"></a>string</p> 598</td> 599<td class="cellrowborder" valign="top" width="11.601160116011602%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324679_p736317581553"><a name="zh-cn_topic_0000001173324679_p736317581553"></a><a name="zh-cn_topic_0000001173324679_p736317581553"></a>-</p> 600</td> 601<td class="cellrowborder" valign="top" width="40.954095409540955%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324679_p636314586558"><a name="zh-cn_topic_0000001173324679_p636314586558"></a><a name="zh-cn_topic_0000001173324679_p636314586558"></a>简写属性，可以选择以下两种设置方式：</p> 602<a name="zh-cn_topic_0000001173324679_ul192711844297"></a><a name="zh-cn_topic_0000001173324679_ul192711844297"></a><ul id="zh-cn_topic_0000001173324679_ul192711844297"><li>设置图片边框的每个属性。包含图像的边界向内偏移，图像边界的宽度，边框图像可超出边框盒的大小，图片如何填充边框，顺序设置为 border-image-source ,border-image-slice,border-image-width,border-image-outset,border-image-repeat，不设置的值为默认值。<p id="zh-cn_topic_0000001173324679_p2288416171016"><a name="zh-cn_topic_0000001173324679_p2288416171016"></a><a name="zh-cn_topic_0000001173324679_p2288416171016"></a>语法参考:<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-source" target="_blank" rel="noopener noreferrer"><'border-image-source'></a> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax#double_bar" target="_blank" rel="noopener noreferrer">||</a> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-slice" target="_blank" rel="noopener noreferrer"><'border-image-slice'></a> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" target="_blank" rel="noopener noreferrer">[</a> / <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-width" target="_blank" rel="noopener noreferrer"><'border-image-width'></a> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" target="_blank" rel="noopener noreferrer">|</a> / <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-width" target="_blank" rel="noopener noreferrer"><'border-image-width'></a><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax#question_mark" target="_blank" rel="noopener noreferrer">?</a> / <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-outset" target="_blank" rel="noopener noreferrer"><'border-image-outset'></a> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" target="_blank" rel="noopener noreferrer">]</a><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax#question_mark" target="_blank" rel="noopener noreferrer">?</a> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax#double_bar" target="_blank" rel="noopener noreferrer">||</a> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-repeat" target="_blank" rel="noopener noreferrer"><'border-image-repeat'></a></p> 603</li></ul> 604<a name="zh-cn_topic_0000001173324679_ul13090488916"></a><a name="zh-cn_topic_0000001173324679_ul13090488916"></a><ul id="zh-cn_topic_0000001173324679_ul13090488916"><li>渐变色边框<p id="zh-cn_topic_0000001173324679_p4219102819109"><a name="zh-cn_topic_0000001173324679_p4219102819109"></a><a name="zh-cn_topic_0000001173324679_p4219102819109"></a>示例:</p> 605<p id="zh-cn_topic_0000001173324679_p42198283101"><a name="zh-cn_topic_0000001173324679_p42198283101"></a><a name="zh-cn_topic_0000001173324679_p42198283101"></a>border-image: linear-gradient(red, yellow) 10px</p> 606</li></ul> 607</td> 608</tr> 609</tbody> 610</table> 611 612> **说明：** 613>通用样式都不是必填项。 614 615
