Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5998
Star 91
Fork 163
H
hello uni-app x
提交 233b813f 编写于 作者: DCloud_iOS_XHY's avatar DCloud_iOS_XHY
浏览文件
操作

box-shadow 添加动态设置 none 及 非法值测试例

上级 a770285b
隐藏空白更改
内联 并排
Showing with 188 addition and 179 deletion
pages/CSS/box-shadow/box-shadow.uvue
浏览文件 @ 233b813f
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1"> <scroll-view style="flex: 1">
<!-- #endif --> <!-- #endif -->
<view style="flex-grow: 1"> <view style="flex-grow: 1">
<view> <view>
<text>box-shadow: 5px 5px black</text> <text>box-shadow: 5px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view class="common" style="box-shadow: 5px 5px black"></view> <view class="common" style="box-shadow: 5px 5px black"></view>
</view> </view>
</view> </view>
<view> <view>
<text>box-shadow: 5px 5px 5px black</text> <text>box-shadow: 5px 5px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view class="common" style="box-shadow: 5px 5px 5px black"></view> <view class="common" style="box-shadow: 5px 5px 5px black"></view>
</view> </view>
</view> </view>
<view> <view>
<text>box-shadow: 5px 10px 5px black</text> <text>box-shadow: 5px 10px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view class="common" style="box-shadow: 5px 10px 5px black"></view> <view class="common" style="box-shadow: 5px 10px 5px black"></view>
</view> </view>
</view> </view>
<view> <view>
<text>box-shadow: 5px 5px 5px 5px black</text> <text>box-shadow: 5px 5px 5px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view class="common" style="box-shadow: 5px 5px 5px 5px black"></view> <view class="common" style="box-shadow: 5px 5px 5px 5px black"></view>
</view> </view>
</view> </view>
<view> <view>
<text>box-shadow: -5px -5px 5px black</text> <text>box-shadow: -5px -5px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view class="common" style="box-shadow: -5px -5px 5px black"></view> <view class="common" style="box-shadow: -5px -5px 5px black"></view>
</view> </view>
</view> </view>
<view> <view>
<text>box-shadow: inset 5px 5px black</text> <text>box-shadow: inset 5px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view class="common" style="box-shadow: inset 5px 5px black"></view> <view class="common" style="box-shadow: inset 5px 5px black"></view>
</view> </view>
</view> </view>
<view> <view>
<text>box-shadow: inset 5px 5px 5px black</text> <text>box-shadow: inset 5px 5px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view <view class="common" style="box-shadow: inset 5px 5px 5px black"></view>
class="common" </view>
style="box-shadow: inset 5px 5px 5px black" </view>
></view>
</view> <view>
</view> <text>box-shadow: inset 5px 10px 5px black</text>
<view class="backgroundview">
<view> <view class="common" style="box-shadow: inset 5px 10px 5px black"></view>
<text>box-shadow: inset 5px 10px 5px black</text> </view>
<view class="backgroundview"> </view>
<view
class="common" <view>
style="box-shadow: inset 5px 10px 5px black" <text>box-shadow: inset 5px 5px 5px 5px black</text>
></view> <view class="backgroundview">
</view> <view class="common" style="box-shadow: inset 5px 5px 5px 5px black"></view>
</view> </view>
</view>
<view>
<text>box-shadow: inset 5px 5px 5px 5px black</text> <view>
<view class="backgroundview"> <text>box-shadow: inset -5px -5px 5px black</text>
<view <view class="backgroundview">
class="common" <view class="common" style="box-shadow: inset -5px -5px 5px black"></view>
style="box-shadow: inset 5px 5px 5px 5px black" </view>
></view> </view>
</view>
</view> <view>
<text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view> <view class="backgroundview">
<text>box-shadow: inset -5px -5px 5px black</text> <view class="common" style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)"></view>
<view class="backgroundview"> </view>
<view </view>
class="common"
style="box-shadow: inset -5px -5px 5px black" <view>
></view> <text>circle: box-shadow: 5px 5px black</text>
</view> <view class="backgroundview">
</view> <view class="common" style="border-radius: 62px; box-shadow: 5px 5px black"></view>
</view>
<view> </view>
<text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view class="backgroundview"> <view>
<view <text>circle: box-shadow: 5px 5px 5px black</text>
class="common" <view class="backgroundview">
style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)" <view class="common" style="border-radius: 62px; box-shadow: 5px 5px 5px black"></view>
></view> </view>
</view> </view>
</view>
<view>
<view> <text>circle: box-shadow: 5px 10px 5px black</text>
<text>circle: box-shadow: 5px 5px black</text> <view class="backgroundview">
<view class="backgroundview"> <view class="common" style="border-radius: 62px; box-shadow: 5px 10px 5px black"></view>
<view </view>
class="common" </view>
style="border-radius: 62px; box-shadow: 5px 5px black"
></view> <view>
</view> <text>circle: box-shadow: 5px 5px 5px 5px black</text>
</view> <view class="backgroundview">
<view class="common" style="border-radius: 62px; box-shadow: 5px 5px 5px 5px black"></view>
<view> </view>
<text>circle: box-shadow: 5px 5px 5px black</text> </view>
<view class="backgroundview">
<view <view>
class="common" <text>circle: box-shadow: -5px -5px 5px black</text>
style="border-radius: 62px; box-shadow: 5px 5px 5px black" <view class="backgroundview">
></view> <view class="common" style="border-radius: 62px; box-shadow: -5px -5px 5px black"></view>
</view> </view>
</view> </view>
<view> <view>
<text>circle: box-shadow: 5px 10px 5px black</text> <text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view class="backgroundview"> <view class="backgroundview">
<view <view class="common" style="
class="common" border-radius: 62px;
style="border-radius: 62px; box-shadow: 5px 10px 5px black" box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
></view> "></view>
</view> </view>
</view> </view>
<view> <view>
<text>circle: box-shadow: 5px 5px 5px 5px black</text> <text>点击动态切换 box-shadow: none</text>
<view class="backgroundview"> <view class="backgroundview" @click="changed">
<view <view :class="['common', disabled ? 'disabledShadow' : 'shadow']"></view>
class="common" </view>
style="border-radius: 62px; box-shadow: 5px 5px 5px 5px black" </view>
></view>
</view> <view>
</view> <text>点击动态切换 box-shadow: 非法值</text>
<view class="backgroundview" @click="changed">
<view> <view :class="['common', disabled ? 'invalidShadow' : 'shadow']"></view>
<text>circle: box-shadow: -5px -5px 5px black</text> </view>
<view class="backgroundview"> </view>
<view
class="common" </view>
style="border-radius: 62px; box-shadow: -5px -5px 5px black" <!-- #ifdef APP -->
></view> </scroll-view>
</view> <!-- #endif -->
</view> </template>
<view> <script>
<text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text> export default {
<view class="backgroundview"> data() {
<view return {
class="common" disabled: false
style=" }
border-radius: 62px; },
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); methods: {
" changed() {
></view> this.disabled = !this.disabled
</view> }
</view> },
</view> }
<!-- #ifdef APP --> </script>
</scroll-view>
<!-- #endif --> <style>
</template> .common {
width: 125px;
<style> height: 125px;
.common { background-color: brown;
width: 125px; }
height: 125px;
background-color: brown; .backgroundview {
} width: 250px;
height: 250px;
.backgroundview { background-color: white;
width: 250px; justify-content: center;
height: 250px; align-items: center;
background-color: white; }
justify-content: center;
align-items: center; .shadow {
} box-shadow: 5px 5px black;
}
.disabledShadow {
box-shadow: none;
}
.invalidShadow {
box-shadow: abcd;
}
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或