提交 cef2ba8f 编写于 作者: D DCloud_LXH

feat(css): 示例

上级 526b5b67
因为 它太大了无法显示 source diff 。你可以改为 查看blob
......@@ -15,4 +15,6 @@
<!-- CSSJSON.align-content.compatibility -->
<!-- CSSJSON.align-content.example -->
<!-- CSSJSON.align-content.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.align-items.compatibility -->
<!-- CSSJSON.align-items.example -->
<!-- CSSJSON.align-items.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.align-self.compatibility -->
<!-- CSSJSON.align-self.example -->
<!-- CSSJSON.align-self.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.background-clip.compatibility -->
<!-- CSSJSON.background-clip.example -->
<!-- CSSJSON.background-clip.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.background-color.compatibility -->
<!-- CSSJSON.background-color.example -->
<!-- CSSJSON.background-color.reference -->
......@@ -13,6 +13,8 @@
<!-- CSSJSON.background-image.compatibility -->
<!-- CSSJSON.background-image.example -->
#### App平台
原生应用没有背景图,这是一种影响性能的设计。App平台也不支持背景图,仅支持linear-gradient设置一个背景渐变色。
linear-gradient仅支持三个参数,格式如下:
......
......@@ -13,4 +13,6 @@
<!-- CSSJSON.background.compatibility -->
<!-- CSSJSON.background.example -->
<!-- CSSJSON.background.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-bottom-color.compatibility -->
<!-- CSSJSON.border-bottom-color.example -->
<!-- CSSJSON.border-bottom-color.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-bottom-left-radius.compatibility -->
<!-- CSSJSON.border-bottom-left-radius.example -->
<!-- CSSJSON.border-bottom-left-radius.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-bottom-right-radius.compatibility -->
<!-- CSSJSON.border-bottom-right-radius.example -->
<!-- CSSJSON.border-bottom-right-radius.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-bottom-style.compatibility -->
<!-- CSSJSON.border-bottom-style.example -->
<!-- CSSJSON.border-bottom-style.reference -->
......@@ -20,4 +20,6 @@
<!-- CSSJSON.border-bottom-width.compatibility -->
<!-- CSSJSON.border-bottom-width.example -->
<!-- CSSJSON.border-bottom-width.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-bottom.compatibility -->
<!-- CSSJSON.border-bottom.example -->
<!-- CSSJSON.border-bottom.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-color.compatibility -->
<!-- CSSJSON.border-color.example -->
<!-- CSSJSON.border-color.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-left-color.compatibility -->
<!-- CSSJSON.border-left-color.example -->
<!-- CSSJSON.border-left-color.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-left-style.compatibility -->
<!-- CSSJSON.border-left-style.example -->
<!-- CSSJSON.border-left-style.reference -->
......@@ -20,4 +20,6 @@
<!-- CSSJSON.border-left-width.compatibility -->
<!-- CSSJSON.border-left-width.example -->
<!-- CSSJSON.border-left-width.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-left.compatibility -->
<!-- CSSJSON.border-left.example -->
<!-- CSSJSON.border-left.reference -->
......@@ -13,6 +13,8 @@
<!-- CSSJSON.border-radius.compatibility -->
<!-- CSSJSON.border-radius.example -->
App平台目前不支持设置百分比。如需要裁剪正圆图片,暂无法使用100%。请使用与图片宽高相同的像素来裁剪。比如图片长宽250px,则设置 border-radius: 250px 可得一个正圆。
<!-- CSSJSON.border-radius.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-right-color.compatibility -->
<!-- CSSJSON.border-right-color.example -->
<!-- CSSJSON.border-right-color.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-right-style.compatibility -->
<!-- CSSJSON.border-right-style.example -->
<!-- CSSJSON.border-right-style.reference -->
......@@ -20,4 +20,6 @@
<!-- CSSJSON.border-right-width.compatibility -->
<!-- CSSJSON.border-right-width.example -->
<!-- CSSJSON.border-right-width.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-right.compatibility -->
<!-- CSSJSON.border-right.example -->
<!-- CSSJSON.border-right.reference -->
......@@ -13,6 +13,8 @@
<!-- CSSJSON.border-style.compatibility -->
<!-- CSSJSON.border-style.example -->
<!-- CSSJSON.border-style.reference -->
## 注意事项
......
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-top-color.compatibility -->
<!-- CSSJSON.border-top-color.example -->
<!-- CSSJSON.border-top-color.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-top-left-radius.compatibility -->
<!-- CSSJSON.border-top-left-radius.example -->
<!-- CSSJSON.border-top-left-radius.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-top-right-radius.compatibility -->
<!-- CSSJSON.border-top-right-radius.example -->
<!-- CSSJSON.border-top-right-radius.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-top-style.compatibility -->
<!-- CSSJSON.border-top-style.example -->
<!-- CSSJSON.border-top-style.reference -->
......@@ -20,4 +20,6 @@
<!-- CSSJSON.border-top-width.compatibility -->
<!-- CSSJSON.border-top-width.example -->
<!-- CSSJSON.border-top-width.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border-top.compatibility -->
<!-- CSSJSON.border-top.example -->
<!-- CSSJSON.border-top.reference -->
......@@ -17,4 +17,6 @@
<!-- CSSJSON.border-width.compatibility -->
<!-- CSSJSON.border-width.example -->
<!-- CSSJSON.border-width.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.border.compatibility -->
<!-- CSSJSON.border.example -->
<!-- CSSJSON.border.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.bottom.compatibility -->
<!-- CSSJSON.bottom.example -->
<!-- CSSJSON.bottom.reference -->
......@@ -13,6 +13,8 @@
<!-- CSSJSON.box-shadow.compatibility -->
<!-- CSSJSON.box-shadow.example -->
#### App平台差异
- app-ios平台 box-shadow 和 overflow: hidden 不能同时设置,添加了阴影会导致 overflow:hidden 失效.
- app-ios平台 设置box-shadow的view背景无法透明,因为iOS系统 box-shadow 是在view的背景下绘制的,当view背景色为透明时,背景将显示box-shadow的颜色,因此为避免此差异建议给box-shadow的view设置非透明背景色
......
......@@ -13,4 +13,6 @@
<!-- CSSJSON.box-sizing.compatibility -->
<!-- CSSJSON.box-sizing.example -->
<!-- CSSJSON.box-sizing.reference -->
......@@ -13,6 +13,8 @@
<!-- CSSJSON.color.compatibility -->
<!-- CSSJSON.color.example -->
#### App平台
App端 color 样式不支持继承,
......
......@@ -16,4 +16,6 @@
<!-- CSSJSON.display.compatibility -->
<!-- CSSJSON.display.example -->
<!-- CSSJSON.display.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.flex-basis.compatibility -->
<!-- CSSJSON.flex-basis.example -->
<!-- CSSJSON.flex-basis.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.flex-direction.compatibility -->
<!-- CSSJSON.flex-direction.example -->
<!-- CSSJSON.flex-direction.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.flex-flow.compatibility -->
<!-- CSSJSON.flex-flow.example -->
<!-- CSSJSON.flex-flow.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.flex-grow.compatibility -->
<!-- CSSJSON.flex-grow.example -->
<!-- CSSJSON.flex-grow.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.flex-shrink.compatibility -->
<!-- CSSJSON.flex-shrink.example -->
<!-- CSSJSON.flex-shrink.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.flex-wrap.compatibility -->
<!-- CSSJSON.flex-wrap.example -->
<!-- CSSJSON.flex-wrap.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.flex.compatibility -->
<!-- CSSJSON.flex.example -->
<!-- CSSJSON.flex.reference -->
......@@ -13,6 +13,8 @@
<!-- CSSJSON.font-family.compatibility -->
<!-- CSSJSON.font-family.example -->
### 字体设置
对于系统中已经存在的字体,font-family里直接写字体名称即可。\
......
......@@ -13,6 +13,8 @@
<!-- CSSJSON.font-size.compatibility -->
<!-- CSSJSON.font-size.example -->
#### App平台差异
App平台仅支持以像素值(px)和相对像素值(rpx)设置字体大小,默认值为16px。属性值可以不设置单位,不设置单位时当做 px 处理。
font-size 样式不支持继承,仅对[text](../component/text.md)组件生效。
......
......@@ -13,6 +13,8 @@
<!-- CSSJSON.font-style.compatibility -->
<!-- CSSJSON.font-style.example -->
#### App平台差异
font-style 样式不支持继承
......
......@@ -13,6 +13,8 @@
<!-- CSSJSON.font-weight.compatibility -->
<!-- CSSJSON.font-weight.example -->
#### App平台差异
font-weight 样式不支持继承
......
......@@ -16,4 +16,6 @@
<!-- CSSJSON.height.compatibility -->
<!-- CSSJSON.height.example -->
<!-- CSSJSON.height.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.justify-content.compatibility -->
<!-- CSSJSON.justify-content.example -->
<!-- CSSJSON.justify-content.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.left.compatibility -->
<!-- CSSJSON.left.example -->
<!-- CSSJSON.left.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.letter-spacing.compatibility -->
<!-- CSSJSON.letter-spacing.example -->
<!-- CSSJSON.letter-spacing.reference -->
......@@ -13,6 +13,8 @@
<!-- CSSJSON.line-height.compatibility -->
<!-- CSSJSON.line-height.example -->
#### App平台
App平台仅支持以像素值(px)、相对像素值(rpx)和相对当前元素字体字体单位(em),em单位表示数字值乘以该元素的字体大小,无单位值时使用em,默认值为1.2em。
line-height 样式不支持继承,仅对 [text](../component/text.md) 组件生效。
......
......@@ -13,4 +13,6 @@
<!-- CSSJSON.lines.compatibility -->
<!-- CSSJSON.lines.example -->
<!-- CSSJSON.lines.reference -->
......@@ -18,4 +18,6 @@ app端不支持外边距重叠(上下外边距折叠合并为单个边距)
<!-- CSSJSON.margin-bottom.compatibility -->
<!-- CSSJSON.margin-bottom.example -->
<!-- CSSJSON.margin-bottom.reference -->
......@@ -17,4 +17,6 @@ app端不支持外边距折叠
<!-- CSSJSON.margin-left.compatibility -->
<!-- CSSJSON.margin-left.example -->
<!-- CSSJSON.margin-left.reference -->
......@@ -17,4 +17,6 @@ app端不支持外边距折叠
<!-- CSSJSON.margin-right.compatibility -->
<!-- CSSJSON.margin-right.example -->
<!-- CSSJSON.margin-right.reference -->
......@@ -18,4 +18,6 @@ app端不支持外边距重叠(上下外边距折叠合并为单个边距)
<!-- CSSJSON.margin-top.compatibility -->
<!-- CSSJSON.margin-top.example -->
<!-- CSSJSON.margin-top.reference -->
......@@ -18,4 +18,6 @@ app端不支持外边距重叠(上下外边距折叠合并为单个边距)
<!-- CSSJSON.margin.compatibility -->
<!-- CSSJSON.margin.example -->
<!-- CSSJSON.margin.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.max-height.compatibility -->
<!-- CSSJSON.max-height.example -->
<!-- CSSJSON.max-height.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.max-width.compatibility -->
<!-- CSSJSON.max-width.example -->
<!-- CSSJSON.max-width.reference -->
......@@ -13,6 +13,8 @@
<!-- CSSJSON.min-height.compatibility -->
<!-- CSSJSON.min-height.example -->
#### App平台
在App端为了优化文字排版性能,不支持 auto、none、max-content、min-content、fit-content,默认值为0px。
......
......@@ -13,4 +13,6 @@
<!-- CSSJSON.min-width.compatibility -->
<!-- CSSJSON.min-width.example -->
<!-- CSSJSON.min-width.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.opacity.compatibility -->
<!-- CSSJSON.opacity.example -->
<!-- CSSJSON.opacity.reference -->
......@@ -13,6 +13,8 @@
<!-- CSSJSON.overflow.compatibility -->
<!-- CSSJSON.overflow.example -->
<!-- CSSJSON.overflow.reference -->
### Bug & Tips
......
......@@ -13,4 +13,6 @@
<!-- CSSJSON.padding-bottom.compatibility -->
<!-- CSSJSON.padding-bottom.example -->
<!-- CSSJSON.padding-bottom.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.padding-left.compatibility -->
<!-- CSSJSON.padding-left.example -->
<!-- CSSJSON.padding-left.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.padding-right.compatibility -->
<!-- CSSJSON.padding-right.example -->
<!-- CSSJSON.padding-right.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.padding-top.compatibility -->
<!-- CSSJSON.padding-top.example -->
<!-- CSSJSON.padding-top.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.padding.compatibility -->
<!-- CSSJSON.padding.example -->
<!-- CSSJSON.padding.reference -->
......@@ -13,6 +13,8 @@
<!-- CSSJSON.pointer-events.compatibility -->
<!-- CSSJSON.pointer-events.example -->
#### App平台
如果当前元素设置 pointer-events 为 none ,当前元素不会响应事件和默认行为,如果此元素包含子元素,所有子元素也将不会响应事件和默认行为,即使子元素显式设置 pointer-events 为 auto。
......
......@@ -13,6 +13,8 @@
<!-- CSSJSON.position.compatibility -->
<!-- CSSJSON.position.example -->
#### App平台差异
......
......@@ -13,4 +13,6 @@
<!-- CSSJSON.right.compatibility -->
<!-- CSSJSON.right.example -->
<!-- CSSJSON.right.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.text-align.compatibility -->
<!-- CSSJSON.text-align.example -->
<!-- CSSJSON.text-align.reference -->
......@@ -13,6 +13,8 @@
<!-- CSSJSON.text-decoration-color.compatibility -->
<!-- CSSJSON.text-decoration-color.example -->
#### App平台差异
+ text-decoration-color 样式不支持继承
+ App平台默认颜色为黑色,暂不支持设置
......
......@@ -13,6 +13,8 @@
<!-- CSSJSON.text-decoration-line.compatibility -->
<!-- CSSJSON.text-decoration-line.example -->
#### App平台差异
+ text-decoration-line 样式不支持继承
+ App平台仅支持underline和line-through属性
......
......@@ -13,6 +13,8 @@
<!-- CSSJSON.text-decoration-style.compatibility -->
<!-- CSSJSON.text-decoration-style.example -->
#### App平台差异
text-decoration-style 样式不支持继承
......
......@@ -13,6 +13,8 @@
<!-- CSSJSON.text-decoration-thickness.compatibility -->
<!-- CSSJSON.text-decoration-thickness.example -->
#### App平台差异
text-decoration-thickness 样式不支持继承
......
......@@ -13,6 +13,8 @@
<!-- CSSJSON.text-decoration.compatibility -->
<!-- CSSJSON.text-decoration.example -->
#### App平台差异
text-decoration 样式不支持继承
......
......@@ -13,6 +13,8 @@
<!-- CSSJSON.text-overflow.compatibility -->
<!-- CSSJSON.text-overflow.example -->
#### App平台差异
text-overflow 样式不支持继承
......
......@@ -13,4 +13,6 @@
<!-- CSSJSON.top.compatibility -->
<!-- CSSJSON.top.example -->
<!-- CSSJSON.top.reference -->
......@@ -13,4 +13,6 @@
<!-- CSSJSON.transform-origin.compatibility -->
<!-- CSSJSON.transform-origin.example -->
<!-- CSSJSON.transform-origin.reference -->
......@@ -21,4 +21,6 @@ web中经常使用scaleY缩放一个1px的线条变成0.5px的细线。这个方
<!-- CSSJSON.transform.compatibility -->
<!-- CSSJSON.transform.example -->
<!-- CSSJSON.transform.reference -->
......@@ -20,4 +20,6 @@
<!-- CSSJSON.transition-delay.compatibility -->
<!-- CSSJSON.transition-delay.example -->
<!-- CSSJSON.transition-delay.reference -->
......@@ -13,6 +13,8 @@
<!-- CSSJSON.transition-duration.compatibility -->
<!-- CSSJSON.transition-duration.example -->
#### App平台
- 不支持指定多个时长
- HBuilderX4.0以下版本,属性值可以不设置单位,不设置单位时当做 ms(毫秒) 处理。从 HBuilderX4.0 起,统一为web的策略,必须设置单位,无单位当做非法值。也就是会造成动画不生效。
......
......@@ -16,4 +16,6 @@
<!-- CSSJSON.transition-property.compatibility -->
<!-- CSSJSON.transition-property.example -->
<!-- CSSJSON.transition-property.reference -->
......@@ -16,4 +16,6 @@ App平台不支持指定多个过渡效果。
<!-- CSSJSON.transition-timing-function.compatibility -->
<!-- CSSJSON.transition-timing-function.example -->
<!-- CSSJSON.transition-timing-function.reference -->
......@@ -18,4 +18,6 @@ transition暂不支持结束属性值为百分比。
<!-- CSSJSON.transition.compatibility -->
<!-- CSSJSON.transition.example -->
<!-- CSSJSON.transition.reference -->
......@@ -16,6 +16,8 @@
<!-- CSSJSON.visibility.compatibility -->
<!-- CSSJSON.visibility.example -->
#### App平台差异
App平台设置如果元素的 visibility 设置为 hidden,其子元素将不可见,即使子元素的 visibility 设置为 visible 也不可见。
......
......@@ -13,4 +13,6 @@
<!-- CSSJSON.white-space.compatibility -->
<!-- CSSJSON.white-space.example -->
<!-- CSSJSON.white-space.reference -->
......@@ -16,4 +16,6 @@
<!-- CSSJSON.width.compatibility -->
<!-- CSSJSON.width.example -->
<!-- CSSJSON.width.reference -->
......@@ -36,6 +36,8 @@ root
<!-- CSSJSON.z-index.compatibility -->
<!-- CSSJSON.z-index.example -->
### 平台差异
1. app端z-index默认值为0,web端默认值为auto。position的默认值都是relative。
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册