diff --git a/packages/editor/src/assets/images/color.svg b/packages/editor/src/assets/images/color.svg
new file mode 100644
index 0000000..15a8164
--- /dev/null
+++ b/packages/editor/src/assets/images/color.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710828012260" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4293" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M475.2 903.2c-16.8 0-34.4-1.6-53.6-4l-4.8-0.8c-136-20.8-228.8-152.8-232.8-158.4-131.2-200-65.6-402.4 58.4-514.4 123.2-112 328.8-160 508.8-15.2C867.2 304 902.4 433.6 904 439.2v1.6c16.8 91.2 3.2 158.4-40.8 201.6-67.2 64.8-178.4 44-193.6 40.8-20.8-2.4-36 4-47.2 17.6-12 15.2-14.4 35.2-10.4 47.2 11.2 33.6 12.8 59.2 4.8 78.4-23.2 50.4-70.4 76.8-141.6 76.8z m-51.2-52.8l4.8 0.8c77.6 12 124.8-3.2 144-46.4 0-0.8 4-11.2-6.4-43.2-10.4-28.8-2.4-66.4 18.4-92 21.6-27.2 53.6-39.2 91.2-35.2l2.4 0.8c0.8 0 100 21.6 151.2-28 31.2-30.4 40.8-83.2 27.2-156.8-3.2-10.4-37.6-123.2-136.8-202.4-156.8-128-336.8-85.6-445.6 12.8C174.4 352 100.8 525.6 224 713.6c0.8 0 84.8 120 200 136.8z" fill="#999999" p-id="4294"></path><path d="M284 526.4m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#999999" p-id="4295"></path><path d="M340 382.4m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#999999" p-id="4296"></path><path d="M484 302.4m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#999999" p-id="4297"></path><path d="M644 342.4m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#999999" p-id="4298"></path><path d="M724 470.4m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#999999" p-id="4299"></path></svg>
\ No newline at end of file
diff --git a/packages/editor/src/assets/images/icons/index.ts b/packages/editor/src/assets/images/icons/index.ts
deleted file mode 100644
index 7537450..0000000
--- a/packages/editor/src/assets/images/icons/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const svgs = import.meta.glob('./*.svg', { eager: true, as: 'raw' })
-export const IconProps = {
-  name: String,
-  color: String,
-  size: [String, Number]
-}
-
-export const getIcon = (name?: string) => {
-  if (!name) return ''
-  return svgs[`./${name}.svg`]
-}
diff --git a/packages/editor/src/components/layout/components/Border.vue b/packages/editor/src/components/layout/components/Border.vue
index 8bac9b1..8c6e043 100644
--- a/packages/editor/src/components/layout/components/Border.vue
+++ b/packages/editor/src/components/layout/components/Border.vue
@@ -1,17 +1,5 @@
 <template>
   <div v-if="store.current.style">
-    <el-row :gutter="10">
-      <el-col :span="10">边框颜色:</el-col>
-      <el-col :span="14">
-        <ColorPicker v-model="store.current.style.borderColor" />
-      </el-col>
-    </el-row>
-    <el-row :gutter="10">
-      <el-col :span="10">边框宽度:</el-col>
-      <el-col :span="14">
-        <InputNumber v-model="store.current.style.borderWidth" />
-      </el-col>
-    </el-row>
     <el-row :gutter="10">
       <el-col :span="10">边框风格:</el-col>
       <el-col :span="14">
@@ -26,14 +14,27 @@
       </el-col>
     </el-row>
 
+    <el-row :gutter="10">
+      <el-col :span="10">边框颜色:</el-col>
+      <el-col :span="14">
+        <ColorPicker v-model="store.current.style.borderColor" />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="10">
+      <el-col :span="10">边框宽度:</el-col>
+      <el-col :span="14">
+        <InputNumber v-model="store.current.style.borderWidth" />
+      </el-col>
+    </el-row>
     <el-row :gutter="10">
       <el-col :span="10">边框半径:</el-col>
       <el-col :span="14">
         <InputNumber v-model="store.current.style.borderRadius" />
       </el-col>
     </el-row>
+
   </div>
-  
 </template>
 
 <script setup lang='ts'>
