| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>通用样式 | WEEX</title> |
| <meta name="description" content="Weex"> |
| <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png"> |
| <script src="//g.alicdn.com/alilog/mlog/aplus_v2.js"></script> |
| <meta name="data-spm" dataSpmProtocol="i" content="a2c7j"> |
| <meta name="aplus-ajax" content="chksum"> |
| <meta name="aplus-waiting" content="MAN"> |
| <meta name="google-site-verification" content="FbH8DPHpxdDJlfkKLKXuXWOu69DI8ZRRP8O2Phg8UKw"> |
| <meta name="baidu-site-verification" content="WRr1iWvsYK"> |
| |
| <link rel="preload" href="/assets/css/styles.0ff943f0.css" as="style"><link rel="preload" href="/assets/js/app.0ff943f0.js" as="script"><link rel="preload" href="/assets/js/160.2a970224.js" as="script"><link rel="prefetch" href="/assets/css/1.styles.aa72e838.css"><link rel="prefetch" href="/assets/css/10.styles.1fff5b86.css"><link rel="prefetch" href="/assets/css/11.styles.a03faa50.css"><link rel="prefetch" href="/assets/css/2.styles.fc5d9892.css"><link rel="prefetch" href="/assets/css/21.styles.9ebad2b1.css"><link rel="prefetch" href="/assets/css/3.styles.6b94323a.css"><link rel="prefetch" href="/assets/css/36.styles.6dbb9d8c.css"><link rel="prefetch" href="/assets/css/4.styles.706a5607.css"><link rel="prefetch" href="/assets/css/7.styles.469d3b64.css"><link rel="prefetch" href="/assets/css/8.styles.b36167bf.css"><link rel="prefetch" href="/assets/css/9.styles.5bed6ebe.css"><link rel="prefetch" href="/assets/js/10.1fff5b86.js"><link rel="prefetch" href="/assets/js/100.09076a87.js"><link rel="prefetch" href="/assets/js/101.71fa3538.js"><link rel="prefetch" href="/assets/js/102.8a9926d6.js"><link rel="prefetch" href="/assets/js/103.d6c3649e.js"><link rel="prefetch" href="/assets/js/104.adb2425b.js"><link rel="prefetch" href="/assets/js/105.a063ca34.js"><link rel="prefetch" href="/assets/js/106.620e227f.js"><link rel="prefetch" href="/assets/js/107.1c97d156.js"><link rel="prefetch" href="/assets/js/108.d1f236a9.js"><link rel="prefetch" href="/assets/js/109.10a909cc.js"><link rel="prefetch" href="/assets/js/11.a03faa50.js"><link rel="prefetch" href="/assets/js/110.6f9200c8.js"><link rel="prefetch" href="/assets/js/111.9c1831b3.js"><link rel="prefetch" href="/assets/js/112.e5c0d546.js"><link rel="prefetch" href="/assets/js/113.b1c17feb.js"><link rel="prefetch" href="/assets/js/114.c24b95ed.js"><link rel="prefetch" href="/assets/js/115.d7e38c3b.js"><link rel="prefetch" href="/assets/js/116.1aaa95ab.js"><link rel="prefetch" href="/assets/js/117.1a9e5539.js"><link rel="prefetch" href="/assets/js/118.8d915477.js"><link rel="prefetch" href="/assets/js/119.77f0a126.js"><link rel="prefetch" href="/assets/js/12.16a9b730.js"><link rel="prefetch" href="/assets/js/120.3cf0ba10.js"><link rel="prefetch" href="/assets/js/121.47fefbf1.js"><link rel="prefetch" href="/assets/js/122.3dd022e8.js"><link rel="prefetch" href="/assets/js/123.84abc63f.js"><link rel="prefetch" href="/assets/js/124.2568e233.js"><link rel="prefetch" href="/assets/js/125.5b665f24.js"><link rel="prefetch" href="/assets/js/126.25b58a0a.js"><link rel="prefetch" href="/assets/js/127.d62a58c6.js"><link rel="prefetch" href="/assets/js/128.e5774a02.js"><link rel="prefetch" href="/assets/js/129.9a813c06.js"><link rel="prefetch" href="/assets/js/13.f8bde866.js"><link rel="prefetch" href="/assets/js/130.edddc316.js"><link rel="prefetch" href="/assets/js/131.760aa65c.js"><link rel="prefetch" href="/assets/js/132.559d5ba7.js"><link rel="prefetch" href="/assets/js/133.cbdd35c7.js"><link rel="prefetch" href="/assets/js/134.c02d92e1.js"><link rel="prefetch" href="/assets/js/135.e6d5496a.js"><link rel="prefetch" href="/assets/js/136.8826af60.js"><link rel="prefetch" href="/assets/js/137.28b4573d.js"><link rel="prefetch" href="/assets/js/138.d370fc15.js"><link rel="prefetch" href="/assets/js/139.8d9150fc.js"><link rel="prefetch" href="/assets/js/14.a98602cc.js"><link rel="prefetch" href="/assets/js/140.f0a9b5e1.js"><link rel="prefetch" href="/assets/js/141.297fa6fe.js"><link rel="prefetch" href="/assets/js/142.82bbcbaa.js"><link rel="prefetch" href="/assets/js/143.2d1ed3b2.js"><link rel="prefetch" href="/assets/js/144.69a9bc6a.js"><link rel="prefetch" href="/assets/js/145.74d52c12.js"><link rel="prefetch" href="/assets/js/146.12ecdaf4.js"><link rel="prefetch" href="/assets/js/147.daad4b96.js"><link rel="prefetch" href="/assets/js/148.bb356182.js"><link rel="prefetch" href="/assets/js/149.56fdaace.js"><link rel="prefetch" href="/assets/js/15.ea6e5024.js"><link rel="prefetch" href="/assets/js/150.ee9c4994.js"><link rel="prefetch" href="/assets/js/151.2feae618.js"><link rel="prefetch" href="/assets/js/152.c7703521.js"><link rel="prefetch" href="/assets/js/153.3b555eab.js"><link rel="prefetch" href="/assets/js/154.c6329253.js"><link rel="prefetch" href="/assets/js/155.334c4ea4.js"><link rel="prefetch" href="/assets/js/156.1a29657f.js"><link rel="prefetch" href="/assets/js/157.ba8f07bc.js"><link rel="prefetch" href="/assets/js/158.a60a60ba.js"><link rel="prefetch" href="/assets/js/159.9ce96d49.js"><link rel="prefetch" href="/assets/js/16.14acc638.js"><link rel="prefetch" href="/assets/js/161.a26e2b53.js"><link rel="prefetch" href="/assets/js/162.73535662.js"><link rel="prefetch" href="/assets/js/163.7518a0a5.js"><link rel="prefetch" href="/assets/js/164.17367778.js"><link rel="prefetch" href="/assets/js/165.46c8f055.js"><link rel="prefetch" href="/assets/js/166.1cc22037.js"><link rel="prefetch" href="/assets/js/167.3fbcb5c6.js"><link rel="prefetch" href="/assets/js/168.a3f80f1e.js"><link rel="prefetch" href="/assets/js/169.a6565c29.js"><link rel="prefetch" href="/assets/js/17.d6f2f3b8.js"><link rel="prefetch" href="/assets/js/170.566ddeda.js"><link rel="prefetch" href="/assets/js/171.4fd97bee.js"><link rel="prefetch" href="/assets/js/172.5295c6b9.js"><link rel="prefetch" href="/assets/js/173.ff25fd05.js"><link rel="prefetch" href="/assets/js/174.22ea6a1b.js"><link rel="prefetch" href="/assets/js/175.c6a04367.js"><link rel="prefetch" href="/assets/js/176.d3810924.js"><link rel="prefetch" href="/assets/js/177.facd2802.js"><link rel="prefetch" href="/assets/js/178.f4c6fbe9.js"><link rel="prefetch" href="/assets/js/179.1a3a2c12.js"><link rel="prefetch" href="/assets/js/18.83f6b39a.js"><link rel="prefetch" href="/assets/js/180.b54c8e90.js"><link rel="prefetch" href="/assets/js/181.88495b4c.js"><link rel="prefetch" href="/assets/js/182.8341d23c.js"><link rel="prefetch" href="/assets/js/183.332bcfe2.js"><link rel="prefetch" href="/assets/js/184.d8996a56.js"><link rel="prefetch" href="/assets/js/185.b8584f07.js"><link rel="prefetch" href="/assets/js/186.fa89e23f.js"><link rel="prefetch" href="/assets/js/187.90340eeb.js"><link rel="prefetch" href="/assets/js/188.efe631f8.js"><link rel="prefetch" href="/assets/js/189.72897b1a.js"><link rel="prefetch" href="/assets/js/19.94f071c0.js"><link rel="prefetch" href="/assets/js/190.1ec691ee.js"><link rel="prefetch" href="/assets/js/2.fc5d9892.js"><link rel="prefetch" href="/assets/js/20.13f7bbff.js"><link rel="prefetch" href="/assets/js/21.9ebad2b1.js"><link rel="prefetch" href="/assets/js/22.764b643d.js"><link rel="prefetch" href="/assets/js/23.f533737e.js"><link rel="prefetch" href="/assets/js/24.4eaa533c.js"><link rel="prefetch" href="/assets/js/25.e9877e57.js"><link rel="prefetch" href="/assets/js/26.8905d6a0.js"><link rel="prefetch" href="/assets/js/27.b199a955.js"><link rel="prefetch" href="/assets/js/28.524af0cf.js"><link rel="prefetch" href="/assets/js/29.b772949f.js"><link rel="prefetch" href="/assets/js/3.6b94323a.js"><link rel="prefetch" href="/assets/js/30.f5bcac64.js"><link rel="prefetch" href="/assets/js/31.c55e03aa.js"><link rel="prefetch" href="/assets/js/32.e575600a.js"><link rel="prefetch" href="/assets/js/33.3fff5656.js"><link rel="prefetch" href="/assets/js/34.82598567.js"><link rel="prefetch" href="/assets/js/35.8e1290ba.js"><link rel="prefetch" href="/assets/js/36.6dbb9d8c.js"><link rel="prefetch" href="/assets/js/37.d27fdc88.js"><link rel="prefetch" href="/assets/js/38.f8fc7b20.js"><link rel="prefetch" href="/assets/js/39.bf967d40.js"><link rel="prefetch" href="/assets/js/4.706a5607.js"><link rel="prefetch" href="/assets/js/40.e1864fd6.js"><link rel="prefetch" href="/assets/js/41.61bd3b64.js"><link rel="prefetch" href="/assets/js/42.34d8d61d.js"><link rel="prefetch" href="/assets/js/43.1aee493f.js"><link rel="prefetch" href="/assets/js/44.22177e9b.js"><link rel="prefetch" href="/assets/js/45.5c743d2f.js"><link rel="prefetch" href="/assets/js/46.4feffac9.js"><link rel="prefetch" href="/assets/js/47.367f9103.js"><link rel="prefetch" href="/assets/js/48.0c246d45.js"><link rel="prefetch" href="/assets/js/49.ee354be9.js"><link rel="prefetch" href="/assets/js/5.7d9779f7.js"><link rel="prefetch" href="/assets/js/50.bd81c7f0.js"><link rel="prefetch" href="/assets/js/51.a5f432dd.js"><link rel="prefetch" href="/assets/js/52.537aded4.js"><link rel="prefetch" href="/assets/js/53.84814584.js"><link rel="prefetch" href="/assets/js/54.5f780e97.js"><link rel="prefetch" href="/assets/js/55.9d44c91d.js"><link rel="prefetch" href="/assets/js/56.fc164b43.js"><link rel="prefetch" href="/assets/js/57.959b2d44.js"><link rel="prefetch" href="/assets/js/58.bd5c38e0.js"><link rel="prefetch" href="/assets/js/59.3eaece52.js"><link rel="prefetch" href="/assets/js/6.49a49457.js"><link rel="prefetch" href="/assets/js/60.4b8cb735.js"><link rel="prefetch" href="/assets/js/61.b54b9195.js"><link rel="prefetch" href="/assets/js/62.0116614c.js"><link rel="prefetch" href="/assets/js/63.85b1247d.js"><link rel="prefetch" href="/assets/js/64.8f1be6b5.js"><link rel="prefetch" href="/assets/js/65.6a241647.js"><link rel="prefetch" href="/assets/js/66.08c8bd13.js"><link rel="prefetch" href="/assets/js/67.002e0071.js"><link rel="prefetch" href="/assets/js/68.6c6a7c94.js"><link rel="prefetch" href="/assets/js/69.64d90e5d.js"><link rel="prefetch" href="/assets/js/7.469d3b64.js"><link rel="prefetch" href="/assets/js/70.b2c287c9.js"><link rel="prefetch" href="/assets/js/71.b7ad1135.js"><link rel="prefetch" href="/assets/js/72.7391b5c2.js"><link rel="prefetch" href="/assets/js/73.c5c77d81.js"><link rel="prefetch" href="/assets/js/74.96f80ffd.js"><link rel="prefetch" href="/assets/js/75.2920c7b7.js"><link rel="prefetch" href="/assets/js/76.a90bd3c9.js"><link rel="prefetch" href="/assets/js/77.3a0eeccd.js"><link rel="prefetch" href="/assets/js/78.6791678c.js"><link rel="prefetch" href="/assets/js/79.8b0c78e4.js"><link rel="prefetch" href="/assets/js/8.b36167bf.js"><link rel="prefetch" href="/assets/js/80.2641b89d.js"><link rel="prefetch" href="/assets/js/81.03d1925e.js"><link rel="prefetch" href="/assets/js/82.71061708.js"><link rel="prefetch" href="/assets/js/83.df220a8f.js"><link rel="prefetch" href="/assets/js/84.99fbef8f.js"><link rel="prefetch" href="/assets/js/85.dee8bcae.js"><link rel="prefetch" href="/assets/js/86.5200e4ce.js"><link rel="prefetch" href="/assets/js/87.96df0d82.js"><link rel="prefetch" href="/assets/js/88.e9171a32.js"><link rel="prefetch" href="/assets/js/89.53987bbc.js"><link rel="prefetch" href="/assets/js/9.5bed6ebe.js"><link rel="prefetch" href="/assets/js/90.8da0ff06.js"><link rel="prefetch" href="/assets/js/91.4bcce2cd.js"><link rel="prefetch" href="/assets/js/92.aca18707.js"><link rel="prefetch" href="/assets/js/93.93fdf568.js"><link rel="prefetch" href="/assets/js/94.e893b256.js"><link rel="prefetch" href="/assets/js/95.cb1d62b6.js"><link rel="prefetch" href="/assets/js/96.5529545c.js"><link rel="prefetch" href="/assets/js/97.d01eda68.js"><link rel="prefetch" href="/assets/js/98.384bebd6.js"><link rel="prefetch" href="/assets/js/99.fa349b8f.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.aa72e838.js"> |
| <link rel="stylesheet" href="/assets/css/styles.0ff943f0.css"> |
| </head> |
| <body> |
| <div id="app" data-server-rendered="true"><div class="theme-container vuepress-theme-fast"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/zh/" class="home-link router-link-active"><img src="/logo@2x.svg" alt="WEEX" class="logo"></a><span class="version"><a href="/download/download.html" class="version-bg"><img src="/assets/img/version-bg.ab65ded9.svg" alt="v0.28"><span class="version-no">v0.28</span></a></span><div class="links"><form id="search-form" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form><nav class="nav-links can-hide"><div class="nav-item"><a href="/zh/guide/" class="nav-link">指南</a></div><div class="nav-item"><a href="/zh/docs/" class="nav-link router-link-active">文档</a></div><div class="nav-item"><a href="/zh/tools/" class="nav-link">第三方工具</a></div><div class="nav-item"><a href="/zh/download/" class="nav-link">下载</a></div><div class="nav-item"><a href="/zh/community/" class="nav-link">社区</a></div><div class="nav-item"><a href="/zh/blog/" class="nav-link">博客</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">选择语言</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/docs/styles/common-styles.html" class="nav-link">English</a></li><li class="dropdown-item"><!----><a href="/zh/docs/styles/common-styles.html" class="nav-link router-link-exact-active router-link-active">简体中文</a></li></ul></div></div></nav><a href="https://github.com/apache/incubator-weex" target="_blank" rel="noopener noreferrer" class="repo-link"><img src="/assets/img/github.7cb484a9.svg" alt="github" class="github-icon"></a></div></header><div class="sidebar-mask"></div><div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/zh/guide/" class="nav-link">指南</a></div><div class="nav-item"><a href="/zh/docs/" class="nav-link router-link-active">文档</a></div><div class="nav-item"><a href="/zh/tools/" class="nav-link">第三方工具</a></div><div class="nav-item"><a href="/zh/download/" class="nav-link">下载</a></div><div class="nav-item"><a href="/zh/community/" class="nav-link">社区</a></div><div class="nav-item"><a href="/zh/blog/" class="nav-link">博客</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">选择语言</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/docs/styles/common-styles.html" class="nav-link">English</a></li><li class="dropdown-item"><!----><a href="/zh/docs/styles/common-styles.html" class="nav-link router-link-exact-active router-link-active">简体中文</a></li></ul></div></div></nav><ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>API</span><!----></p><ul class="sidebar-group-items"><li><a href="/zh/docs/api/weex-variable.html" class="sidebar-link">Weex 环境变量</a></li><li><a href="/zh/docs/api/android-apis.html" class="sidebar-link">Android 接口</a></li><li><a href="/zh/docs/api/ios-apis.html" class="sidebar-link">iOS 接口</a></li><li><a href="/zh/docs/api/js-service.html" class="sidebar-link">JS 服务</a></li><li><a href="/zh/docs/api/broadcast-channel.html" class="sidebar-link">跨页面通信</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>内置组件</span><!----></p><ul class="sidebar-group-items"><li><a href="/zh/docs/components/a.html" class="sidebar-link"><a></a></li><li><a href="/zh/docs/components/div.html" class="sidebar-link"><div></a></li><li><a href="/zh/docs/components/text.html" class="sidebar-link"><text></a></li><li><a href="/zh/docs/components/image.html" class="sidebar-link"><image></a></li><li><a href="/zh/docs/components/list.html" class="sidebar-link"><list></a></li><li><a href="/zh/docs/components/cell.html" class="sidebar-link"><cell></a></li><li><a href="/zh/docs/components/loading.html" class="sidebar-link"><loading></a></li><li><a href="/zh/docs/components/refresh.html" class="sidebar-link"><refresh></a></li><li><a href="/zh/docs/components/recycle-list.html" class="sidebar-link"><recycle-list></a></li><li><a href="/zh/docs/components/scroller.html" class="sidebar-link"><scroller></a></li><li><a href="/zh/docs/components/slider.html" class="sidebar-link"><slider></a></li><li><a href="/zh/docs/components/indicator.html" class="sidebar-link"><indicator></a></li><li><a href="/zh/docs/components/textarea.html" class="sidebar-link"><textarea></a></li><li><a href="/zh/docs/components/input.html" class="sidebar-link"><input></a></li><li><a href="/zh/docs/components/waterfall.html" class="sidebar-link"><waterfall></a></li><li><a href="/zh/docs/components/video.html" class="sidebar-link"><video></a></li><li><a href="/zh/docs/components/web.html" class="sidebar-link"><web></a></li><li><a href="/zh/docs/components/richtext.html" class="sidebar-link"><richtext></a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>内置模块</span><!----></p><ul class="sidebar-group-items"><li><a href="/zh/docs/modules/animation.html" class="sidebar-link">animation</a></li><li><a href="/zh/docs/modules/clipboard.html" class="sidebar-link">clipboard</a></li><li><a href="/zh/docs/modules/dom.html" class="sidebar-link">dom</a></li><li><a href="/zh/docs/modules/globalEvent.html" class="sidebar-link">globalEvent</a></li><li><a href="/zh/docs/modules/meta.html" class="sidebar-link">meta</a></li><li><a href="/zh/docs/modules/modal.html" class="sidebar-link">modal</a></li><li><a href="/zh/docs/modules/navigator.html" class="sidebar-link">navigator</a></li><li><a href="/zh/docs/modules/picker.html" class="sidebar-link">picker</a></li><li><a href="/zh/docs/modules/storage.html" class="sidebar-link">storage</a></li><li><a href="/zh/docs/modules/stream.html" class="sidebar-link">stream</a></li><li><a href="/zh/docs/modules/webview.html" class="sidebar-link">webview</a></li><li><a href="/zh/docs/modules/websockets.html" class="sidebar-link">webSockets</a></li><li><a href="/zh/docs/modules/deviceInfo.html" class="sidebar-link">deviceInfo</a></li><li><a href="/zh/docs/modules/console-log.html" class="sidebar-link">console-log</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>样式</span><!----></p><ul class="sidebar-group-items"><li><a href="/zh/docs/styles/common-styles.html" class="active sidebar-link">通用样式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/docs/styles/common-styles.html#盒模型" class="sidebar-link">盒模型</a></li><li class="sidebar-sub-header"><a href="/zh/docs/styles/common-styles.html#flexbox" class="sidebar-link">Flexbox</a></li><li class="sidebar-sub-header"><a href="/zh/docs/styles/common-styles.html#定位" class="sidebar-link">定位</a></li><li class="sidebar-sub-header"><a href="/zh/docs/styles/common-styles.html#transition" class="sidebar-link">Transition</a></li><li class="sidebar-sub-header"><a href="/zh/docs/styles/common-styles.html#transform" class="sidebar-link">Transform</a></li><li class="sidebar-sub-header"><a href="/zh/docs/styles/common-styles.html#伪类" class="sidebar-link">伪类</a></li><li class="sidebar-sub-header"><a href="/zh/docs/styles/common-styles.html#线性渐变" class="sidebar-link">线性渐变</a></li><li class="sidebar-sub-header"><a href="/zh/docs/styles/common-styles.html#无障碍" class="sidebar-link">无障碍</a></li><li class="sidebar-sub-header"><a href="/zh/docs/styles/common-styles.html#阴影-box-shadow" class="sidebar-link">阴影(box-shadow)</a></li><li class="sidebar-sub-header"><a href="/zh/docs/styles/common-styles.html#其他基本样式" class="sidebar-link">其他基本样式</a></li><li class="sidebar-sub-header"><a href="/zh/docs/styles/common-styles.html#上手样式" class="sidebar-link">上手样式</a></li></ul></li><li><a href="/zh/docs/styles/text-styles.html" class="sidebar-link">文本样式</a></li><li><a href="/zh/docs/styles/css-units.html" class="sidebar-link">CSS 单位</a></li><li><a href="/zh/docs/styles/color-name.html" class="sidebar-link">颜色值</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>事件</span><!----></p><ul class="sidebar-group-items"><li><a href="/zh/docs/events/common-events.html" class="sidebar-link">通用事件</a></li><li><a href="/zh/docs/events/event-bubbling.html" class="sidebar-link">事件冒泡</a></li><li><a href="/zh/docs/events/gesture.html" class="sidebar-link">手势</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="通用样式"><a href="#通用样式" class="header-anchor">#</a> 通用样式</h1><p>所有 Weex 自带组件都支持以下通用样式规则。</p><div class="danger custom-block"><p class="custom-block-title">WARNING</p><p>Weex所支持的通用样式已在本文档中全部列出，一些组件可能有自定义样式，请参考组件文档。除此之外的属性，均不被支持。</p></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>Weex 对于长度值目前只支持<code>px</code>和<code>wx</code>（不受屏幕宽度和viewPortWidth影响），不支持相对单位（<code>em</code>、<code>rem</code>）。</p></div><h2 id="盒模型"><a href="#盒模型" class="header-anchor">#</a> 盒模型</h2><p>Weex 盒模型基于 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" target="_blank" rel="noopener noreferrer">CSS 盒模型<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，每个 Weex 元素都可视作一个盒子。我们一般在讨论设计或布局时，会提到「盒模型」这个概念。</p><p><img src="https://img.alicdn.com/tfs/TB13u.4n5rpK1RjSZFhXXXSdXXa-377-340.png" alt></p><p>盒模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界 margin edge, 边框边界 border edge, 内边距边界 padding edge 与内容边界 content edge。这四层边界，形成一层层的盒子包裹起来，这就是盒模型大体上的含义。</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>Weex 盒模型的 box-sizing 默认为 border-box，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。</p></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><ul><li>在 Android 平台，Weex 只支持 <code>overflow:hidden</code>。</li><li>在 iOS 上，Weex 支持 <code>overflow:hidden</code> 和 <code>overflow:visible</code>，默认是 <code>overflow:visible</code>。</li></ul></div><p>下面的例子显示了盒模型的基本用法</p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 200<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 20<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>image</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> |
| </code></pre></div><h3 id="宽度"><a href="#宽度" class="header-anchor">#</a> 宽度</h3><p><code>width {length}</code>：默认值 0</p><h3 id="高度"><a href="#高度" class="header-anchor">#</a> 高度</h3><p><code>height {length}</code>：默认值 0</p><h3 id="内边距"><a href="#内边距" class="header-anchor">#</a> 内边距</h3><p><code>padding {length}</code>：内边距，内容和边框之间的距离，默认值 0。与标准 CSS 类似，<code>padding</code> 支持简写，也可分解为以下四个：</p><ul><li><code>padding {length}</code>: 上、右、下、左四边内边距，默认值 0</li><li><code>padding-left {length}</code>：左内边距，默认值 0</li><li><code>padding-right {length}</code>：右内边距，默认值 0</li><li><code>padding-top {length}</code>：上内边距，默认值 0</li><li><code>padding-bottom {length}</code>：下内边距，默认值 0</li></ul><h3 id="边框"><a href="#边框" class="header-anchor">#</a> 边框</h3><div class="warning custom-block"><p class="custom-block-title">Android 兼容性</p><p>你有可能会遇如下Crash <strong>Unable to create layer for xxx</strong> 如果你的含有 <code>border</code> 的 <code>component</code> 的长度超过了最大值，因为这会使 OpenGL 内存区域发生 <code>OutOfMemory</code>。</p><p>你的 <code>component</code> 的允许的最大值与机器有关，但一般来说，如果你的 <code>component</code> 的大小超过屏幕大小，就有可能触发Crash。</p></div><h4 id="border-style"><a href="#border-style" class="header-anchor">#</a> border-style</h4><p><code>border-style</code>设定边框样式，如果四个方向的边框样式不同，可分别设置：</p><ul><li><code>border-style {string}</code></li><li><code>border-left-style {string}</code>：可选值为 <code>solid</code> | <code>dashed</code> | <code>dotted</code>，默认值 <code>solid</code></li><li><code>border-top-style {string}</code>：可选值为 <code>solid</code> | <code>dashed</code> | <code>dotted</code>，默认值 <code>solid</code></li><li><code>border-right-style {string}</code>：可选值为 <code>solid</code> | <code>dashed</code> | <code>dotted</code>，默认值 <code>solid</code></li><li><code>border-bottom-style {string}</code>：可选值为 <code>solid</code> | <code>dashed</code> | <code>dotted</code>，默认值 <code>solid</code></li></ul><p>支持的值如下：</p><ul><li><code>solid</code>：实线边框，默认值 <code>solid</code></li><li><code>dashed</code>：方形虚线边框</li><li><code>dotted</code>：圆点虚线边框</li></ul><h4 id="border-width"><a href="#border-width" class="header-anchor">#</a> border-width</h4><p><code>border-width</code>：设定边框宽度，非负值, 默认值 0，如果四个方向的边框宽度不同，可分别设置：</p><ul><li><code>border-width {length}</code>：非负值, 默认值 0</li><li><code>border-left-width {length}</code>：非负值, 默认值 0</li><li><code>border-top-width {length}</code>：非负值, 默认值 0</li><li><code>border-right-width {length}</code>：非负值, 默认值 0</li><li><code>border-bottom-width {length}</code>：非负值, 默认值 0</li></ul><h4 id="border-color"><a href="#border-color" class="header-anchor">#</a> border-color</h4><p><code>border-color</code>：设定边框颜色，默认值 <code>#000000</code>，如果四个方向的边框颜色不同，可分别设置：</p><ul><li><code>border-color {color}</code>：默认值 <code>#000000</code></li><li><code>border-left-color {color}</code>：默认值 <code>#000000</code></li><li><code>border-top-color {color}</code>：默认值 <code>#000000</code></li><li><code>border-right-color {color}</code>：默认值 <code>#000000</code></li><li><code>border-bottom-color {color}</code>：默认值 <code>#000000</code></li></ul><h4 id="border-radius"><a href="#border-radius" class="header-anchor">#</a> border-radius</h4><p><code>border-radius</code>：设置边框的圆角，默认值 0，如果四个方向的圆角弧度不同，可分别设置：</p><ul><li><code>border-radius {length}</code>: 非负值, 默认值 0</li><li><code>border-bottom-left-radius {length}</code>：非负值, 默认值 0</li><li><code>border-bottom-right-radius {length}</code>：非负值, 默认值 0</li><li><code>border-top-left-radius {length}</code>：非负值, 默认值 0</li><li><code>border-top-right-radius {length}</code>：非负值, 默认值 0</li></ul><div class="danger custom-block"><p class="custom-block-title">WARNING</p><p><code>border-radius</code>和<code>border-width</code>定义了圆心角为90度的椭圆弧的长轴和半长轴的大小。如果邻接两边<code>border-radius</code>(或<code>border-width</code>不一致，weex绘制的边框曲线可能不够平滑。</p></div><div class="danger custom-block"><p class="custom-block-title">Android 兼容性</p><p>尽管 <code>overflow: hidden</code> 在 Android 上是默认行为，但只有下列条件都满足时，一个父 view 才会去剪切它的子 view。</p><ul><li>父view是 <code>div</code>, <code>a</code>, <code>cell</code>, <code>refresh</code> 或 <code>loading</code>。</li><li>系统版本是 Android 4.3 或更高。</li><li>系统版本不是 Andorid 7.0。</li><li>父 view 没有 <code>background-image</code> 属性或系统版本是 Android 5.0 或更高。</li></ul></div><h3 id="外边距"><a href="#外边距" class="header-anchor">#</a> 外边距</h3><p><code>margin {length}</code>：外边距，元素和元素之间的空白距离，默认值 0。与标准 CSS 类似，<code>margin</code> 支持简写，也可分解为四边：</p><ul><li><code>margin {length}</code>: 上、右、下、左四边外边距，默认值 0</li><li><code>margin-left {length}</code>：左外边距，默认值 0</li><li><code>margin-right {length}</code>：右外边距，默认值 0</li><li><code>margin-top {length}</code>：上外边距，默认值 0</li><li><code>margin-bottom {length}</code>：下外边距，默认值 0</li></ul><h2 id="flexbox"><a href="#flexbox" class="header-anchor">#</a> Flexbox</h2><p>Weex 布局模型基于 CSS <a href="http://www.w3.org/TR/css3-flexbox/" target="_blank" rel="noopener noreferrer"><code>Flexbox</code><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。Flexbox 包含 flex 容器和 flex 成员项。如果一个 Weex 元素可以容纳其他元素，那么它就成为 flex 容器。</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>文档中未说明的 flexbox 属性均不支持：如 <code>order</code>、<code>flex-flow</code> 等。</p></div><h3 id="flex-容器"><a href="#flex-容器" class="header-anchor">#</a> Flex 容器</h3><p>在 Weex 中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 <code>display: flex;</code> 属性。</p><h4 id="direction"><a href="#direction" class="header-anchor">#</a> direction</h4><p><code>direction</code>决定了文字方向和<strong>Flex容器</strong>的基线方向。默认值为<code>ltr</code>。</p><ul><li><code>ltr</code>: 文字和其他元素从左到右排布</li><li><code>rtl</code>: 文字和其他元素从右到左排布。</li></ul><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>尽管 <code>direction</code> 不是 Flexbox模型的一部分，但却对 Flexbox 模型有着影响。</p></div><h4 id="flex-direction"><a href="#flex-direction" class="header-anchor">#</a> flex-direction</h4><p><code>flex-direction</code>定义了 flex 容器中 flex 成员项的排列方向，默认值为 <code>column</code></p><ul><li><code>column</code>：从上到下排列。</li><li><code>column-reverse</code>: 从下到上排布</li><li><code>row</code>：如果存在<code>direction:ltr</code>，则从左到右排布；如果存在<code>direction:rtl</code>，则从右到左排布。</li><li><code>row-reverse</code>: 排布方向与<code>flex-direction:row</code>相反</li></ul><h4 id="flex-wrap"><a href="#flex-wrap" class="header-anchor">#</a> flex-wrap</h4><p><code>flex-wrap</code>属性决定了<code>Flex成员项</code>在一行还是多行分布，默认值为<code>nowrap</code></p><ul><li><code>nowrap</code>: <code>Flex成员项</code>在一行排布，排布的开始位置由<code>direction</code>指定。</li><li><code>wrap</code>：<code>Flex成员项</code>在多行排布，排布的开始位置由<code>direction</code>指定</li><li><code>wrap-reverse</code>: 行为类似于<code>wrap</code>，排布方向与其相反。</li></ul><h4 id="justify-content"><a href="#justify-content" class="header-anchor">#</a> justify-content</h4><p>定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。可选值为 <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code>，默认值为 <code>flex-start</code>。</p><ul><li><code>flex-start</code>：是默认值，所有的 flex 成员项都排列在容器的前部；</li><li><code>flex-end</code>：则意味着成员项排列在容器的后部；</li><li><code>center</code>：即中间对齐，成员项排列在容器中间、两边留白；</li><li><code>space-between</code>：表示两端对齐，空白均匀地填充到 flex 成员项之间。</li></ul><div style="width: 400px; margin: 20px 0;"><img width="400px" src="https://img.alicdn.com/tfs/TB1fQRmohnaK1RjSZFBXXcW7VXa-504-270.svg"></div><h4 id="align-items"><a href="#align-items" class="header-anchor">#</a> align-items</h4><p>定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。可选值为 <code>stretch</code> | <code>flex-start</code> | <code>center</code> | <code>flex-end</code>，默认值为 <code>stretch</code>。</p><ul><li><code>stretch</code> 是默认值，即拉伸高度至 flex 容器的大小；</li><li><code>flex-start</code> 则是上对齐，所有的成员项排列在容器顶部；</li><li><code>flex-end</code> 是下对齐，所有的成员项排列在容器底部；</li><li><code>center</code> 是中间对齐，所有成员项都垂直地居中显示。</li></ul><div style="width: 400px; margin: 20px 0;"><img width="400px" src="https://img.alicdn.com/tfs/TB1AM8oohnaK1RjSZFtXXbC2VXa-1018-502.jpg"></div><h3 id="flex-成员项"><a href="#flex-成员项" class="header-anchor">#</a> Flex 成员项</h3><h4 id="flex"><a href="#flex" class="header-anchor">#</a> flex</h4><p>flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。如果所有的成员项设置相同的值 <code>flex: 1</code>，它们将平均分配剩余空间。如果一个成员项设置的值为 <code>flex: 2</code>，其它的成员项设置的值为 <code>flex: 1</code>，那么这个成员项所占用的剩余空间是其它成员项的 2 倍。Flex 成员项暂不支持 <code>flex-shrink</code> 和 <code>flex-basis</code> 属性。</p><ul><li><code>flex {number}</code>：值为 number 类型。<strong>该属性不支持 <code>flex: <flex-grow> | <flex-shrink> | <'flex-basis></code></strong> 的简写。</li></ul><p>示例，使用 flexbox 实现水平居中与垂直居中：</p><h3 id="examples"><a href="#examples" class="header-anchor">#</a> Examples</h3><ul><li><a href="http://dotwe.org/vue/505b5e8bdb6774bccb597a30f74492af" target="_blank" rel="noopener noreferrer">水平和竖直居中<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="http://dotwe.org/vue/4e1dcb58b31c266c4979fcbed04bb25b" target="_blank" rel="noopener noreferrer">Grid布局<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="http://dotwe.org/vue/5aa2fa9a1ed5ea250e553683ca710f7a" target="_blank" rel="noopener noreferrer">等高模块<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul><h2 id="定位"><a href="#定位" class="header-anchor">#</a> 定位</h2><p>Weex 支持 <code>position</code> 定位，用法与 CSS position 类似。为元素设置 <code>position</code> 后，可通过 <code>top</code>、<code>right</code>、<code>bottom</code>、<code>left</code> 四个属性设置元素坐标。</p><ul><li><p><code>position {string}</code>：</p><p>设置定位类型。可选值为 <code>relative</code> | <code>absolute</code> | <code>fixed</code> | <code>sticky</code>，默认值为 <code>relative</code>。</p><ul><li><code>relative</code> 是默认值，指的是相对定位；</li><li><code>absolute</code> 是绝对定位，以元素的容器作为参考系；</li><li><code>fixed</code> 保证元素在页面窗口中的对应位置显示；</li><li><code>sticky</code> 指的是仅当元素滚动到页面之外时，元素会固定在页面窗口的顶部。</li></ul></li><li><p><code>top {number}</code>：距离上方的偏移量，默认为 0。</p></li><li><p><code>bottom {number}</code>：距离下方的偏移量，默认为 0。</p></li><li><p><code>left {number}</code>：距离左方的偏移量，默认为 0。</p></li><li><p><code>right {number}</code>：距离右方的偏移量，默认为 0。</p></li></ul><div class="warning custom-block"><p class="custom-block-title">Android 兼容性</p><p>如果定位元素超过容器边界，在 Android 下，超出部分将<strong>不可见</strong>，原因在于 Android 端元素 <code>overflow</code> 默认值为 <code>hidden</code>，但目前 Android 暂不支持设置 <code>overflow: visible</code>。</p><p><a href="http://dotwe.org/vue/cb3436ea65283d2ab456641ba30133a4" target="_blank" rel="noopener noreferrer">示例<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div><h2 id="transition"><a href="#transition" class="header-anchor">#</a> Transition <span class="badge warn middle">0.16+</span></h2><p>现在您可以在 CSS 中使用 <code>transition</code> 属性来提升您应用的交互性与视觉感受，<code>transition</code> 中包括布局动画，即 LayoutAnimation，现在布局产生变化的同时也能使用 <code>transition</code> 带来的流畅动画。<code>transition</code>允许 CSS 的属性值在一定的时间区间内平滑地过渡。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>v0.17.0以上支持。</p></div><div class="warning custom-block"><p class="custom-block-title">Android 兼容性</p><p>你有可能会遇如下Crash <strong>Unable to create layer for xxx</strong> 如果你的含有 <code>transition-property</code> 的 <code>component</code> 的大小 (<em>长 或 宽</em>) 超过了最大值，因为这会使 OpenGL 内存区域发生 <code>OutOfMemory</code>。</p><p>你的 <code>component</code> 的允许的最大值与机器有关，但一般来说，如果你的 <code>component</code> 的大小超过屏幕大小，就有可能触发Crash。</p></div><h3 id="参数"><a href="#参数" class="header-anchor">#</a> 参数</h3><ul><li><code>transition-property</code>：设置过渡动画的属性名，设置不同样式 <code>transition</code> 效果的键值对，默认值为空，表示不执行任何过渡效果，下表列出了所有合法的参数属性：</li></ul><table><thead><tr><th>参数名</th><th>描述</th></tr></thead><tbody><tr><td><code>width</code></td><td>设置组件的宽度参与过渡动画</td></tr><tr><td><code>height</code></td><td>设置组件的高度参与过渡动画</td></tr><tr><td><code>top</code></td><td>设置组件的顶部距离参与过渡动画</td></tr><tr><td><code>bottom</code></td><td>设置组件的底部距离参与过渡动画</td></tr><tr><td><code>left</code></td><td>设置组件的左侧距离参与过渡动画</td></tr><tr><td><code>right</code></td><td>设置组件的右侧距离参与过渡动画</td></tr><tr><td><code>background-color</code></td><td>设置组件的背景颜色参与过渡动画</td></tr><tr><td><code>opacity</code></td><td>设置组件的不透明度参与过渡动画</td></tr><tr><td><code>transform</code></td><td>设置组件的变换类型参与过渡动画</td></tr></tbody></table><ul><li><p><code>transition-duration</code>：指定过渡的持续时间 (单位是毫秒)，默认值是 <code>0</code>，表示没有动画效果。</p></li><li><p><code>transition-delay</code>：指定请求过渡操作到执行过渡之间的时间间隔 (单位是毫秒或者秒)，默认值是 <code>0</code>，表示没有延迟，在请求后立即执行过渡。</p></li><li><p><code>transition-timing-function</code>：描述过渡执行的速度曲线，用于使过渡更为平滑。默认值是 <code>ease</code>。下表列出了所有合法的属性：</p></li></ul><table><thead><tr><th>属性名</th><th>描述</th></tr></thead><tbody><tr><td>ease</td><td>transition 过渡逐渐变慢的过渡效果</td></tr><tr><td>ease-in</td><td>transition 过渡慢速开始，然后变快的过渡效果</td></tr><tr><td>ease-out</td><td>transition 过渡快速开始，然后变慢的过渡效果</td></tr><tr><td>ease-in-out</td><td>transition 过渡慢速开始，然后变快，然后慢速结束的过渡效果</td></tr><tr><td>linear</td><td>transition 过渡以匀速变化</td></tr><tr><td>cubic-bezier(x1, y1, x2, y2)</td><td>使用三阶贝塞尔函数中自定义 transition 变化过程，函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅 <a href="http://cubic-bezier.com/" target="_blank" rel="noopener noreferrer">cubic-bezier<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 和 <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve" target="_blank" rel="noopener noreferrer">Bézier curve<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</td></tr></tbody></table><h3 id="示例"><a href="#示例" class="header-anchor">#</a> 示例</h3><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> |
| <span class="token selector">.panel</span> <span class="token punctuation">{</span> |
| <span class="token property">margin</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> |
| <span class="token property">top</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span> |
| <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> |
| <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> |
| <span class="token property">border</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span> |
| <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> |
| <span class="token property">transition-property</span><span class="token punctuation">:</span> width<span class="token punctuation">,</span> height<span class="token punctuation">,</span> background-color<span class="token punctuation">;</span> |
| <span class="token property">transition-duration</span><span class="token punctuation">:</span> 0.3s<span class="token punctuation">;</span> |
| <span class="token property">transition-delay</span><span class="token punctuation">:</span> 0s<span class="token punctuation">;</span> |
| <span class="token property">transition-timing-function</span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0.25<span class="token punctuation">,</span> 0.1<span class="token punctuation">,</span> 0.25<span class="token punctuation">,</span> 1.0<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> |
| </code></pre></div><h2 id="transform"><a href="#transform" class="header-anchor">#</a> Transform</h2><div class="warning custom-block"><p class="custom-block-title">Android 兼容性</p><p>你有可能会遇如下Crash <strong>Unable to create layer for xxx</strong> 如果你的含有 <code>transition-property</code> 的 <code>component</code> 的大小 (<em>长 或 宽</em>) 超过了最大值，因为这会使 OpenGL 内存区域发生 <code>OutOfMemory</code>。</p><p>你的 <code>component</code> 的允许的最大值与机器有关，但一般来说，如果你的 <code>component</code> 的大小超过屏幕大小，就有可能触发Crash。</p></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>除了<code>perspective</code>和<code>transform-origin</code>，<code>transition</code>支持了<code>transform</code>的全部能力。 |
| 其中<code>transform</code>的<code>rotate</code> 和<code>rotatez</code> 等效.</p></div><p>目前支持的 transform 声明格式:</p><ul><li><code>translateX({<length/percentage>})</code>：X 轴方向平移，支持长度单位或百分比。</li><li><code>translateY({<length/percentage>})</code>：Y 轴方向平移，支持长度单位或百分比。</li><li><code>translate({<length/percentage>} {<length/percentage>})</code>：X 轴和 Y 轴方向同时平移，<code>translateX</code> + <code>translateY</code> 简写。</li><li><code>scaleX(<number>)</code>：X 轴方向缩放，值为数值，表示缩放比例，<strong>不支持百分比</strong>。</li><li><code>scaleY(<number>)</code>：Y 轴方向缩放，值为数值，表示缩放比例，<strong>不支持百分比</strong>。</li><li><code>scale(<number>)</code>：X 轴和 Y 轴方向同时缩放，<code>scaleX</code> + <code>scaleY</code> 简写。</li><li><code>rotate(<angle/degree>)</code>：将元素围绕一个定点（由 <code>transform-origin</code> 属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。</li><li><code>rotateX(<angle/degree>)</code><span class="badge warn middle">0.14+</span>：X 轴方向的旋转。</li><li><code>rotateY(<angle/degree>)</code><span class="badge warn middle">0.14+</span>：Y 轴方向的旋转。</li><li><code>rotateZ(<angle/degree>)</code><span class="badge warn middle">0.26+</span>：Z 轴方向的旋转。</li><li><code>perspective(<length>)</code><span class="badge warn middle">0.16+</span>：指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。<strong>Android 4.1及以上版本支持</strong>。详情可参考 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective" target="_blank" rel="noopener noreferrer">MDN 介绍<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。</li><li><code>transform-origin {length/percentage/关键字(top/left/right/bottom)}:</code>：设置一个元素变形的原点，<strong>仅支持 2D 坐标</strong>。</li></ul><h3 id="示例-2"><a href="#示例-2" class="header-anchor">#</a> 示例</h3><div class="language-HTML extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>transform<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Transformed element<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> |
| |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> |
| <span class="token selector">.transform</span> <span class="token punctuation">{</span> |
| <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> |
| <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>150px<span class="token punctuation">,</span> 200px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>20deg<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token property">transform-origin</span><span class="token punctuation">:</span> 0 -250px<span class="token punctuation">;</span> |
| <span class="token property">border-color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span> |
| <span class="token property">border-width</span><span class="token punctuation">:</span>2px<span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token selector">.title</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span> 48px<span class="token punctuation">;</span><span class="token punctuation">}</span> |
| </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> |
| </code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>在 native 端，给组件设置 <code>transform</code> 变换后，如果需要恢复原效果，不能直接删除对应的 <code>transform</code> 属性，而需要重新设置一个 <code>transform</code> 将元素变换恢复。可对比以下两个示例：</p><ul><li><a href="http://dotwe.org/vue/2c800bd791ce68860981bb6f611ce2aa" target="_blank" rel="noopener noreferrer">手动恢复<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="http://dotwe.org/vue/020c00fd633711107fd2b3cedd5018db" target="_blank" rel="noopener noreferrer">直接删除 transform<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div><h2 id="伪类"><a href="#伪类" class="header-anchor">#</a> 伪类 <span class="badge warn middle">0.9.5</span></h2><p>Weex 支持四种伪类：<code>active</code>, <code>focus</code>, <code>disabled</code>, <code>enabled</code></p><p>所有组件都支持 <code>active</code>, 但只有 <code>input</code> 组件和 <code>textarea</code> 组件支持 <code>focus</code>, <code>enabled</code>, <code>disabled</code>。</p><h3 id="规则"><a href="#规则" class="header-anchor">#</a> 规则</h3><ul><li><p>同时生效的时候，优先级高覆盖优先级低</p><ul><li>例如：<code>input:active:enabled</code> 和 <code>input:active</code> 同时生效，前者覆盖后者</li></ul></li><li><p>互联规则如下所示</p><p><img src="https://img.alicdn.com/tfs/TB1nRs0nY2pK1RjSZFsXXaNlXXa-400-205.png" alt="rule"></p></li></ul><p><a href="http://dotwe.org/vue/df2c8f254620d6d30d0906ee75fe5b99" target="_blank" rel="noopener noreferrer">示例<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h2 id="线性渐变"><a href="#线性渐变" class="header-anchor">#</a> 线性渐变 <span class="badge warn middle">0.10+</span></h2><p>Weex 支持线性渐变背景，具体介绍可参考 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients" target="_blank" rel="noopener noreferrer">CSS 渐变介绍<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。</p><p>所有组件均支持线性渐变。</p><div class="warning custom-block"><p class="custom-block-title">Android 兼容性</p><p>你有可能会遇如下Crash <strong>Unable to create layer for xxx</strong> 如果你的含有 <code>background-image: linear-gradient</code> 的 <code>component</code> 的大小 (<em>长 或 宽</em>) 超过了最大值，因为这会使 OpenGL 内存区域发生 <code>OutOfMemory</code>。</p><p>你的 <code>component</code> 的允许的最大值与机器有关，但一般来说，如果你的 <code>component</code> 的大小超过屏幕大小，就有可能触发Crash。</p></div><h3 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h3><p>你可以通过 <code>background-image</code> 属性创建线性渐变。</p><div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to top<span class="token punctuation">,</span> #a80077<span class="token punctuation">,</span> #66ff00<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| </code></pre></div><p>目前暂不支持 <code>radial-gradient</code>（径向渐变）。</p><p>Weex 目前只支持两种颜色的渐变，渐变方向如下：</p><ul><li><code>to right</code>：从左向右渐变</li><li><code>to left</code>：从右向左渐变</li><li><code>to bottom</code>：从上到下渐变</li><li><code>to top</code>：从下到上渐变</li><li><code>to bottom right</code>：从左上角到右下角</li><li><code>to top left</code>：从右下角到左上角</li></ul><div class="warning custom-block"><p class="custom-block-title">WARNING</p><ul><li><code>background-image</code> 优先级高于 <code>background-color</code>，这意味着同时设置 <code>background-image</code> 和 <code>background-color</code>，<code>background-color</code> 被覆盖。</li><li><code>background</code> 不支持简写。</li></ul></div><p><a href="http://dotwe.org/vue/5ca46fdb8520e5a1255533d390d41f63" target="_blank" rel="noopener noreferrer">示例<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h2 id="无障碍"><a href="#无障碍" class="header-anchor">#</a> 无障碍</h2><ul><li>role 指定组件角色,告诉用户当前元素是何种类型组件 参考<a href="https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties" target="_blank" rel="noopener noreferrer">web定义<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a><ul><li>button</li><li>input <code>input</code>组件的 的默认值是 input</li><li>img <code>image</code>组件的的默认值是 img</li><li>link</li><li>search</li><li>tab</li><li>text <code>text</code>组件的 role 的默认值是 text</li></ul></li><li>aria-hidden 对有用户影藏掉一些没必要的元素</li><li>aria-label 配置当前元素被聚焦后的文案提示</li></ul><h3 id="demo"><a href="#demo" class="header-anchor">#</a> Demo:</h3><div class="language- extra-class"><pre class="language-text"><code><text class='txt' role='text' aria-label='I am a text'>text</text> |
| |
| <a class='a' role='link' href='http://xxx.xxx.xxx' aria-label='I am a link'></a> |
| |
| |
| <image class='img' aria-hidden='true' role='img' src="http://xxx.png" aria-label='I am a image，but you can not see me'></image> |
| |
| </code></pre></div><h2 id="阴影-box-shadow"><a href="#阴影-box-shadow" class="header-anchor">#</a> 阴影(box-shadow) <span class="badge warn middle">0.11+</span></h2><p>Weex 支持 <code>box-shadow</code> 属性用于设置元素阴影。</p><h3 id="注意"><a href="#注意" class="header-anchor">#</a> 注意</h3><div class="warning custom-block"><p class="custom-block-title">WARNING</p><ul><li>目前仅 iOS 支持 <code>box-shadow</code> 属性，Android 暂不支持，可以使用图片代替。</li><li>每个元素只支持设置一个阴影效果，不支持多个阴影同时作用于一个元素。</li></ul></div><h3 id="参数-2"><a href="#参数-2" class="header-anchor">#</a> 参数</h3><ul><li><p><code>inset</code>（可选）</p><p>默认阴影在边框外。使用 <code>inset</code> 后，阴影在边框内（即使是透明边框），背景之上内容之下。</p></li><li><p><code><offset-x></code></p><p><code>px</code> 单位长度值，用来设置阴影偏移量。<code><offset-x></code> 设置水平偏移量，如果是负值则阴影位于元素左边。 <code><offset-y></code> 设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是 0，那么阴影位于元素后面。这时如果设置了 <code><blur-radius></code> 或 <code><spread-radius></code> 则有模糊效果。</p></li><li><p><code><offset-y></code></p><p><code>px</code> 单位长度值，用来设置阴影偏移量。<code><offset-x></code> 设置水平偏移量，如果是负值则阴影位于元素左边。 <code><offset-y></code> 设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是 0，那么阴影位于元素后面。这时如果设置了 <code><blur-radius></code> 或 <code><spread-radius></code> 则有模糊效果。</p></li><li><p><code><blur-radius></code></p><p>设置模糊半径，<code>px</code> 单位长度值，值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。</p></li><li><p><code><color></code></p><p>设置阴影颜色，可参考 <a href="/zh/docs/styles/css-units.html#css-颜色单位">CSS 颜色单位</a>。</p></li></ul><p><a href="http://dotwe.org/vue/bc0324f47ea425f89d0e5102801ee856" target="_blank" rel="noopener noreferrer">示例<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h2 id="其他基本样式"><a href="#其他基本样式" class="header-anchor">#</a> 其他基本样式</h2><ul><li><code>opacity {number}</code>：取值范围为 [0, 1] 区间。默认值是 1，即完全不透明；0 是完全透明；0.5 是 50% 的透明度。</li><li><code>background-color {color}</code>：设定元素的背景色，可选值为色值，支持RGB（ <code>rgb(255, 0, 0)</code> ）；RGBA（ <code>rgba(255, 0, 0, 0.5)</code> ）；十六进制（ <code>#ff0000</code> ）；精简写法的十六进制（ <code>#f00</code> ）；色值关键字（<code>red</code>），默认值是 <code>transparent</code> 。</li></ul><p><strong>注意：</strong><a href="/zh/docs/styles/css-units.html#颜色关键字列表">色值的关键字列表</a>。</p><div class="warning custom-block"><p class="custom-block-title">Android 兼容性</p><p>你有可能会遇如下Crash <strong>Unable to create layer for xxx</strong> 如果你的含有 <code>background-color</code> 的 <code>component</code> 的大小 (<em>长或宽</em>) 超过了最大值，因为这会使 OpenGL 内存区域发生 <code>OutOfMemory</code>。</p><p>你的 <code>component</code> 的允许的最大值与机器有关，但一般来说，如果你的 <code>component</code> 的大小超过屏幕大小，就有可能触发Crash。</p></div><h2 id="上手样式"><a href="#上手样式" class="header-anchor">#</a> 上手样式</h2><p>如果对于样式写法需要更多上手参考，可参考每个组件的文档中，都有常见的例子可供参考。</p><p>你可以按照以下步骤来规划 Weex 页面的样式。</p><ol><li>全局样式规划：将整个页面分割成合适的模块。</li><li>flex 布局：排列和对齐页面模块。</li><li>定位盒子：定位并设置偏移量。</li><li>细节样式处理：增加特定的具体样式。</li></ol></div><div class="page-nav"><p class="inner"><span class="prev"> |
| ← |
| <a href="/zh/docs/modules/console-log.html" class="prev"> |
| console-log |
| </a></span><span class="next"><a href="/zh/docs/styles/text-styles.html"> |
| 文本样式 |
| </a> |
| → |
| </span></p></div><div class="page-edit"><div class="last-updated"><span class="prefix">上次更新: </span><span class="time">2020/12/10</span></div><div class="edit-link"><a href="https://github.com/apache/incubator-weex-site/edit/master/docs/zh/docs/styles/common-styles.md" target="_blank" rel="noopener noreferrer">编辑此页</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><a href="https://github.com/apache/incubator-weex-site/issues/new?body=https%3A%2F%2Fweex.io%2F" target="_blank" rel="noopener noreferrer" class="issueText">提交建议</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="score"><span class="choice"><img src="https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg" class="score-icon">文档写得很棒</span><span class="choice"><img src="https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg" class="score-icon bad">文档写得很差</span></div></div><div class="license-wrap" style="display:none;"><footer class="footer-container" data-v-0ad13d84><div class="footer-body" data-v-0ad13d84><img src="/logo@2x.svg" class="logo" data-v-0ad13d84><img src="//img.alicdn.com/tfs/TB11BRiIW6qK1RjSZFmXXX0PFXa-365-365.png" class="apache" data-v-0ad13d84><div class="cols-container" data-v-0ad13d84><div class="col col-12" data-v-0ad13d84><h3 data-v-0ad13d84>Disclaimer</h3><p data-v-0ad13d84>Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the |
| Incubator. Incubation is required of all newly accepted projects until a further review indicates that the |
| infrastructure, communications, and decision making process have stabilized in a manner consistent with |
| other successful ASF projects. While incubation status is not necessarily a reflection of the completeness |
| or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>ASF</dt><dd data-v-0ad13d84><a href="http://www.apache.org" target="_self" data-v-0ad13d84>Foundation</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/licenses/" target="_self" data-v-0ad13d84>License</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/events/current-event" target="_self" data-v-0ad13d84>Events</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/foundation/sponsorship.html" target="_self" data-v-0ad13d84>Sponsorship</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/foundation/thanks.html" target="_self" data-v-0ad13d84>Thanks</a></dd></dl></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>Documentation</dt><dd data-v-0ad13d84><a href="/guide/develop/create-a-new-app.html" target="_self" data-v-0ad13d84>Quick start</a></dd><dd data-v-0ad13d84><a href="/guide/develop/setup-develop-environment.html" target="_self" data-v-0ad13d84>Developer guide</a></dd></dl></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>Resources</dt><dd data-v-0ad13d84><a href="/blog/write-a-blog.html" target="_self" data-v-0ad13d84>Blog</a></dd><dd data-v-0ad13d84><a href="/community/" target="_self" data-v-0ad13d84>Community</a></dd><dd data-v-0ad13d84><a href="/guide/contribute/thanks.html" target="_self" data-v-0ad13d84>Thanks by Weex</a></dd><dd data-v-0ad13d84><a href="https://www.apache.org/security/" target="_self" data-v-0ad13d84>Security</a></dd></dl></div></div><div class="copyright" data-v-0ad13d84><span data-v-0ad13d84>Copyright © 2018-2019 The Apache Software Foundation. Apache and the Apache feather |
| logo are trademarks of The Apache Software Foundation.</span></div></div></footer></div></div><!----></div></div> |
| <script src="/assets/js/app.0ff943f0.js" defer></script><script src="/assets/js/160.2a970224.js" defer></script> |
| </body> |
| </html> |
