'添加示例'

docs/.vitepress/components/example/border.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="rect"></div>
+</template>
+<style>
+.rect {
+    width: 300px;
+    height: 300px;
+    background: linear-gradient(to left, #196aa8, #196aa8) left top no-repeat,
+        linear-gradient(to bottom, #196aa8, #196aa8) left top no-repeat,
+        linear-gradient(to left, #196aa8, #196aa8) right top no-repeat,
+        linear-gradient(to bottom, #196aa8, #196aa8) right top no-repeat,
+        linear-gradient(to left, #196aa8, #196aa8) left bottom no-repeat,
+        linear-gradient(to bottom, #196aa8, #196aa8) left bottom no-repeat,
+        linear-gradient(to left, #196aa8, #196aa8) right bottom no-repeat,
+        linear-gradient(to left, #196aa8, #196aa8) right bottom no-repeat;
+    background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;
+}
+</style>

docs/.vitepress/config.mjs

@@ -38,7 +38,7 @@ const vitePressOptions = {
     },
     nav: [
       { text: '首页', link: '/home/' },
-      { text: '随手记', link: '/practice/windows' },
+      { text: '随手记', link: '/practice/windows', activeMatch: '/practice/' },
       { text: '方法汇聚', link: '/method/Array/flat', activeMatch: '/method/' },
       { text: '总结资料', link: '/summary/flex', activeMatch: '/summary/' },
       // {

docs/example/README.md

@@ -1 +1,7 @@
-# 此处记录一些平时积累的一些demo
+# 此处记录一些平时积累的一些demo
+
+Css 四角边框
+<border/>
+<script setup>
+import border from '.vitepress/components/example/border.vue'
+</script>

docs/practice/example.md

@@ -0,0 +1,31 @@
+<script setup>
+import Border from '../.vitepress/components/example/border.vue'
+console.log(Border, 'Border', Border.toString(), Border.toLocaleString())
+</script>
+
+# 常见示例
+
+## Css 四角边框
+```
+<template>
+    <div class="rect"></div>
+</template>
+<style>
+.rect {
+    width: 300px;
+    height: 300px;
+    background: linear-gradient(to left, #196aa8, #196aa8) left top no-repeat,
+        linear-gradient(to bottom, #196aa8, #196aa8) left top no-repeat,
+        linear-gradient(to left, #196aa8, #196aa8) right top no-repeat,
+        linear-gradient(to bottom, #196aa8, #196aa8) right top no-repeat,
+        linear-gradient(to left, #196aa8, #196aa8) left bottom no-repeat,
+        linear-gradient(to bottom, #196aa8, #196aa8) left bottom no-repeat,
+        linear-gradient(to left, #196aa8, #196aa8) right bottom no-repeat,
+        linear-gradient(to left, #196aa8, #196aa8) right bottom no-repeat;
+    background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;
+}
+</style>
+```
+效果如下
+<Border/>
+