补充css的0.5px示例

a332ecc5 · wanganxp · f343bbce · a332ecc5
隐藏空白更改
内联并排

Showing with 77 addition and 65 deletion

pages/CSS/transform/scale.uvue pages/CSS/transform/scale.uvue +77 -65

未找到文件。
--- a/pages/CSS/transform/scale.uvue
+++ b/pages/CSS/transform/scale.uvue
 <template>
-<scroll-view class="page">
-	<view class="trace">
-		<view class="base reserve">
-			<text class="reserve-text">scaleX(0.6)</text>
-			<text class="reserve-text">转变前位置</text>
-		</view>
-		<view class="base reserve">
-			<text class="reserve-text">scaleY(0.8)</text>
-			<text class="reserve-text">转变前位置</text>
-		</view>
-		<view class="base reserve">
-			<text class="reserve-text">scale(0.8,0.8)</text>
-			<text class="reserve-text">转变前位置</text>
-		</view>
-	</view>
+  <scroll-view class="page">
+    <view class="trace">
+      <view class="base reserve">
+        <text class="reserve-text">scaleX(0.6)</text>
+        <text class="reserve-text">转变前位置</text>
+      </view>
+      <view class="base reserve">
+        <text class="reserve-text">scaleY(0.8)</text>
+        <text class="reserve-text">转变前位置</text>
+      </view>
+      <view class="base reserve">
+        <text class="reserve-text">scale(0.8,0.8)</text>
+        <text class="reserve-text">转变前位置</text>
+      </view>
+    </view>

-	<view class="base transform" style="transform: scaleX(0.6)">
-		<text>scaleX(0.6)</text>
-		<text>转变后位置</text>
-	</view>
-	<view class="base transform" style="transform: scaleY(0.6)">
-		<text>scaleY(0.6)</text>
-		<text>转变后位置</text>
-	</view>
-	<view class="base transform" style="transform: scale(1.2,1.2)">
-		<text>scale(1.2,1.2)</text>
-		<text>转变后位置</text>
-	</view>
-</scroll-view>
+    <view class="base transform" style="transform: scaleX(0.6)">
+      <text>scaleX(0.6)</text>
+      <text>转变后位置</text>
+    </view>
+    <view class="base transform" style="transform: scaleY(0.6)">
+      <text>scaleY(0.6)</text>
+      <text>转变后位置</text>
+    </view>
+    <view class="base transform" style="transform: scale(1.2,1.2)">
+      <text>scale(1.2,1.2)</text>
+      <text>转变后位置</text>
+    </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 {
-	data() {
-		return {
-		}
-	},
-	methods: {
-	},
-}
+  export default {
+    data() {
+      return {
+      }
+    },
+    methods: {
+    },
+  }
 </script>

 <style>
-.page {
-	flex: 1;
-	align-items: center;
-}
-.trace {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	width: 100%;
-	align-items: center;
-}
-.base {
-	margin: 10px;
-	width: 150px;
-	height: 150px;
-	align-items: center;
-	justify-content: center;
-}
-.reserve {
-	border: 1px dotted #588;
-	background-color: #DDD;
-}
-.reserve-text {
-	color: #CCC;
-}
-.transform {
-	border: 1px solid #00F;
-	background-color: rgba(0,255,255,0.5);
-}
+  .page {
+    flex: 1;
+    align-items: center;
+  }
+
+  .trace {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    align-items: center;
+  }
+
+  .base {
+    margin: 10px;
+    width: 150px;
+    height: 150px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .reserve {
+    border: 1px dotted #588;
+    background-color: #DDD;
+  }
+
+  .reserve-text {
+    color: #CCC;
+  }
+
+  .transform {
+    border: 1px solid #00F;
+    background-color: rgba(0, 255, 255, 0.5);
+  }
 </style>