You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by cx...@apache.org on 2017/03/16 08:59:31 UTC
[36/50] incubator-weex git commit: * [doc] Add document for behavior
of border-radius clipping.
* [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 <sh...@gmail.com>
Authored: Thu Mar 2 11:48:49 2017 +0800
Committer: YorkShen <sh...@gmail.com>
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 \u5bf9\u4e8e\u957f\u5ea6\u503c\u76ee\u524d\u53ea\u652f\u6301*\u50cf\u7d20*\u503c\uff0c\u4e0d\u652f\u6301\u76f8\u5bf9\u5355\u4f4d\uff08`em`\u3001
- `border-top-right-radius {length}`\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0
-\u6ce8\u610f\uff1a\u76ee\u524d\u5728 `<image>` \u7ec4\u4ef6\u4e0a\u5c1a\u65e0\u6cd5\u53ea\u5b9a\u4e49\u4e00\u4e2a\u6216\u51e0\u4e2a\u89d2\u7684 `border-radius`\u3002\u6bd4\u5982\u4f60\u65e0\u6cd5\u5728\u8fd9\u4e24\u4e2a\u7ec4\u4ef6\u4e0a\u4f7f\u7528 `border-top-left-radius`\u3002\u8be5\u7ea6\u675f\u53ea\u5bf9iOS\u751f\u6548\uff0cAndroid\u5e76\u4e0d\u53d7\u6b64\u9650\u5236\u3002
-
+### \u6ce8\u610f\uff1a
Weex \u76d2\u6a21\u578b\u7684 `box-sizing` \u9ed8\u8ba4\u4e3a `border-box`\uff0c\u5373\u76d2\u5b50\u7684\u5bbd\u9ad8\u5305\u542b\u5185\u5bb9\u3001\u5185\u8fb9\u8ddd\u548c\u8fb9\u6846\u7684\u5bbd\u5ea6\uff0c\u4e0d\u5305\u542b\u5916\u8fb9\u8ddd\u7684\u5bbd\u5ea6\u3002
+\u76ee\u524d\u5728 `<image>` \u7ec4\u4ef6\u4e0a\u5c1a\u65e0\u6cd5\u53ea\u5b9a\u4e49\u4e00\u4e2a\u6216\u51e0\u4e2a\u89d2\u7684 `border-radius`\u3002\u6bd4\u5982\u4f60\u65e0\u6cd5\u5728\u8fd9\u4e24\u4e2a\u7ec4\u4ef6\u4e0a\u4f7f\u7528 `border-top-left-radius`\u3002\u8be5\u7ea6\u675f\u53ea\u5bf9iOS\u751f\u6548\uff0cAndroid\u5e76\u4e0d\u53d7\u6b64\u9650\u5236\u3002
+
+\u5c3d\u7ba1 `overflow:hidden` \u5728android\u4e0a\u662f\u9ed8\u8ba4\u884c\u4e3a\uff0c\u4f46\u53ea\u6709\u4e0b\u5217\u6761\u4ef6\u90fd\u6ee1\u8db3\u65f6\uff0c\u4e00\u4e2a\u7236view\u624d\u4f1a\u53bbclip\u5b83\u7684\u5b50view\u3002\u8fd9\u4e2a\u9650\u5236\u53ea\u5bf9Android\u751f\u6548\uff0ciOS\u4e0d\u53d7\u5f71\u54cd\u3002
+* \u7236view\u662f`div`, `a`, `cell`, `refresh` \u6216 `loading`\u3002
+* \u7cfb\u7edf\u7248\u672c\u662fAndroid 4.3\u6216\u66f4\u9ad8\u3002
+* \u7cfb\u7edf\u7248\u672c\u4e0d\u662fAndorid 7.0\u3002
+* \u7236view\u6ca1\u6709`background-image`\u5c5e\u6027\u6216\u7cfb\u7edf\u7248\u672c\u662fAndroid 5.0\u6216\u66f4\u9ad8\u3002
+
### \u793a\u4f8b\uff1a
```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>