Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
程序yang
unidocs-zh
提交
69bbe594
U
unidocs-zh
项目概览
程序yang
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
69bbe594
编写于
3月 25, 2022
作者:
S
shutao
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update nvue-css.md
上级
9b0aee73
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
33 addition
and
4 deletion
+33
-4
docs/nvue-css.md
docs/nvue-css.md
+33
-4
未找到文件。
docs/nvue-css.md
浏览文件 @
69bbe594
...
...
@@ -638,7 +638,7 @@ flex {number}:值为 number 类型。
## 阴影@boxshadow
###
IOS平台:
阴影```box-shadow```@ios-box-shadow
### 阴影```box-shadow```@ios-box-shadow
{box-shadow:inset offset-x offset-y blur-radius color}
...
...
@@ -661,16 +661,44 @@ flex {number}:值为 number 类型。
```
**注意**
- 目前仅 iOS 支持 ```box-shadow``` 属性,Android 暂不支持,可以使用```elevation```或者图片代替。
- 每个元素只支持设置一个阴影效果,不支持多个阴影同时作用于一个元素。
- Android平台 设置```box-shadow```的组件需要让出阴影渲染位置,否则会出现阴影显示不全的问题。
### Android平台:阴影@android-box-shadow
#### 阴影```box-shadow```
从HBuilderX3.4.3起,重新支持阴影样式(box-shadow)。修复老版本组件设置```box-shadow```后在不同系统版本出现的显示异常及闪烁问题! 但需要注意设置阴影样式(box-shadow) 的组件需要让出阴影渲染位置,否则会出现阴影显示不全的问题。
### Android平台:阴影```elevation```@android-box-shadow
示例
```
JavaScript
<template>
<view
class=
"wrapper"
>
<view>
<view
class=
"box"
>
<text
class=
"title"
style=
"text-align: center"
>
Hello World
</text>
</view>
</view>
</view>
</template>
<style>
.box {
width: 300px;
height: 100px;
background-color: #FFE4C4;
border-radius: 10px;
box-shadow: 3px 5px 2px rgb(255, 69, 0);
margin: 10px;//让出阴影位置
}
</style>
```
#### 阴影```elevation```
Android平台weex对阴影样式(box-shadow)支持不完善,如设置圆角边框时阴影样式显示不正常、设置动画时在Android7上显示不正常、在Android10上出现闪烁现象等
。
目前Android平台对阴影样式(box-shadow)支持的还不太完善,有设置圆角边框时阴影样式显示不正常、占用组件视图渲染区域等问题
。
为解决这些问题,从HBuilderX 2.4.7起,新增elevation属性(**组件的属性,不是css样式**)设置组件的层级,Number类型,层级值越大阴影越明显,阴影效果也与组件位置有关,越靠近页面底部阴影效果越明显
...
...
@@ -688,6 +716,7 @@ Android平台weex对阴影样式(box-shadow)支持不完善,如设置圆角边
- 为了避免```elevation```属性的阴影效果与阴影样式(```box-shadow```)冲突,设置```elevation```属性后```box-shadow```样式失效
- 使用```elevation```需要阴影元素的父元素大于阴影范围,否则会对阴影进行裁剪
- IOS不支持```elevation```属性,请使用```box-shadow```设置阴影
- 设置```box-shadow```需要当前组件让出阴影位置。否则无法正常看到阴影
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录