更新CSS示例

pages.json

@@ -335,24 +335,48 @@
       "style": {
         "navigationBarTitleText": "background-image"
       }
+    },
+    {
+      "path": "pages/CSS/border/border-bottom",
+      "style": {
+        "navigationBarTitleText": "border-bottom"
+      }
     },
     {
       "path": "pages/CSS/border/border-color",
       "style": {
         "navigationBarTitleText": "border-color"
       }
+    },
+    {
+      "path": "pages/CSS/border/border-left",
+      "style": {
+        "navigationBarTitleText": "border-left"
+      }
     },
     {
       "path": "pages/CSS/border/border-radius",
       "style": {
         "navigationBarTitleText": "border-radius"
       }
+    },
+    {
+      "path": "pages/CSS/border/border-right",
+      "style": {
+        "navigationBarTitleText": "border-right"
+      }
     },
     {
       "path": "pages/CSS/border/border-style",
       "style": {
         "navigationBarTitleText": "border-style"
       }
+    },
+    {
+      "path": "pages/CSS/border/border-top",
+      "style": {
+        "navigationBarTitleText": "border-top"
+      }
     },
     {
       "path": "pages/CSS/border/border-width",

pages/CSS/border/border-bottom.uvue

+<template>
+  <view style="flex-grow: 1;">
+    <view>
+      <text>border-bottom: 10rpx dashed blue</text>
+      <view class="common" style="border-bottom: 10rpx dashed blue;"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+  .common {
+    width: 500rpx;
+    height: 500rpx;
+    background-color: gray;
+  }
+</style>
\ No newline at end of file

pages/CSS/border/border-left.uvue

+<template>
+  <view style="flex-grow: 1;">
+    <view>
+      <text>border-left: 10rpx solid blue</text>
+      <view class="common" style="border-left: 10rpx solid blue;"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+  .common {
+    width: 500rpx;
+    height: 500rpx;
+    background-color: gray;
+  }
+</style>
\ No newline at end of file

pages/CSS/border/border-right.uvue

+<template>
+  <view style="flex-grow: 1;">
+    <view>
+      <text>border-right: 10rpx solid blue</text>
+      <view class="common" style="border-right: 10rpx solid blue;"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+  .common {
+    width: 500rpx;
+    height: 500rpx;
+    background-color: gray;
+  }
+</style>
\ No newline at end of file

pages/CSS/border/border-top.uvue

+<template>
+  <view style="flex-grow: 1;">
+    <view>
+      <text>border-top: 10rpx dashed blue</text>
+      <view class="common" style="border-top: 10rpx dashed blue;"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+  .common {
+    width: 500rpx;
+    height: 500rpx;
+    background-color: gray;
+  }
+</style>
\ No newline at end of file

pages/tabBar/CSS.uvue

@@ -83,6 +83,22 @@
               {
                 name: 'border-radius',
                 url: '/pages/CSS/border/border-radius',
+              },
+              {
+                name: 'border-top',
+                url: '/pages/CSS/border/border-top',
+              },
+              {
+                name: 'border-bottom',
+                url: '/pages/CSS/border/border-bottom',
+              },
+              {
+                name: 'border-left',
+                url: '/pages/CSS/border/border-left',
+              },
+              {
+                name: 'border-right',
+                url: '/pages/CSS/border/border-right',
               },
               {
                 name: 'border属性复合示例',