* [doc] Add document for behavior of border-radius clipping.

Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/18aa8f02
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/18aa8f02
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/18aa8f02

Branch: refs/heads/master
Commit: 18aa8f027fbaabdf486da41a560077b880b5dc49
Parents: 687f3b1
Author: YorkShen <[email protected]>
Authored: Thu Mar 2 11:48:49 2017 +0800
Committer: YorkShen <[email protected]>
Committed: Thu Mar 2 11:50:19 2017 +0800

----------------------------------------------------------------------
 doc/source/cn/references/common-style.md | 11 +++++++++--
 doc/source/references/common-style.md    | 15 ++++++++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/18aa8f02/doc/source/cn/references/common-style.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/references/common-style.md 
b/doc/source/cn/references/common-style.md
index 96f6d9d..033a45c 100644
--- a/doc/source/cn/references/common-style.md
+++ b/doc/source/cn/references/common-style.md
@@ -90,10 +90,17 @@ Weex 对于长度值目前只支持*像素
*值,不支持相对单位(`em`、
     - `border-top-right-radius {length}`:,非负值, 默认值 0
 
 
-注意:目前在 `<image>` 组件上尚无法只定义一个或几个角的 
`border-radius`。比如你无法在这两个组件上使用 
`border-top-left-radius`。该约束只对iOS生效,Android并不受此限制。
-
+### 注意:
 Weex 盒模型的 `box-sizing` 默认为 `border-box`,即盒子的宽高包
含内容、内边距和边框的宽度,不包含外边距的宽度。
 
+目前在 `<image>` 组件上尚无法只定义一个或几个角的 
`border-radius`。比如你无法在这两个组件上使用 
`border-top-left-radius`。该约束只对iOS生效,Android并不受此限制。
+
+尽管 `overflow:hidden` 
在android上是默认行为,但只有下列条件都满足时,一个父view才会去clip它的子view。这个限制只对Android生效,iOS不受影响。
+* 父view是`div`, `a`, `cell`, `refresh` 或 `loading`。
+* 系统版本是Android 4.3或更高。
+* 系统版本不是Andorid 7.0。
+* 父view没有`background-image`属性或系统版本是Android 
5.0或更高。
+
 ### 示例:
 
 ```html

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/18aa8f02/doc/source/references/common-style.md
----------------------------------------------------------------------
diff --git a/doc/source/references/common-style.md 
b/doc/source/references/common-style.md
index 14da29b..24fac44 100644
--- a/doc/source/references/common-style.md
+++ b/doc/source/references/common-style.md
@@ -46,18 +46,23 @@ you can use the definition below in weex box model.
     - `border-right-color`: `color` type, default value `#000000`
     - `border-bottom-color`: `color` type, default value `#000000`
   - `border-radius`: `length` type, default value `0`, (rounded borders to 
elements , default value is 0 meaning right angle )
-
-  Although the the default overflow style is `overflow:hidden` in android, a 
view will not be clipped by its parents' `border-radius`. This only happens on 
Android, it works fine on iOS.
     - `border-bottom-left-radius`: `length` type, non-negative, default value 
`0`
     - `border-bottom-right-radius`: `length` type, non-negative, default value 
`0`
     - `border-top-left-radius`: `length` type, non-negative, default value `0`
     - `border-top-right-radius`: `length` type, non-negative, default value `0`
 
-Notes: The rule of border-radius for a specific corner such as 
`border-top-left-radius` is not currently supported for component `<image>`in 
iOS. This only happens to iOS, it works fine on Android.
-
+### Notes
 Weex box model uses `border-box` as the default value of `box-sizing`, meaning 
the width and height properties includes content, padding and border, but not 
the margin.
 
-example:
+The rule of border-radius for a specific corner such as 
`border-top-left-radius` is not currently supported for component `<image>`in 
iOS. This only happens to iOS, it works fine on Android.
+
+Although `overflow:hidden` is default on android, a view **will not** clip its 
children according to `border-radius` unless all the following condtions met. 
This only happens on Android, it works fine on iOS.
+* The view type is `div`, `a`, `cell`, `refresh` or `loading`.
+* OS version is Android 4.3 or higher.
+* OS version is **not** Andorid 7.0
+* A view **does not** have `background-image` property nor OS version is 
Android 5.0 or higher.
+
+### Example
 
 ```html
 <template>

Reply via email to