Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 a89c0a18 编写于 作者: W wanganxp
浏览文件
操作

调整视觉不悦的颜色

上级 6c24d2b5
显示空白变更内容
内联 并排
Showing with 34 addition and 43 deletion
pages/CSS/box-shadow/box-shadow.uvue
浏览文件 @ a89c0a18
...@@ -2,96 +2,84 @@ ...@@ -2,96 +2,84 @@
<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 <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<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 <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<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 <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<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 <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<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 <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<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 <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<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 <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: inset 5px 5px 5px black;"></view> <view class="common" style="box-shadow: inset 5px 5px 5px black;"></view>
</view> </view>
</view> </view>
<view> <view>
<text>box-shadow: inset 5px 10px 5px black</text> <text>box-shadow: inset 5px 10px 5px black</text>
<view <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: inset 5px 10px 5px black;"></view> <view class="common" style="box-shadow: inset 5px 10px 5px black;"></view>
</view> </view>
</view> </view>
<view> <view>
<text>box-shadow: inset 5px 5px 5px 5px black</text> <text>box-shadow: inset 5px 5px 5px 5px black</text>
<view <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: inset 5px 5px 5px 5px black;"></view> <view class="common" style="box-shadow: inset 5px 5px 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 <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: inset -5px -5px 5px black;"></view> <view class="common" style="box-shadow: inset -5px -5px 5px black;"></view>
</view> </view>
</view> </view>
<view> <view>
<text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text> <text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view> <view class="common" style="box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view>
</view> </view>
</view> </view>
<view> <view>
<text>circle: box-shadow: 5px 5px black</text> <text>circle: box-shadow: 5px 5px black</text>
<view <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px black"></view> <view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px black"></view>
</view> </view>
</view> </view>
...@@ -99,40 +87,35 @@ ...@@ -99,40 +87,35 @@
<view> <view>
<text>circle: box-shadow: 5px 5px 5px black</text> <text>circle: box-shadow: 5px 5px 5px black</text>
<view <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px 5px black;"></view> <view class="common" style="border-radius: 125rpx;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: 5px 10px 5px black</text>
<view <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="border-radius: 125rpx;box-shadow: 5px 10px 5px black;"></view> <view class="common" style="border-radius: 125rpx;box-shadow: 5px 10px 5px black;"></view>
</view> </view>
</view> </view>
<view> <view>
<text>circle: box-shadow: 5px 5px 5px 5px black</text> <text>circle: box-shadow: 5px 5px 5px 5px black</text>
<view <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px 5px 5px black;"></view> <view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px 5px 5px black;"></view>
</view> </view>
</view> </view>
<view> <view>
<text>circle: box-shadow: -5px -5px 5px black</text> <text>circle: box-shadow: -5px -5px 5px black</text>
<view <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="border-radius: 125rpx;box-shadow: -5px -5px 5px black;"></view> <view class="common" style="border-radius: 125rpx;box-shadow: -5px -5px 5px black;"></view>
</view> </view>
</view> </view>
<view> <view>
<text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text> <text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view <view class="backgroundview">
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="border-radius: 125rpx;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view> <view class="common" style="border-radius: 125rpx;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view>
</view> </view>
</view> </view>
...@@ -148,6 +131,14 @@ ...@@ -148,6 +131,14 @@
.common { .common {
width: 250rpx; width: 250rpx;
height: 250rpx; height: 250rpx;
background-color: red; background-color: brown;
}
.backgroundview {
width: 500rpx;
height: 500rpx;
background-color: white;
justify-content: center;
align-items: center;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或