@@ -42,20 +43,20 @@ import InputNumber from './InputNumber.vue'
 import ColorPicker from './ColorPicker.vue'
 import { useEditorStore } from '@es-drager/editor/src/store'
 const store = useEditorStore()
-
 const borderStyleList = [
   { label: '实线', value: 'solid' },
   { label: '虚线', value: 'dashed' },
   { label: '点线', value: 'dotted' }
 ]
 const borderStyle = computed({
-  get: () => store.current.style!.borderStyle || 'solid',
+  get: () => {
+    if (!store.current.style!.borderStyle) {
+      store.current.style!.borderStyle = 'solid'
+    }
+    return store.current.style!.borderStyle || 'solid'
+  },
   set: (val) => {
     store.current.style!.borderStyle = val
   }
 })
 </script>
-
-<style lang='scss' scoped>
-
-</style>
diff --git a/packages/editor/src/components/layout/components/ColorPicker.vue b/packages/editor/src/components/layout/components/ColorPicker.vue
index 2f1df5f..9d1836e 100644
--- a/packages/editor/src/components/layout/components/ColorPicker.vue
+++ b/packages/editor/src/components/layout/components/ColorPicker.vue
@@ -1,8 +1,12 @@
 <template>
-  <el-color-picker show-alpha :predefine="predefineColors" />
+  <el-color-picker :popper-class="popperClassName" show-alpha :predefine="predefineColors" />
 </template>
 
 <script setup lang='ts'>
