feat: 增加css border示例

pages.json

@@ -658,8 +658,16 @@
       "style": {
         "navigationBarTitleText": "电量"
       }
-    }
-  ],
+    },
+    {
+		"path" : "pages/CSS/border/complex-border/complex-border",
+        "style" :                                                                                    
+        {
+          "navigationBarTitleText": "border属性组合示例",
+          "enablePullDownRefresh": false
+        }
+      }
+    ],
   "globalStyle": {
     "pageOrientation": "portrait",
     "navigationBarTitleText": "Hello uniapp x",

pages/CSS/border/complex-border/complex-border.uvue

+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>圆角 : 各边之间 不同width && 不同颜色 && 不同圆角</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="border-circle"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>直角 : 各边之间 不同width && 不同颜色 </text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="border-rect"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+
+	.border-circle {
+		width: 250rpx;
+		height: 250rpx;
+		background-color: #00dd00;
+		border-width: 20rpx;
+		border-color: #000000;
+		border-bottom-width: 40rpx;
+		border-bottom-color: #ff0000;
+		border-bottom-right-radius: 50rpx;
+		border-bottom-left-radius: 30rpx;
+		border-radius: 10rpx;
+		border-right-color: #FFDC02;
+	}
+
+	.border-rect {
+		width: 250rpx;
+		height: 250rpx;
+		background-color: #00dd00;
+		border-width: 20rpx;
+		border-color: #000000;
+		border-bottom-width: 40rpx;
+		border-bottom-color: #ff0000;
+		border-right-color: #FFDC02;
+	}
+</style>
\ No newline at end of file

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

@@ -87,6 +87,56 @@
 				<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="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="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="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="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="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="common" style="border-radius: 125rpx;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view>
+			</view>
+		</view>
+		
 	</view>
 </template>
 

pages/tabBar/CSS.uvue

@@ -77,6 +77,10 @@
 						{
 							name: 'border-radius',
 							url: '/pages/CSS/border/border-radius'
+						},
+						{
+							name: 'border属性复合示例',
+							url: '/pages/CSS/border/complex-border/complex-border'
 						}
 					] as Page[]
 				}, {