diff --git a/pages.json b/pages.json
index 63d508c6c0c7dcc9796909ef8842a3f784c79dad..c202c6c277c3369d7a5286df9e31b0d16464f108 100644
--- a/pages.json
+++ b/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",
diff --git a/pages/CSS/border/complex-border/complex-border.uvue b/pages/CSS/border/complex-border/complex-border.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..107111efb7bf3659f7e553d1555618879ea1018e
--- /dev/null
+++ b/pages/CSS/border/complex-border/complex-border.uvue
@@ -0,0 +1,56 @@
+<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
diff --git a/pages/CSS/box-shadow/box-shadow.uvue b/pages/CSS/box-shadow/box-shadow.uvue
index 7fac0af367738a82ce70ef04f4e031d885fa3e68..d640b5980d00c7383404fdeeb734d6bc58317908 100644
--- a/pages/CSS/box-shadow/box-shadow.uvue
+++ b/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>
 
diff --git a/pages/tabBar/CSS.uvue b/pages/tabBar/CSS.uvue
index 20a9dcdde8f5bcf864ef2a826d8bfded71db8d2e..ded37822c938a1cbff26a76d1b6331245742c6dc 100644
--- a/pages/tabBar/CSS.uvue
+++ b/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[]
 				}, {