+import { onMounted } from 'vue'
+import { useId } from '../../../utils'
+
+const popperClassName = useId() + '-picker'
 const predefineColors = [
   '#ff4500',
   '#ff8c00',
@@ -19,5 +23,13 @@ const predefineColors = [
   'hsla(209, 100%, 56%, 0.73)',
   '#c7158577',
 ]
+
+onMounted(() => {
+  const popper = document.querySelector(`.${popperClassName}`)
+  if (popper) {
+    // 阻止popper点击事件冒泡
+    popper.addEventListener('click', (e) => e.stopPropagation())
+  }
+})
 </script>
 
diff --git a/packages/editor/src/components/layout/components/InputNumber.vue b/packages/editor/src/components/layout/components/InputNumber.vue
index 9d671d7..e6aaca1 100644
--- a/packages/editor/src/components/layout/components/InputNumber.vue
+++ b/packages/editor/src/components/layout/components/InputNumber.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="es-input-number">
+  <div class="es-input-number" :class="{ 'has-prefix': prefix || $slots.prefix }">
     <div class="es-input-number-prefix">
       <slot name="prefix">
         <template v-if="prefix">{{ prefix }}:</template>
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang='ts'>
-const props = defineProps({
+defineProps({
   prefix: {
     type: String
   }
@@ -22,11 +22,15 @@ const props = defineProps({
   position: relative;
   :deep(.el-input-number) {
     width: 100%;
+  }
+}
+.has-prefix {
+  :deep(.el-input-number) {
     .el-input__inner {
       padding-left: 20px;
     }
   }
-  &-prefix {
+  .es-input-number-prefix {
     display: flex;
     align-items: center;
     left: 0;
diff --git a/packages/editor/src/components/layout/components/Shadow.vue b/packages/editor/src/components/layout/components/Shadow.vue
new file mode 100644
index 0000000..e531b0f
--- /dev/null
+++ b/packages/editor/src/components/layout/components/Shadow.vue
@@ -0,0 +1,66 @@
+
+
+<template>
+  <div v-if="store.current.style">
+    <el-row :gutter="10">
+      <el-col :span="10">开启阴影:</el-col>
+      <el-col :span="14">
+        <div style="display: flex; justify-content: flex-end;"><el-switch v-model="shadow" /></div>
+      </el-col>
+    </el-row>
+    
+    <template v-if="shadow">
+      <el-row :gutter="10">
+        <el-col :span="10">水平阴影:</el-col>
+        <el-col :span="14">
+          <el-slider v-model="shadowX" :step="1" :min="-10" :max="10" size="small" @change="onChange" />
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
+        <el-col :span="10">垂直阴影:</el-col>
+        <el-col :span="14">
+          <el-slider v-model="shadowY" :step="1" :min="-10" :max="10" size="small" @change="onChange" />
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
+        <el-col :span="10">模糊距离:</el-col>
+        <el-col :span="14">
+          <el-slider v-model="shadowBlur" :step="1" :min="1" :max="20" size="small" @change="onChange" />
+        </el-col>
+      </el-row>
+      <el-row :gutter="10">
+        <el-col :span="10">阴影颜色:</el-col>
+        <el-col :span="14">
+          <ColorPicker v-model="shadowColor" @change="onChange" />
+        </el-col>
+      </el-row>
+    </template>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed, watch } from 'vue'
+import ColorPicker from './ColorPicker.vue'
+import { useEditorStore } from '@es-drager/editor/src/store'
+const store = useEditorStore()
+const shadow = ref(false)
+const shadowX = ref(3)
+const shadowY = ref(3)
+const shadowBlur = ref(1)
+const shadowColor = ref('#808080')
+const boxShadow = computed(() => `${shadowX.value}px ${shadowY.value}px ${shadowBlur.value}px ${shadowColor.value}`)
+function onChange() {
+  store.current.style!.boxShadow = boxShadow.value
+}
+
+watch(shadow, (val) => {
+  if (val) {
+    store.current.style!.boxShadow = boxShadow.value
+  } else {
+    store.current.style!.boxShadow = undefined
+  }
+})
+</script>
+
diff --git a/packages/editor/src/components/layout/info/ElementStyle.vue b/packages/editor/src/components/layout/info/ElementStyle.vue
index 3d17cfb..d30cd52 100644
--- a/packages/editor/src/components/layout/info/ElementStyle.vue
+++ b/packages/editor/src/components/layout/info/ElementStyle.vue
@@ -22,7 +22,7 @@
 
       <el-row :gutter="10">
         <el-col :span="10">透明度:</el-col>
-        <el-col :span="14" style="padding: 0 15px;width: 100%;">
+        <el-col :span="14">
           <el-slider
             :modelValue="1"
             :step="0.01"
@@ -33,16 +33,16 @@
           />
         </el-col>
       </el-row>
+
       <el-divider />
+      <TextStyle />
 
+      <el-divider />
       <Border />
 
+      <el-divider />
+      <Shadow />
     </template>
-
-    <el-divider />
-
-    <div style="margin-bottom: 10px;">文本: </div>
-    <TextStyle />
   </el-form>
 </template>
 
@@ -52,6 +52,7 @@ import TextStyle from './TextStyle.vue'
 import { useEditorStore } from '@es-drager/editor/src/store'
 import Background from '../components/Background.vue'
 import Border from '../components/Border.vue'
+import Shadow from '../components/Shadow.vue'
 
 const store = useEditorStore()
 const itemList = ref<CSSProperties[]>([
@@ -121,9 +122,29 @@ function onChange(key: string, value: any) {
   .el-checkbox-group, .el-checkbox-button__inner {
     width: 100%;
   }
-  .el-color-picker.el-tooltip__trigger,
+  .el-color-picker.el-tooltip__trigger {
+    width: 100%;
+  }
   .el-color-picker__trigger {
+    justify-content: flex-start;
     width: 100%;
+    &:after {
+      content: '';
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      background: url('../../../assets/images/color.svg') no-repeat;
+      background-size: contain;
+      margin-left: 4px;
+    }
+    .el-color-picker__color {
+      width: calc(100% - 10px);
+    }
+  }
+
+  .el-slider {
+    padding-right: 10px;
+    --el-slider-button-size: 13px;
   }
 }
 </style>
diff --git a/packages/editor/src/components/layout/info/Info.vue b/packages/editor/src/components/layout/info/Info.vue
index 8f5a1d8..96ed4bc 100644
--- a/packages/editor/src/components/layout/info/Info.vue
+++ b/packages/editor/src/components/layout/info/Info.vue
@@ -57,6 +57,8 @@ watch(() => store.current.selected, () => {
 }
 .es-info-style {
   padding: 10px;
+  height: calc(100% - 40px);
+  overflow-y: auto;
 }
 .es-info-tabs {
   display: flex;