YorkShen closed pull request #279: * Update CSS Unit.
URL: https://github.com/apache/incubator-weex-site/pull/279
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/docs/docs/styles/color-name.md b/docs/docs/styles/color-name.md
deleted file mode 100644
index 26ba985c9..000000000
--- a/docs/docs/styles/color-name.md
+++ /dev/null
@@ -1,676 +0,0 @@
-### List of supported color
-#### key words of basic color:
-<table>
-<thead>
-<tr>
-<th>Color</th>
-<th>RGB to HEX</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>black(黑)</td>
-<td>#000000</td>
-</tr>
-<tr>
-<td>silver(银)</td>
-<td>#C0C0C0</td>
-</tr>
-<tr>
-<td>gray(灰)</td>
-<td>#808080</td>
-</tr>
-<tr>
-<td>white(白)</td>
-<td>#FFFFFF</td>
-</tr>
-<tr>
-<td>maroon(褐紫红)</td>
-<td>#800000</td>
-</tr>
-<tr>
-<td>red(红)</td>
-<td>#FF0000</td>
-</tr>
-<tr>
-<td>purple(紫)</td>
-<td>#800080</td>
-</tr>
-<tr>
-<td>fuchsia(晚樱)</td>
-<td>#FF00FF</td>
-</tr>
-<tr>
-<td>green(绿)</td>
-<td>#008000</td>
-</tr>
-<tr>
-<td>lime(石灰)</td>
-<td>#00FF00</td>
-</tr>
-<tr>
-<td>olive(橄榄)</td>
-<td>#808000</td>
-</tr>
-<tr>
-<td>yellow(黄)</td>
-<td>#FFFF00</td>
-</tr>
-<tr>
-<td>navy(海军蓝)</td>
-<td>#000080</td>
-</tr>
-<tr>
-<td>blue(蓝)</td>
-<td>#0000FF</td>
-</tr>
-<tr>
-<td>teal(水鸭)</td>
-<td>#008080</td>
-</tr>
-<tr>
-<td>aqua(水蓝)</td>
-<td>#00FFFF</td>
-</tr>
-</tbody>
-</table>
-
-#### key words of extended color:
-<table>
-<thead>
-<tr>
-<th>颜色名</th>
-<th>十六进制RGB值</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>aliceblue</td>
-<td>#F0F8FF</td>
-</tr>
-<tr>
-<td>antiquewhite</td>
-<td>#FAEBD7</td>
-</tr>
-<tr>
-<td>aqua</td>
-<td>#00FFFF</td>
-</tr>
-<tr>
-<td>aquamarine</td>
-<td>#7FFFD4</td>
-</tr>
-<tr>
-<td>azure</td>
-<td>#F0FFFF</td>
-</tr>
-<tr>
-<td>beige</td>
-<td>#F5F5DC</td>
-</tr>
-<tr>
-<td>bisque</td>
-<td>#FFE4C4</td>
-</tr>
-<tr>
-<td>black</td>
-<td>#000000</td>
-</tr>
-<tr>
-<td>blanchedalmond</td>
-<td>#FFEBCD</td>
-</tr>
-<tr>
-<td>blue</td>
-<td>#0000FF</td>
-</tr>
-<tr>
-<td>blueviolet</td>
-<td>#8A2BE2</td>
-</tr>
-<tr>
-<td>brown</td>
-<td>#A52A2A</td>
-</tr>
-<tr>
-<td>burlywood</td>
-<td>#DEB887</td>
-</tr>
-<tr>
-<td>cadetblue</td>
-<td>#5F9EA0</td>
-</tr>
-<tr>
-<td>chartreuse</td>
-<td>#7FFF00</td>
-</tr>
-<tr>
-<td>chocolate</td>
-<td>#D2691E</td>
-</tr>
-<tr>
-<td>coral</td>
-<td>#FF7F50</td>
-</tr>
-<tr>
-<td>cornflowerblue</td>
-<td>#6495ED</td>
-</tr>
-<tr>
-<td>cornsilk</td>
-<td>#FFF8DC</td>
-</tr>
-<tr>
-<td>crimson</td>
-<td>#DC143C</td>
-</tr>
-<tr>
-<td>cyan</td>
-<td>#00FFFF</td>
-</tr>
-<tr>
-<td>darkblue</td>
-<td>#00008B</td>
-</tr>
-<tr>
-<td>darkcyan</td>
-<td>#008B8B</td>
-</tr>
-<tr>
-<td>darkgoldenrod</td>
-<td>#B8860B</td>
-</tr>
-<tr>
-<td>darkgray</td>
-<td>#A9A9A9</td>
-</tr>
-<tr>
-<td>darkgreen</td>
-<td>#006400</td>
-</tr>
-<tr>
-<td>darkgrey</td>
-<td>#A9A9A9</td>
-</tr>
-<tr>
-<td>darkkhaki</td>
-<td>#BDB76B</td>
-</tr>
-<tr>
-<td>darkmagenta</td>
-<td>#8B008B</td>
-</tr>
-<tr>
-<td>darkolivegreen</td>
-<td>#556B2F</td>
-</tr>
-<tr>
-<td>darkorange</td>
-<td>#FF8C00</td>
-</tr>
-<tr>
-<td>darkorchid</td>
-<td>#9932CC</td>
-</tr>
-<tr>
-<td>darkred</td>
-<td>#8B0000</td>
-</tr>
-<tr>
-<td>darksalmon</td>
-<td>#E9967A</td>
-</tr>
-<tr>
-<td>darkseagreen</td>
-<td>#8FBC8F</td>
-</tr>
-<tr>
-<td>darkslateblue</td>
-<td>#483D8B</td>
-</tr>
-<tr>
-<td>darkslategray</td>
-<td>#2F4F4F</td>
-</tr>
-<tr>
-<td>darkslategrey</td>
-<td>#2F4F4F</td>
-</tr>
-<tr>
-<td>darkturquoise</td>
-<td>#00CED1</td>
-</tr>
-<tr>
-<td>darkviolet</td>
-<td>#9400D3</td>
-</tr>
-<tr>
-<td>deeppink</td>
-<td>#FF1493</td>
-</tr>
-<tr>
-<td>deepskyblue</td>
-<td>#00BFFF</td>
-</tr>
-<tr>
-<td>dimgray</td>
-<td>#696969</td>
-</tr>
-<tr>
-<td>dimgrey</td>
-<td>#696969</td>
-</tr>
-<tr>
-<td>dodgerblue</td>
-<td>#1E90FF</td>
-</tr>
-<tr>
-<td>firebrick</td>
-<td>#B22222</td>
-</tr>
-<tr>
-<td>floralwhite</td>
-<td>#FFFAF0</td>
-</tr>
-<tr>
-<td>forestgreen</td>
-<td>#228B22</td>
-</tr>
-<tr>
-<td>fuchsia</td>
-<td>#FF00FF</td>
-</tr>
-<tr>
-<td>gainsboro</td>
-<td>#DCDCDC</td>
-</tr>
-<tr>
-<td>ghostwhite</td>
-<td>#F8F8FF</td>
-</tr>
-<tr>
-<td>gold</td>
-<td>#FFD700</td>
-</tr>
-<tr>
-<td>goldenrod</td>
-<td>#DAA520</td>
-</tr>
-<tr>
-<td>gray</td>
-<td>#808080</td>
-</tr>
-<tr>
-<td>green</td>
-<td>#008000</td>
-</tr>
-<tr>
-<td>greenyellow</td>
-<td>#ADFF2F</td>
-</tr>
-<tr>
-<td>grey</td>
-<td>#808080</td>
-</tr>
-<tr>
-<td>honeydew</td>
-<td>#F0FFF0</td>
-</tr>
-<tr>
-<td>hotpink</td>
-<td>#FF69B4</td>
-</tr>
-<tr>
-<td>indianred</td>
-<td>#CD5C5C</td>
-</tr>
-<tr>
-<td>indigo</td>
-<td>#4B0082</td>
-</tr>
-<tr>
-<td>ivory</td>
-<td>#FFFFF0</td>
-</tr>
-<tr>
-<td>khaki</td>
-<td>#F0E68C</td>
-</tr>
-<tr>
-<td>lavender</td>
-<td>#E6E6FA</td>
-</tr>
-<tr>
-<td>lavenderblush</td>
-<td>#FFF0F5</td>
-</tr>
-<tr>
-<td>lawngreen</td>
-<td>#7CFC00</td>
-</tr>
-<tr>
-<td>lemonchiffon</td>
-<td>#FFFACD</td>
-</tr>
-<tr>
-<td>lightblue</td>
-<td>#ADD8E6</td>
-</tr>
-<tr>
-<td>lightcoral</td>
-<td>#F08080</td>
-</tr>
-<tr>
-<td>lightcyan</td>
-<td>#E0FFFF</td>
-</tr>
-<tr>
-<td>lightgoldenrodyellow</td>
-<td>#FAFAD2</td>
-</tr>
-<tr>
-<td>lightgray</td>
-<td>#D3D3D3</td>
-</tr>
-<tr>
-<td>lightgreen</td>
-<td>#90EE90</td>
-</tr>
-<tr>
-<td>lightgrey</td>
-<td>#D3D3D3</td>
-</tr>
-<tr>
-<td>lightpink</td>
-<td>#FFB6C1</td>
-</tr>
-<tr>
-<td>lightsalmon</td>
-<td>#FFA07A</td>
-</tr>
-<tr>
-<td>lightseagreen</td>
-<td>#20B2AA</td>
-</tr>
-<tr>
-<td>lightskyblue</td>
-<td>#87CEFA</td>
-</tr>
-<tr>
-<td>lightslategray</td>
-<td>#778899</td>
-</tr>
-<tr>
-<td>lightslategrey</td>
-<td>#778899</td>
-</tr>
-<tr>
-<td>lightsteelblue</td>
-<td>#B0C4DE</td>
-</tr>
-<tr>
-<td>lightyellow</td>
-<td>#FFFFE0</td>
-</tr>
-<tr>
-<td>lime</td>
-<td>#00FF00</td>
-</tr>
-<tr>
-<td>limegreen</td>
-<td>#32CD32</td>
-</tr>
-<tr>
-<td>linen</td>
-<td>#FAF0E6</td>
-</tr>
-<tr>
-<td>magenta</td>
-<td>#FF00FF</td>
-</tr>
-<tr>
-<td>maroon</td>
-<td>#800000</td>
-</tr>
-<tr>
-<td>mediumaquamarine</td>
-<td>#66CDAA</td>
-</tr>
-<tr>
-<td>mediumblue</td>
-<td>#0000CD</td>
-</tr>
-<tr>
-<td>mediumorchid</td>
-<td>#BA55D3</td>
-</tr>
-<tr>
-<td>mediumpurple</td>
-<td>#9370DB</td>
-</tr>
-<tr>
-<td>mediumseagreen</td>
-<td>#3CB371</td>
-</tr>
-<tr>
-<td>mediumslateblue</td>
-<td>#7B68EE</td>
-</tr>
-<tr>
-<td>mediumspringgreen</td>
-<td>#00FA9A</td>
-</tr>
-<tr>
-<td>mediumturquoise</td>
-<td>#48D1CC</td>
-</tr>
-<tr>
-<td>mediumvioletred</td>
-<td>#C71585</td>
-</tr>
-<tr>
-<td>midnightblue</td>
-<td>#191970</td>
-</tr>
-<tr>
-<td>mintcream</td>
-<td>#F5FFFA</td>
-</tr>
-<tr>
-<td>mistyrose</td>
-<td>#FFE4E1</td>
-</tr>
-<tr>
-<td>moccasin</td>
-<td>#FFE4B5</td>
-</tr>
-<tr>
-<td>navajowhite</td>
-<td>#FFDEAD</td>
-</tr>
-<tr>
-<td>navy</td>
-<td>#000080</td>
-</tr>
-<tr>
-<td>oldlace</td>
-<td>#FDF5E6</td>
-</tr>
-<tr>
-<td>olive</td>
-<td>#808000</td>
-</tr>
-<tr>
-<td>olivedrab</td>
-<td>#6B8E23</td>
-</tr>
-<tr>
-<td>orange</td>
-<td>#FFA500</td>
-</tr>
-<tr>
-<td>orangered</td>
-<td>#FF4500</td>
-</tr>
-<tr>
-<td>orchid</td>
-<td>#DA70D6</td>
-</tr>
-<tr>
-<td>palegoldenrod</td>
-<td>#EEE8AA</td>
-</tr>
-<tr>
-<td>palegreen</td>
-<td>#98FB98</td>
-</tr>
-<tr>
-<td>paleturquoise</td>
-<td>#AFEEEE</td>
-</tr>
-<tr>
-<td>palevioletred</td>
-<td>#DB7093</td>
-</tr>
-<tr>
-<td>papayawhip</td>
-<td>#FFEFD5</td>
-</tr>
-<tr>
-<td>peachpuff</td>
-<td>#FFDAB9</td>
-</tr>
-<tr>
-<td>peru</td>
-<td>#CD853F</td>
-</tr>
-<tr>
-<td>pink</td>
-<td>#FFC0CB</td>
-</tr>
-<tr>
-<td>plum</td>
-<td>#DDA0DD</td>
-</tr>
-<tr>
-<td>powderblue</td>
-<td>#B0E0E6</td>
-</tr>
-<tr>
-<td>purple</td>
-<td>#800080</td>
-</tr>
-<tr>
-<td>red</td>
-<td>#FF0000</td>
-</tr>
-<tr>
-<td>rosybrown</td>
-<td>#BC8F8F</td>
-</tr>
-<tr>
-<td>royalblue</td>
-<td>#4169E1</td>
-</tr>
-<tr>
-<td>saddlebrown</td>
-<td>#8B4513</td>
-</tr>
-<tr>
-<td>salmon</td>
-<td>#FA8072</td>
-</tr>
-<tr>
-<td>sandybrown</td>
-<td>#F4A460</td>
-</tr>
-<tr>
-<td>seagreen</td>
-<td>#2E8B57</td>
-</tr>
-<tr>
-<td>seashell</td>
-<td>#FFF5EE</td>
-</tr>
-<tr>
-<td>sienna</td>
-<td>#A0522D</td>
-</tr>
-<tr>
-<td>silver</td>
-<td>#C0C0C0</td>
-</tr>
-<tr>
-<td>skyblue</td>
-<td>#87CEEB</td>
-</tr>
-<tr>
-<td>slateblue</td>
-<td>#6A5ACD</td>
-</tr>
-<tr>
-<td>slategray</td>
-<td>#708090</td>
-</tr>
-<tr>
-<td>slategrey</td>
-<td>#708090</td>
-</tr>
-<tr>
-<td>snow</td>
-<td>#FFFAFA</td>
-</tr>
-<tr>
-<td>springgreen</td>
-<td>#00FF7F</td>
-</tr>
-<tr>
-<td>steelblue</td>
-<td>#4682B4</td>
-</tr>
-<tr>
-<td>tan</td>
-<td>#D2B48C</td>
-</tr>
-<tr>
-<td>teal</td>
-<td>#008080</td>
-</tr>
-<tr>
-<td>thistle</td>
-<td>#D8BFD8</td>
-</tr>
-<tr>
-<td>tomato</td>
-<td>#FF6347</td>
-</tr>
-<tr>
-<td>turquoise</td>
-<td>#40E0D0</td>
-</tr>
-<tr>
-<td>violet</td>
-<td>#EE82EE</td>
-</tr>
-<tr>
-<td>wheat</td>
-<td>#F5DEB3</td>
-</tr>
-<tr>
-<td>white</td>
-<td>#FFFFFF</td>
-</tr>
-<tr>
-<td>whitesmoke</td>
-<td>#F5F5F5</td>
-</tr>
-<tr>
-<td>yellow</td>
-<td>#FFFF00</td>
-</tr>
-<tr>
-<td>yellowgreen</td>
-<td>#9ACD32</td>
-</tr>
-</tbody>
-</table>
\ No newline at end of file
diff --git a/docs/docs/styles/css-units.md b/docs/docs/styles/css-units.md
index 64861b72a..3b37b34ce 100644
--- a/docs/docs/styles/css-units.md
+++ b/docs/docs/styles/css-units.md
@@ -1,41 +1,57 @@
-# CSS 单位
+# CSS Unit
-## CSS 长度单位
+## CSS `length` unit
-在 Weex 中，我们**只支持 `px` 长度单位**。并且它将在 JavaScript 运行时和本机渲染器中解析为数字类型。
+`px` is the only supported length units.
-::: warning 注意
-- Weex 不支持类似 `em`、`rem`、`pt` 这样的 CSS 标准中的其他长度单位；
-- 单位 `px` 不可省略，否则在 H5 环境无法正确渲染；
-- `line-height` 不支持相对 `font-size` 计算倍数，必须是 `px`。
+::: danger
+Ignoring `px` will cause render error on Webview.
:::
-## CSS 数值单位
-
-在 Weex 中，除了长度单位外，还有数值单位，仅仅一个数值，后面没有 `px` 等单位。用于 `opacity`，`lines`，`flex`
等属性指定一个纯数值。
-
-有时值必须是整数，例如：`lines`。
+::: warning
+`em`、`rem`、`pt`, `%`, etc. are not supported.
+:::
-## CSS 百分比单位
+## CSS `number` units
-**Weex 暂不支持百分比，如“50％”，“66.7％”等。**
+CSS `number` unit is a pure number without `px`, styles like
`opacity`，`lines`，`flex` only accept `number` unit, you can find detail in
[common-style](./common-styles.html).
-## CSS 颜色单位
+::: tip
+Some style only accepts integer value, such as `lines`.
+:::
-Weex 支持多种颜色单位：
+## CSS `color` unit
+The supported color format is listed below:
+ * RGB, e.g. `rgb(250, 0, 0)`
+ * RGBA, e.g. `rgba(255, 0, 0, 0.5)`
+ * Hexadecimal color e.g. `#ff0000` or `#f00`
+ * Color keywords
-- 颜色关键字，例如 `red`，`green` 等；
-- 十六进制的 HEX 值，每个颜色包括一个 `#` 号，其后面紧跟着三组两位十六进制数，如果这三组数值各自在两位上的数字都相同，那么本单位也可缩写为
`#RGB` 的方式。例如：`#FF8800` 可以缩写为 `#F80`;
-- `rgb(a,b,c)`;
-- `rgba(a,b,c,d)`.
+```css
+.classA {
+ /* 3-chars hex */
+ color: #0f0;
+ /* 6-chars hex */
+ color: #00ff00;
+ /* rgba */
+ color: rgb(255, 0, 0);
+ /* rgba */
+ color: rgba(255, 0, 0, 0.5);
+ /* transparent */
+ color: transparent;
+ /* Basic color keywords */
+ color: orange;
+ /* Extended color keywords */
+ color: darkgray;
+}
+```
-::: warning 注意
-- 不支持 `hsl()`、`hsla()` 8个字符的十六进制颜色。
-- 不支持 `currentColor`单位。
-- `rgb(a,b,c)` 或 `rgba(a,b,c,d)` 的性能比其他颜色格式差很多，请选择合适的颜色格式。
+::: warning
+* Only the color format listed above is supported, others are not.
+* `6-chars hex` format is the most efficient way. Use it unless you have a
special reason.
:::
-### 颜色关键字列表
+### CSS color keywords
| 颜色名 | 十六进制RGB值 |
| --- | --- |
diff --git a/docs/zh/docs/styles/color-name.md
b/docs/zh/docs/styles/color-name.md
deleted file mode 100644
index a8962f78d..000000000
--- a/docs/zh/docs/styles/color-name.md
+++ /dev/null
@@ -1,676 +0,0 @@
-### 支持的颜色名称列表
-#### 基础颜色关键词:
-<table>
-<thead>
-<tr>
-<th>颜色名</th>
-<th>十六进制RGB值</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>black(黑)</td>
-<td>#000000</td>
-</tr>
-<tr>
-<td>silver(银)</td>
-<td>#C0C0C0</td>
-</tr>
-<tr>
-<td>gray(灰)</td>
-<td>#808080</td>
-</tr>
-<tr>
-<td>white(白)</td>
-<td>#FFFFFF</td>
-</tr>
-<tr>
-<td>maroon(褐紫红)</td>
-<td>#800000</td>
-</tr>
-<tr>
-<td>red(红)</td>
-<td>#FF0000</td>
-</tr>
-<tr>
-<td>purple(紫)</td>
-<td>#800080</td>
-</tr>
-<tr>
-<td>fuchsia(晚樱)</td>
-<td>#FF00FF</td>
-</tr>
-<tr>
-<td>green(绿)</td>
-<td>#008000</td>
-</tr>
-<tr>
-<td>lime(石灰)</td>
-<td>#00FF00</td>
-</tr>
-<tr>
-<td>olive(橄榄)</td>
-<td>#808000</td>
-</tr>
-<tr>
-<td>yellow(黄)</td>
-<td>#FFFF00</td>
-</tr>
-<tr>
-<td>navy(海军蓝)</td>
-<td>#000080</td>
-</tr>
-<tr>
-<td>blue(蓝)</td>
-<td>#0000FF</td>
-</tr>
-<tr>
-<td>teal(水鸭)</td>
-<td>#008080</td>
-</tr>
-<tr>
-<td>aqua(水蓝)</td>
-<td>#00FFFF</td>
-</tr>
-</tbody>
-</table>
-
-#### 扩展颜色关键词:
-<table>
-<thead>
-<tr>
-<th>颜色名</th>
-<th>十六进制RGB值</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>aliceblue</td>
-<td>#F0F8FF</td>
-</tr>
-<tr>
-<td>antiquewhite</td>
-<td>#FAEBD7</td>
-</tr>
-<tr>
-<td>aqua</td>
-<td>#00FFFF</td>
-</tr>
-<tr>
-<td>aquamarine</td>
-<td>#7FFFD4</td>
-</tr>
-<tr>
-<td>azure</td>
-<td>#F0FFFF</td>
-</tr>
-<tr>
-<td>beige</td>
-<td>#F5F5DC</td>
-</tr>
-<tr>
-<td>bisque</td>
-<td>#FFE4C4</td>
-</tr>
-<tr>
-<td>black</td>
-<td>#000000</td>
-</tr>
-<tr>
-<td>blanchedalmond</td>
-<td>#FFEBCD</td>
-</tr>
-<tr>
-<td>blue</td>
-<td>#0000FF</td>
-</tr>
-<tr>
-<td>blueviolet</td>
-<td>#8A2BE2</td>
-</tr>
-<tr>
-<td>brown</td>
-<td>#A52A2A</td>
-</tr>
-<tr>
-<td>burlywood</td>
-<td>#DEB887</td>
-</tr>
-<tr>
-<td>cadetblue</td>
-<td>#5F9EA0</td>
-</tr>
-<tr>
-<td>chartreuse</td>
-<td>#7FFF00</td>
-</tr>
-<tr>
-<td>chocolate</td>
-<td>#D2691E</td>
-</tr>
-<tr>
-<td>coral</td>
-<td>#FF7F50</td>
-</tr>
-<tr>
-<td>cornflowerblue</td>
-<td>#6495ED</td>
-</tr>
-<tr>
-<td>cornsilk</td>
-<td>#FFF8DC</td>
-</tr>
-<tr>
-<td>crimson</td>
-<td>#DC143C</td>
-</tr>
-<tr>
-<td>cyan</td>
-<td>#00FFFF</td>
-</tr>
-<tr>
-<td>darkblue</td>
-<td>#00008B</td>
-</tr>
-<tr>
-<td>darkcyan</td>
-<td>#008B8B</td>
-</tr>
-<tr>
-<td>darkgoldenrod</td>
-<td>#B8860B</td>
-</tr>
-<tr>
-<td>darkgray</td>
-<td>#A9A9A9</td>
-</tr>
-<tr>
-<td>darkgreen</td>
-<td>#006400</td>
-</tr>
-<tr>
-<td>darkgrey</td>
-<td>#A9A9A9</td>
-</tr>
-<tr>
-<td>darkkhaki</td>
-<td>#BDB76B</td>
-</tr>
-<tr>
-<td>darkmagenta</td>
-<td>#8B008B</td>
-</tr>
-<tr>
-<td>darkolivegreen</td>
-<td>#556B2F</td>
-</tr>
-<tr>
-<td>darkorange</td>
-<td>#FF8C00</td>
-</tr>
-<tr>
-<td>darkorchid</td>
-<td>#9932CC</td>
-</tr>
-<tr>
-<td>darkred</td>
-<td>#8B0000</td>
-</tr>
-<tr>
-<td>darksalmon</td>
-<td>#E9967A</td>
-</tr>
-<tr>
-<td>darkseagreen</td>
-<td>#8FBC8F</td>
-</tr>
-<tr>
-<td>darkslateblue</td>
-<td>#483D8B</td>
-</tr>
-<tr>
-<td>darkslategray</td>
-<td>#2F4F4F</td>
-</tr>
-<tr>
-<td>darkslategrey</td>
-<td>#2F4F4F</td>
-</tr>
-<tr>
-<td>darkturquoise</td>
-<td>#00CED1</td>
-</tr>
-<tr>
-<td>darkviolet</td>
-<td>#9400D3</td>
-</tr>
-<tr>
-<td>deeppink</td>
-<td>#FF1493</td>
-</tr>
-<tr>
-<td>deepskyblue</td>
-<td>#00BFFF</td>
-</tr>
-<tr>
-<td>dimgray</td>
-<td>#696969</td>
-</tr>
-<tr>
-<td>dimgrey</td>
-<td>#696969</td>
-</tr>
-<tr>
-<td>dodgerblue</td>
-<td>#1E90FF</td>
-</tr>
-<tr>
-<td>firebrick</td>
-<td>#B22222</td>
-</tr>
-<tr>
-<td>floralwhite</td>
-<td>#FFFAF0</td>
-</tr>
-<tr>
-<td>forestgreen</td>
-<td>#228B22</td>
-</tr>
-<tr>
-<td>fuchsia</td>
-<td>#FF00FF</td>
-</tr>
-<tr>
-<td>gainsboro</td>
-<td>#DCDCDC</td>
-</tr>
-<tr>
-<td>ghostwhite</td>
-<td>#F8F8FF</td>
-</tr>
-<tr>
-<td>gold</td>
-<td>#FFD700</td>
-</tr>
-<tr>
-<td>goldenrod</td>
-<td>#DAA520</td>
-</tr>
-<tr>
-<td>gray</td>
-<td>#808080</td>
-</tr>
-<tr>
-<td>green</td>
-<td>#008000</td>
-</tr>
-<tr>
-<td>greenyellow</td>
-<td>#ADFF2F</td>
-</tr>
-<tr>
-<td>grey</td>
-<td>#808080</td>
-</tr>
-<tr>
-<td>honeydew</td>
-<td>#F0FFF0</td>
-</tr>
-<tr>
-<td>hotpink</td>
-<td>#FF69B4</td>
-</tr>
-<tr>
-<td>indianred</td>
-<td>#CD5C5C</td>
-</tr>
-<tr>
-<td>indigo</td>
-<td>#4B0082</td>
-</tr>
-<tr>
-<td>ivory</td>
-<td>#FFFFF0</td>
-</tr>
-<tr>
-<td>khaki</td>
-<td>#F0E68C</td>
-</tr>
-<tr>
-<td>lavender</td>
-<td>#E6E6FA</td>
-</tr>
-<tr>
-<td>lavenderblush</td>
-<td>#FFF0F5</td>
-</tr>
-<tr>
-<td>lawngreen</td>
-<td>#7CFC00</td>
-</tr>
-<tr>
-<td>lemonchiffon</td>
-<td>#FFFACD</td>
-</tr>
-<tr>
-<td>lightblue</td>
-<td>#ADD8E6</td>
-</tr>
-<tr>
-<td>lightcoral</td>
-<td>#F08080</td>
-</tr>
-<tr>
-<td>lightcyan</td>
-<td>#E0FFFF</td>
-</tr>
-<tr>
-<td>lightgoldenrodyellow</td>
-<td>#FAFAD2</td>
-</tr>
-<tr>
-<td>lightgray</td>
-<td>#D3D3D3</td>
-</tr>
-<tr>
-<td>lightgreen</td>
-<td>#90EE90</td>
-</tr>
-<tr>
-<td>lightgrey</td>
-<td>#D3D3D3</td>
-</tr>
-<tr>
-<td>lightpink</td>
-<td>#FFB6C1</td>
-</tr>
-<tr>
-<td>lightsalmon</td>
-<td>#FFA07A</td>
-</tr>
-<tr>
-<td>lightseagreen</td>
-<td>#20B2AA</td>
-</tr>
-<tr>
-<td>lightskyblue</td>
-<td>#87CEFA</td>
-</tr>
-<tr>
-<td>lightslategray</td>
-<td>#778899</td>
-</tr>
-<tr>
-<td>lightslategrey</td>
-<td>#778899</td>
-</tr>
-<tr>
-<td>lightsteelblue</td>
-<td>#B0C4DE</td>
-</tr>
-<tr>
-<td>lightyellow</td>
-<td>#FFFFE0</td>
-</tr>
-<tr>
-<td>lime</td>
-<td>#00FF00</td>
-</tr>
-<tr>
-<td>limegreen</td>
-<td>#32CD32</td>
-</tr>
-<tr>
-<td>linen</td>
-<td>#FAF0E6</td>
-</tr>
-<tr>
-<td>magenta</td>
-<td>#FF00FF</td>
-</tr>
-<tr>
-<td>maroon</td>
-<td>#800000</td>
-</tr>
-<tr>
-<td>mediumaquamarine</td>
-<td>#66CDAA</td>
-</tr>
-<tr>
-<td>mediumblue</td>
-<td>#0000CD</td>
-</tr>
-<tr>
-<td>mediumorchid</td>
-<td>#BA55D3</td>
-</tr>
-<tr>
-<td>mediumpurple</td>
-<td>#9370DB</td>
-</tr>
-<tr>
-<td>mediumseagreen</td>
-<td>#3CB371</td>
-</tr>
-<tr>
-<td>mediumslateblue</td>
-<td>#7B68EE</td>
-</tr>
-<tr>
-<td>mediumspringgreen</td>
-<td>#00FA9A</td>
-</tr>
-<tr>
-<td>mediumturquoise</td>
-<td>#48D1CC</td>
-</tr>
-<tr>
-<td>mediumvioletred</td>
-<td>#C71585</td>
-</tr>
-<tr>
-<td>midnightblue</td>
-<td>#191970</td>
-</tr>
-<tr>
-<td>mintcream</td>
-<td>#F5FFFA</td>
-</tr>
-<tr>
-<td>mistyrose</td>
-<td>#FFE4E1</td>
-</tr>
-<tr>
-<td>moccasin</td>
-<td>#FFE4B5</td>
-</tr>
-<tr>
-<td>navajowhite</td>
-<td>#FFDEAD</td>
-</tr>
-<tr>
-<td>navy</td>
-<td>#000080</td>
-</tr>
-<tr>
-<td>oldlace</td>
-<td>#FDF5E6</td>
-</tr>
-<tr>
-<td>olive</td>
-<td>#808000</td>
-</tr>
-<tr>
-<td>olivedrab</td>
-<td>#6B8E23</td>
-</tr>
-<tr>
-<td>orange</td>
-<td>#FFA500</td>
-</tr>
-<tr>
-<td>orangered</td>
-<td>#FF4500</td>
-</tr>
-<tr>
-<td>orchid</td>
-<td>#DA70D6</td>
-</tr>
-<tr>
-<td>palegoldenrod</td>
-<td>#EEE8AA</td>
-</tr>
-<tr>
-<td>palegreen</td>
-<td>#98FB98</td>
-</tr>
-<tr>
-<td>paleturquoise</td>
-<td>#AFEEEE</td>
-</tr>
-<tr>
-<td>palevioletred</td>
-<td>#DB7093</td>
-</tr>
-<tr>
-<td>papayawhip</td>
-<td>#FFEFD5</td>
-</tr>
-<tr>
-<td>peachpuff</td>
-<td>#FFDAB9</td>
-</tr>
-<tr>
-<td>peru</td>
-<td>#CD853F</td>
-</tr>
-<tr>
-<td>pink</td>
-<td>#FFC0CB</td>
-</tr>
-<tr>
-<td>plum</td>
-<td>#DDA0DD</td>
-</tr>
-<tr>
-<td>powderblue</td>
-<td>#B0E0E6</td>
-</tr>
-<tr>
-<td>purple</td>
-<td>#800080</td>
-</tr>
-<tr>
-<td>red</td>
-<td>#FF0000</td>
-</tr>
-<tr>
-<td>rosybrown</td>
-<td>#BC8F8F</td>
-</tr>
-<tr>
-<td>royalblue</td>
-<td>#4169E1</td>
-</tr>
-<tr>
-<td>saddlebrown</td>
-<td>#8B4513</td>
-</tr>
-<tr>
-<td>salmon</td>
-<td>#FA8072</td>
-</tr>
-<tr>
-<td>sandybrown</td>
-<td>#F4A460</td>
-</tr>
-<tr>
-<td>seagreen</td>
-<td>#2E8B57</td>
-</tr>
-<tr>
-<td>seashell</td>
-<td>#FFF5EE</td>
-</tr>
-<tr>
-<td>sienna</td>
-<td>#A0522D</td>
-</tr>
-<tr>
-<td>silver</td>
-<td>#C0C0C0</td>
-</tr>
-<tr>
-<td>skyblue</td>
-<td>#87CEEB</td>
-</tr>
-<tr>
-<td>slateblue</td>
-<td>#6A5ACD</td>
-</tr>
-<tr>
-<td>slategray</td>
-<td>#708090</td>
-</tr>
-<tr>
-<td>slategrey</td>
-<td>#708090</td>
-</tr>
-<tr>
-<td>snow</td>
-<td>#FFFAFA</td>
-</tr>
-<tr>
-<td>springgreen</td>
-<td>#00FF7F</td>
-</tr>
-<tr>
-<td>steelblue</td>
-<td>#4682B4</td>
-</tr>
-<tr>
-<td>tan</td>
-<td>#D2B48C</td>
-</tr>
-<tr>
-<td>teal</td>
-<td>#008080</td>
-</tr>
-<tr>
-<td>thistle</td>
-<td>#D8BFD8</td>
-</tr>
-<tr>
-<td>tomato</td>
-<td>#FF6347</td>
-</tr>
-<tr>
-<td>turquoise</td>
-<td>#40E0D0</td>
-</tr>
-<tr>
-<td>violet</td>
-<td>#EE82EE</td>
-</tr>
-<tr>
-<td>wheat</td>
-<td>#F5DEB3</td>
-</tr>
-<tr>
-<td>white</td>
-<td>#FFFFFF</td>
-</tr>
-<tr>
-<td>whitesmoke</td>
-<td>#F5F5F5</td>
-</tr>
-<tr>
-<td>yellow</td>
-<td>#FFFF00</td>
-</tr>
-<tr>
-<td>yellowgreen</td>
-<td>#9ACD32</td>
-</tr>
-</tbody>
-</table>
\ No newline at end of file
diff --git a/docs/zh/docs/styles/css-units.md b/docs/zh/docs/styles/css-units.md
index 64861b72a..5754befbe 100644
--- a/docs/zh/docs/styles/css-units.md
+++ b/docs/zh/docs/styles/css-units.md
@@ -2,37 +2,53 @@
## CSS 长度单位
-在 Weex 中，我们**只支持 `px` 长度单位**。并且它将在 JavaScript 运行时和本机渲染器中解析为数字类型。
+在 Weex 中，我们**只支持 `px` 长度单位**。
::: warning 注意
-- Weex 不支持类似 `em`、`rem`、`pt` 这样的 CSS 标准中的其他长度单位；
+- Weex 不支持类似 `em`、`rem`、`pt`,`%` 这样的 CSS 标准中的其他长度单位；
- 单位 `px` 不可省略，否则在 H5 环境无法正确渲染；
-- `line-height` 不支持相对 `font-size` 计算倍数，必须是 `px`。
:::
## CSS 数值单位
在 Weex 中，除了长度单位外，还有数值单位，仅仅一个数值，后面没有 `px` 等单位。用于 `opacity`，`lines`，`flex`
等属性指定一个纯数值。
-有时值必须是整数，例如：`lines`。
-
-## CSS 百分比单位
-
-**Weex 暂不支持百分比，如“50％”，“66.7％”等。**
+::: tip
+有时值必须是整数，例如：`lines`
+:::
## CSS 颜色单位
Weex 支持多种颜色单位：
-- 颜色关键字，例如 `red`，`green` 等；
-- 十六进制的 HEX 值，每个颜色包括一个 `#` 号，其后面紧跟着三组两位十六进制数，如果这三组数值各自在两位上的数字都相同，那么本单位也可缩写为
`#RGB` 的方式。例如：`#FF8800` 可以缩写为 `#F80`;
-- `rgb(a,b,c)`;
-- `rgba(a,b,c,d)`.
+* 精简写法的十六进制，如`#f00`
+* 十六进制，如 `#ff0000`
+* RGB， 如 `rgb(255, 0, 0)`
+* RGBA，如 `rgba(255, 0, 0, 0.5)`
+* 色值关键字，如 `red`
+
+```css
+.classA {
+ /* 3-chars hex */
+ color: #0f0;
+ /* 6-chars hex */
+ color: #00ff00;
+ /* rgba */
+ color: rgb(255, 0, 0);
+ /* rgba */
+ color: rgba(255, 0, 0, 0.5);
+ /* transparent */
+ color: transparent;
+ /* Basic color keywords */
+ color: orange;
+ /* Extended color keywords */
+ color: darkgray;
+}
+```
::: warning 注意
-- 不支持 `hsl()`、`hsla()` 8个字符的十六进制颜色。
-- 不支持 `currentColor`单位。
-- `rgb(a,b,c)` 或 `rgba(a,b,c,d)` 的性能比其他颜色格式差很多，请选择合适的颜色格式。
+* 只有上面列出的颜色格式被支持，其他颜色格式均**不**被支持。
+* `6-chars hex` *16进制颜色值* 是性能最好的颜色使用方式。除非有特殊原因，请使用`6-chars hex`格式。
:::
### 颜色关键字列表
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
With regards,
Apache Git Services
