补充css的0.5px示例

pages/CSS/transform/scale.uvue

 <template>
-<scroll-view class="page">
+  <scroll-view class="page">
     <view class="trace">
       <view class="base reserve">
         <text class="reserve-text">scaleX(0.6)</text>
@@ -27,48 +27,60 @@
       <text>scale(1.2,1.2)</text>
       <text>转变后位置</text>
     </view>
-</scroll-view>
+
+    <view class="base">
+      <text>通过scaleY(0.5)实现0.5px的线</text>
+      <view style="width: 150px; height: 1px; background-color: #000; transform: scaleY(0.5)"></view>
+      <!-- <view style="width: 750px; height: 1px; background-color: #ff0000; "></view> -->
+    </view>
+
+  </scroll-view>
 </template>
 
 <script lang="uts">
-export default {
+  export default {
     data() {
       return {
       }
     },
     methods: {
     },
-}
+  }
 </script>
 
 <style>
-.page {
+  .page {
     flex: 1;
     align-items: center;
-}
-.trace {
+  }
+
+  .trace {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     align-items: center;
-}
-.base {
+  }
+
+  .base {
     margin: 10px;
     width: 150px;
     height: 150px;
     align-items: center;
     justify-content: center;
-}
-.reserve {
+  }
+
+  .reserve {
     border: 1px dotted #588;
     background-color: #DDD;
-}
-.reserve-text {
+  }
+
+  .reserve-text {
     color: #CCC;
-}
-.transform {
+  }
+
+  .transform {
     border: 1px solid #00F;
-	background-color: rgba(0,255,255,0.5);
-}
+    background-color: rgba(0, 255, 255, 0.5);
+  }
 </style>