Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
233b813f
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
5992
Star
90
Fork
162
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
233b813f
编写于
4月 15, 2024
作者:
DCloud_iOS_XHY
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
box-shadow 添加动态设置 none 及 非法值测试例
上级
a770285b
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
188 addition
and
179 deletion
+188
-179
pages/CSS/box-shadow/box-shadow.uvue
pages/CSS/box-shadow/box-shadow.uvue
+188
-179
未找到文件。
pages/CSS/box-shadow/box-shadow.uvue
浏览文件 @
233b813f
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1">
<view>
<text>box-shadow: 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: 5px 10px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 10px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: 5px 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 5px 5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: -5px -5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: -5px -5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: inset 5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 5px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="box-shadow: inset 5px 5px 5px black"
></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 10px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="box-shadow: inset 5px 10px 5px black"
></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 5px 5px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="box-shadow: inset 5px 5px 5px 5px black"
></view>
</view>
</view>
<view>
<text>box-shadow: inset -5px -5px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="box-shadow: inset -5px -5px 5px black"
></view>
</view>
</view>
<view>
<text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view class="backgroundview">
<view
class="common"
style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)"
></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="border-radius: 62px; box-shadow: 5px 5px black"
></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 5px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="border-radius: 62px; box-shadow: 5px 5px 5px black"
></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 10px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="border-radius: 62px; box-shadow: 5px 10px 5px black"
></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 5px 5px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="border-radius: 62px; box-shadow: 5px 5px 5px 5px black"
></view>
</view>
</view>
<view>
<text>circle: box-shadow: -5px -5px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="border-radius: 62px; box-shadow: -5px -5px 5px black"
></view>
</view>
</view>
<view>
<text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view class="backgroundview">
<view
class="common"
style="
border-radius: 62px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
"
></view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<style>
.common {
width: 125px;
height: 125px;
background-color: brown;
}
.backgroundview {
width: 250px;
height: 250px;
background-color: white;
justify-content: center;
align-items: center;
}
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1">
<view>
<text>box-shadow: 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: 5px 10px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 10px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: 5px 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 5px 5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: -5px -5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: -5px -5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: inset 5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: inset 5px 5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 10px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: inset 5px 10px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: inset 5px 5px 5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: inset -5px -5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: inset -5px -5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)"></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="border-radius: 62px; box-shadow: 5px 5px black"></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="border-radius: 62px; box-shadow: 5px 5px 5px black"></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 10px 5px black</text>
<view class="backgroundview">
<view class="common" style="border-radius: 62px; box-shadow: 5px 10px 5px black"></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="border-radius: 62px; box-shadow: 5px 5px 5px 5px black"></view>
</view>
</view>
<view>
<text>circle: box-shadow: -5px -5px 5px black</text>
<view class="backgroundview">
<view class="common" style="border-radius: 62px; box-shadow: -5px -5px 5px black"></view>
</view>
</view>
<view>
<text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view class="backgroundview">
<view class="common" style="
border-radius: 62px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
"></view>
</view>
</view>
<view>
<text>点击动态切换 box-shadow: none</text>
<view class="backgroundview" @click="changed">
<view :class="['common', disabled ? 'disabledShadow' : 'shadow']"></view>
</view>
</view>
<view>
<text>点击动态切换 box-shadow: 非法值</text>
<view class="backgroundview" @click="changed">
<view :class="['common', disabled ? 'invalidShadow' : 'shadow']"></view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
disabled: false
}
},
methods: {
changed() {
this.disabled = !this.disabled
}
},
}
</script>
<style>
.common {
width: 125px;
height: 125px;
background-color: brown;
}
.backgroundview {
width: 250px;
height: 250px;
background-color: white;
justify-content: center;
align-items: center;
}
.shadow {
box-shadow: 5px 5px black;
}
.disabledShadow {
box-shadow: none;
}
.invalidShadow {
box-shadow: abcd;
}
</style>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑！
取消
想要评论请
注册
或
登录
