From e55e089f4a7bbadc642a0857a6ee8ce247b1aeeb Mon Sep 17 00:00:00 2001
From: taohebin <taohebin@dcloud.io>
Date: Thu, 20 Jul 2023 18:29:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0css=20border=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    | 12 +++-
 .../border/complex-border/complex-border.uvue | 56 +++++++++++++++++++
 pages/CSS/box-shadow/box-shadow.uvue          | 50 +++++++++++++++++
 pages/tabBar/CSS.uvue                         |  4 ++
 4 files changed, 120 insertions(+), 2 deletions(-)
 create mode 100644 pages/CSS/border/complex-border/complex-border.uvue

diff --git a/pages.json b/pages.json
index 63d508c6..c202c6c2 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 00000000..107111ef
--- /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 7fac0af3..d640b598 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 20a9dcdd..ded37822 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[]
 				}, {
-- 
GitLab