调整视觉不悦的颜色

pages/CSS/box-shadow/box-shadow.uvue

@@ -2,141 +2,124 @@
 	<view style="flex-grow: 1;">
 		<view>
 			<text>box-shadow: 5px 5px black</text>
-			<view
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<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
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<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
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<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
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<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
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<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
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<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
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<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
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<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
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<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
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<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
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<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
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<view class="backgroundview">
 				<view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px black"></view>
 			</view>
 		</view>
-		
-		
+
+
 		<view>
 			<text>circle: box-shadow: 5px 5px 5px black</text>
-			<view
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<view class="backgroundview">
 				<view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px 5px black;"></view>
 			</view>
 		</view>
-		
+
 		<view>
 			<text>circle: box-shadow: 5px 10px 5px black</text>
-			<view
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<view class="backgroundview">
 				<view class="common" style="border-radius: 125rpx;box-shadow: 5px 10px 5px black;"></view>
 			</view>
 		</view>
-		
+
 		<view>
 			<text>circle: box-shadow: 5px 5px 5px 5px black</text>
-			<view
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<view class="backgroundview">
 				<view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px 5px 5px black;"></view>
 			</view>
 		</view>
-		
+
 		<view>
 			<text>circle: box-shadow: -5px -5px 5px black</text>
-			<view
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<view class="backgroundview">
 				<view class="common" style="border-radius: 125rpx;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
-				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<view class="backgroundview">
 				<view class="common" style="border-radius: 125rpx;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view>
 			</view>
 		</view>
-		
+
 	</view>
 </template>
 
@@ -148,6 +131,14 @@
 	.common {
 		width: 250rpx;
 		height: 250rpx;
-		background-color: red;
+		background-color: brown;
+	}
+
+	.backgroundview {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: white;
+		justify-content: center;
+		align-items: center;
 	}
 </style>
\ No newline at end of file