update overflow.uvue

pages/CSS/overflow/overflow.uvue

@@ -2,41 +2,57 @@
   <!-- #ifdef APP -->
   <scroll-view style="flex:1;">
   <!-- #endif -->
-    <text style="font-size: 15px;">overflow=hidden效果 子元素是view</text>
+    <text style="font-size: 15px;">overflow=hidden效果子元素是view border圆角</text>
     <view class="backgroundview">
-      <view class="box-hidden">
+      <view class="box-hidden-border-radius">
         <view style="width: 50px; height: 150px; background-color: greenyellow;"></view>
       </view>
     </view>
-    <text style="font-size: 15px;">overflow=visible效果 子元素是view</text>
+
+    <text style="font-size: 15px;">overflow=hidden效果 子元素是view border边框</text>
+    <view class="backgroundview">
+      <view class="box-hidden-border-width">
+        <view style="width: 50px; height: 150px; background-color: greenyellow;"></view>
+      </view>
+    </view>
+
+    <text style="font-size: 15px;">overflow=visible效果 子元素是view border圆角</text>
     <view class="backgroundview">
-      <view class="box-visible">
+      <view class="box-visible-border-radius">
         <view style="width: 50px; height: 150px; background-color: greenyellow;"></view>
       </view>
     </view>
+
+    <text style="font-size: 15px;">overflow=visible效果 子元素是view border边框</text>
+    <view class="backgroundview">
+      <view class="box-visible-border-width">
+        <view style="width: 50px; height: 150px; background-color: greenyellow;"></view>
+      </view>
+    </view>
+
     <view style="flex-grow: 1">
       <text style="font-size: 15px;">overflow=hidden效果 子元素是text</text>
       <view class="backgroundview">
-        <view class="box-hidden">
+        <view class="box-hidden-border-radius">
           <text class="text1">ABCDEFG</text>
         </view>
       </view>
       <text style="font-size: 15px;">overflow=visible效果 子元素是text</text>
       <view class="backgroundview">
-        <view class="box-visible">
+        <view class="box-visible-border-radius">
           <text class="text1">ABCDEFG</text>
         </view>
       </view>
 
       <text style="font-size: 15px;">overflow=hidden效果 子元素是image</text>
       <view class="backgroundview">
-        <view class="box-hidden">
+        <view class="box-hidden-border-radius">
           <image style="width: 150px; height: 150px;" src="/static/uni.png"></image>
         </view>
       </view>
       <text style="font-size: 15px;">overflow=visible效果 子元素是image</text>
       <view class="backgroundview">
-        <view class="box-visible">
+        <view class="box-visible-border-radius">
           <image style="width: 150px; height: 150px;" src="/static/uni.png"></image>
         </view>
       </view>
@@ -70,7 +86,7 @@
     align-items: center;
   }
 
-  .box-hidden {
+  .box-hidden-border-radius {
     width: 100px;
     height: 100px;
     border-radius: 20px;
@@ -78,7 +94,15 @@
     background-color: green;
   }
 
-  .box-visible {
+  .box-hidden-border-width {
+    width: 100px;
+    height: 100px;
+    border-width: 2px;
+    border-style: solid;
+    background-color: green;
+  }
+
+  .box-visible-border-radius {
     width: 100px;
     height: 100px;
     border-radius: 20px;
@@ -86,6 +110,15 @@
     background-color: green;
   }
 
+  .box-visible-border-width {
+    width: 100px;
+    height: 100px;
+    border-width: 2px;
+    border-style: solid;
+    overflow: visible;
+    background-color: green;
+  }
+
   .text1 {
     font-size: 50px;
   }