diff --git a/packages/sparrow-client/src/components/CssPanel/Border/index.vue b/packages/sparrow-client/src/components/CssPanel/Border/index.vue
index 9fddfd84..ef92fe29 100644
--- a/packages/sparrow-client/src/components/CssPanel/Border/index.vue
+++ b/packages/sparrow-client/src/components/CssPanel/Border/index.vue
@@ -3,19 +3,32 @@
     <css-item label="圆角">
       <s-radio-group :list="borderRadiuslist" />
     </css-item>
+    <css-item>
+      <border-radius></border-radius>
+    </css-item>
     <css-item>
       <el-slider v-model="value" show-input> </el-slider>
     </css-item>
+    <css-item class="边框">
+      <border-model />
+    </css-item>
+    <css-item class="阴影">
+      <s-radio-group :list="shadowList" />
+    </css-item>
   </div>
 </template>
 <script>
 import SRadioGroup from '../RadioGroup';
 import CssItem from '../CssItem';
+import BorderModel from '../BorderModel';
+import BorderRadius from '../BorderRadius';
 
 export default {
   components: {
     SRadioGroup,
-    CssItem
+    BorderModel,
+    CssItem,
+    BorderRadius
   },
   data() {
     return {
@@ -39,6 +52,18 @@ export default {
           icon: '',
           value: ''
         }
+      ],
+      shadowList: [
+        {
+          label: '外阴影',
+          icon: '',
+          value: ''
+        },
+        {
+          label: '内阴影',
+          icon: '',
+          value: 'inset'
+        }
       ]
     };
   }
diff --git a/packages/sparrow-client/src/components/CssPanel/BorderModel/index.vue b/packages/sparrow-client/src/components/CssPanel/BorderModel/index.vue
index c3110919..120f8105 100644
--- a/packages/sparrow-client/src/components/CssPanel/BorderModel/index.vue
+++ b/packages/sparrow-client/src/components/CssPanel/BorderModel/index.vue
@@ -2,22 +2,48 @@
   <div>
     <el-row>
       <el-col :span="12">
-        <div></div>
+        <div class="quick-list">
+          <el-tooltip class="item" effect="dark" content="上" placement="top">
+            <div class="quick-item item-all">
+              <span>上</span>
+            </div>
+          </el-tooltip>
+
+          <el-tooltip class="item" effect="dark" content="左" placement="top">
+            <div class="quick-item item-3">
+              <span>左</span>
+            </div>
+          </el-tooltip>
+
+          <el-tooltip class="item" effect="dark" content="中" placement="top">
+            <div class="quick-item item-3">
+              <span>中</span>
+            </div>
+          </el-tooltip>
+
+          <el-tooltip class="item" effect="dark" content="右" placement="top">
+            <div class="quick-item item-3">
+              <span>右</span>
+            </div>
+          </el-tooltip>
+
+          <el-tooltip class="item" effect="dark" content="下" placement="top">
+            <div class="quick-item item-all">
+              <span>下</span>
+            </div>
+          </el-tooltip>
+        </div>
       </el-col>
       <el-col :span="12">
         <div>
-          <el-input-number
-            v-model="num"
-            controls-position="right"
-            @change="handleChange"
-          ></el-input-number>
+          <el-input-number controls-position="right"></el-input-number>
         </div>
         <div>
           <el-input placeholder="请输入内容" v-model="input2">
             <template slot="append">
               <el-popover placement="bottom" width="225" trigger="click">
                 <chrome-picker
-                  v-model="backgroundForm.backgroundColor"
+                  v-model="borderForm.backgroundColor"
                 ></chrome-picker>
                 <span slot="reference">color</span>
               </el-popover>
@@ -26,15 +52,69 @@
         </div>
       </el-col>
     </el-row>
+    <div>
+      <s-radio-group :list="borderStyleList"></s-radio-group>
+    </div>
   </div>
 </template>
 <script>
 import { Chrome } from 'vue-color';
