From 145262d55a1b68e617ccf792898c444eb761fb85 Mon Sep 17 00:00:00 2001
From: shutao <shutao@dcloud.io>
Date: Wed, 13 Dec 2023 16:55:04 +0800
Subject: [PATCH] update overflow.uvue

---
 pages/CSS/overflow/overflow.uvue | 57 +++++++++++++++++++++++++-------
 1 file changed, 45 insertions(+), 12 deletions(-)

diff --git a/pages/CSS/overflow/overflow.uvue b/pages/CSS/overflow/overflow.uvue
index 982676ca..0837fc05 100644
--- a/pages/CSS/overflow/overflow.uvue
+++ b/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>
+    </view>
+
+    <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>
+    </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,20 +86,37 @@
     align-items: center;
   }
 
-  .box-hidden {
+  .box-hidden-border-radius {
     width: 100px;
     height: 100px;
     border-radius: 20px;
     overflow: hidden;
     background-color: green;
+  }
+
+  .box-hidden-border-width {
+    width: 100px;
+    height: 100px;
+    border-width: 2px;
+    border-style: solid;
+    background-color: green;
   }
 
-  .box-visible {
+  .box-visible-border-radius {
     width: 100px;
     height: 100px;
     border-radius: 20px;
     overflow: visible;
     background-color: green;
+  }
+
+  .box-visible-border-width {
+    width: 100px;
+    height: 100px;
+    border-width: 2px;
+    border-style: solid;
+    overflow: visible;
+    background-color: green;
   }
 
   .text1 {
-- 
GitLab