* [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>