+import SRadioGroup from '../RadioGroup';
 
 export default {
   components: {
-    ChromePicker: Chrome
+    ChromePicker: Chrome,
+    SRadioGroup
+  },
+  data() {
+    return {
+      borderForm: {
+        backgroundColor: '#FFFFFF'
+      },
+      borderStyleList: [
+        {
+          label: 'none',
+          icon: '',
+          value: 'none',
+        },
+        {
+          label: 'solid',
+          icon: '',
+          value: 'solid',
+        },
+        {
+          label: 'dashed',
+          icon: '',
+          value: 'dashed',
+        },
+        {
+          label: 'dotted',
+          icon: '',
+          value: 'dotted',
+        },
+      ]
+    };
   }
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.quick-list{
+  display: flex;
+  flex-wrap: wrap;
+  .quick-item{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    span{
+      width: 20px;
+      height: 20px;
+    }
+  }
+  .item-all{
+    flex: 0 0 100%;
+  }
+  .item-3{
+    flex: 0 0 33.33%;
+  }
+}
+</style>
diff --git a/packages/sparrow-client/src/components/CssPanel/BorderRadius/index.vue b/packages/sparrow-client/src/components/CssPanel/BorderRadius/index.vue
new file mode 100644
index 00000000..973791a2
--- /dev/null
+++ b/packages/sparrow-client/src/components/CssPanel/BorderRadius/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-input-number controls-position="right" size="mini"></el-input-number>
+      </el-col>
+      <el-col :span="12">
+        <el-input-number controls-position="right" size="mini"></el-input-number>
+      </el-col>
+      <el-col :span="12">
+        <el-input-number controls-position="right" size="mini"></el-input-number>
+      </el-col>
+      <el-col :span="12">
+        <el-input-number controls-position="right" size="mini"></el-input-number>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/packages/sparrow-client/src/components/CssPanel/index.vue b/packages/sparrow-client/src/components/CssPanel/index.vue
index 75cda957..30b05a98 100644
--- a/packages/sparrow-client/src/components/CssPanel/index.vue
+++ b/packages/sparrow-client/src/components/CssPanel/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="css-panel">
     <layout />
     <div>
       <font />
@@ -7,18 +7,32 @@
     <div>
       <location />
     </div>
+    <div>
+      <background />
+    </div>
+    <div>
+      <border />
+    </div>
   </div>
 </template>
 <script>
 import Layout from './Layout';
 import Font from './Font';
 import Location from './Location';
+import Background from './Background';
+import Border from './Border';
 export default {
   components: {
     Layout,
     Font,
-    Location
+    Location,
+    Background,
+    Border
   }
 };
 </script>
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.css-panel{
+  width: 300px;
+}
+</style>
\ No newline at end of file
diff --git a/packages/sparrow-view/src/views/index.vue b/packages/sparrow-view/src/views/index.vue
index 57725c13..7410c8c9 100644
--- a/packages/sparrow-view/src/views/index.vue
+++ b/packages/sparrow-view/src/views/index.vue
@@ -1,134 +1,18 @@
 <template>
-  <div class="home drag-box" data-id="ebd8a088" style="">
-    <div
-      class="drag-box clearfix"
-      data-design-mode="design-border-box"
-      data-instance-name="Container"
-      data-id="88a277c7"
-      style="display: block;flex-direction: column;"
-      data-empty="true"
-    />
-
-    <div
-      class="root"
-      data-design-mode="design-border-box"
-      data-instance-name="Form"
-      data-id="5e6adecf"
-      data-type="box"
-    >
-      <box-form>
-        <el-form label-width="100px">
-          <div class="drag-box" data-id="5e6adecf">
-            <el-form-item
-              label=" "
-              data-design-mode="design-border-component"
-              data-instance-name="Input"
-              data-id="5ae61517"
-              data-type="component"
-            >
-              <edit-text-box slot="label" :clearClass="true" uuid="5ae61517">
-                文本框
-              </edit-text-box>
-
-              <el-input closable="true" />
-            </el-form-item>
-
-            <el-form-item
-              label=" "
-              data-design-mode="design-border-component"
-              data-instance-name="Input"
-              data-id="decf1590"
-              data-type="component"
-            >
-              <edit-text-box slot="label" :clearClass="true" uuid="decf1590">
-                文本框
-              </edit-text-box>
-
-              <el-input type="textarea" closable="true" rows="4" />
-            </el-form-item>
-
-            <el-form-item
-              label=" "
-              data-design-mode="design-border-component"
-              data-instance-name="InputNumber"
-              data-id="e61517bd"
-              data-type="component"
-            >
-              <edit-text-box slot="label" :clearClass="true" uuid="e61517bd">
-                数字文本框
-              </edit-text-box>
-
-              <el-input-number :min="1" :max="10" />
-            </el-form-item>
-
-            <el-form-item
-              label=" "
-              data-design-mode="design-border-component"
-              data-instance-name="Autocomplete"
-              data-id="44695ae6"
-              data-type="component"
-            >
-              <edit-text-box slot="label" :clearClass="true" uuid="44695ae6">
-                文本框
-              </edit-text-box>
-
-              <el-autocomplete
-                :fetch-suggestions="querySearch44695ae6"
-                @select="handleSelect44695ae6"
-              />
-            </el-form-item>
-          </div>
-        </el-form>
-      </box-form>
-    </div>
-  </div>
+  <div
+    class="home drag-box"
+    data-id="510f0c50"
+    style="backgroundImage: url(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dded9db02e3f4052bbf451f04d3d9b5b~tplv-k3u1fbpfcp-zoom-1.image);"
+  />
 </template>
 
 <script>
 export default {
   components: {},
-  methods: {
-    querySearch44695ae6(queryString, cb) {
-      var restaurants = this.restaurants;
-      var results = queryString
-        ? restaurants.filter(this.createFilter(queryString))
-        : restaurants; // 调用 callback 返回建议列表的数据
-
-      cb(results);
-    },
-
-    createFilter(queryString) {
-      return restaurant => {
-        return (
-          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
-          0
-        );
-      };
-    },
-
-    handleSelect44695ae6(item) {
-      console.log(item);
-    }
-  },
+  methods: {},
 
   data() {
-    return {
-      restaurants: [
-        {
-          value: "三全鲜食（北新泾店）",
-          address: "长宁区新渔路144号"
-        },
-        {
-          value: "Hot honey 首尔炸鸡（仙霞路）",
-          address: "上海市长宁区淞虹路661号"
-        },
-        {
-          value: "新旺角茶餐厅",
-          address: "上海市普陀区真北路988号创邑金沙谷6号楼113"
-        }
-      ],
-      state1: ""
-    };
+    return {};
   }
 };
 </script>