diff --git a/src/platforms/h5/components/page/index.vue b/src/platforms/h5/components/page/index.vue
index 0e579d5388273a9b51b2225efe4015ad4af2e10c..2edb68f0f74917485bfc16b41a8ac14f5770ebd0 100644
--- a/src/platforms/h5/components/page/index.vue
+++ b/src/platforms/h5/components/page/index.vue
@@ -1,19 +1,21 @@
 <template>
   <uni-page :data-page="$route.meta.pagePath">
-    <page-head
-      v-if="navigationBar.type!=='none'"
+    <page-head
+      v-if="navigationBar.type!=='none'"
       v-bind="navigationBar" />
-    <page-refresh
-      v-if="enablePullDownRefresh"
-      ref="refresh"
-      :color="refreshOptions.color"
-      :offset="refreshOptions.offset" />
-    <page-body
-      v-if="enablePullDownRefresh"
-      @touchstart.native="_touchstart"
+    <page-refresh
+      v-if="enablePullDownRefresh"
+      ref="refresh"
+      :color="refreshOptions.color"
+      :offset="refreshOptions.offset"
+    />
+    <page-body
+      v-if="enablePullDownRefresh"
+      @touchstart.native="_touchstart"
       @touchmove.native="_touchmove"
-      @touchend.native="_touchend"
-      @touchcancel.native="_touchend">
+      @touchend.native="_touchend"
+      @touchcancel.native="_touchend"
+    >
       <slot name="page" />
     </page-body>
     <page-body v-else>
@@ -22,11 +24,11 @@
   </uni-page>
 </template>
 <style>
-  uni-page {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
+uni-page {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
 </style>
 <script>
 import {
@@ -146,6 +148,12 @@ export default {
     titlePenetrate: {
       type: String,
       default: 'NO'
+    },
+    navigationBarShadow: {
+      type: Object,
+      default () {
+        return {}
+      }
     }
   },
   data () {
@@ -180,6 +188,7 @@ export default {
       timingFunc: '',
       titlePenetrate: yesNoParseList[this.titlePenetrate]
     }, titleNView)
+    navigationBar.shadow = this.navigationBarShadow
 
     const refreshOptions = Object.assign({
       support: true,
@@ -223,4 +232,4 @@ export default {
     }
   }
 }
-</script>
+</script>
diff --git a/src/platforms/h5/components/page/pageHead.vue b/src/platforms/h5/components/page/pageHead.vue
index b06164da09d4f2ec843817056728b9d143853d36..3685b3f9cbd4d143a56852e8a97bdb54388d1aa7 100644
--- a/src/platforms/h5/components/page/pageHead.vue
+++ b/src/platforms/h5/components/page/pageHead.vue
@@ -2,16 +2,16 @@
   <uni-page-head :uni-page-head-type="type">
     <div
       :style="{transitionDuration:duration,transitionTimingFunction:timingFunc,backgroundColor:bgColor,color:textColor}"
-      :class="{'uni-page-head-transparent':type==='transparent','uni-page-head-titlePenetrate': titlePenetrate}"
+      :class="headClass"
       class="uni-page-head"
     >
       <div class="uni-page-head-hd">
-        <div
-          v-show="backButton"
-          class="uni-page-head-btn"
+        <div
+          v-show="backButton"
+          class="uni-page-head-btn"
           @click="_back">
-          <i
-            :style="{color:color,fontSize:'27px'}"
+          <i
+            :style="{color:color,fontSize:'27px'}"
             class="uni-btn-icon">&#xe601;</i>
         </div>
         <template v-for="(btn,index) in btns">
@@ -32,19 +32,19 @@
           </div>
         </template>
       </div>
-      <div
-        v-if="!searchInput"
+      <div
+        v-if="!searchInput"
         class="uni-page-head-bd">
         <div
           :style="{fontSize:titleSize,opacity:type==='transparent'?0:1}"
           class="uni-page-head__title"
         >
-          <i
-            v-if="loading"
+          <i
+            v-if="loading"
             class="uni-loading" />
-          <img
-            v-if="titleImage!==''"
-            :src="titleImage"
+          <img
+            v-if="titleImage!==''"
+            :src="titleImage"
             class="uni-page-head__title_image" >
           <template v-else>{{ titleText }}</template>
         </div>
@@ -108,7 +108,7 @@ uni-page-head {
 
 uni-page-head .uni-page-head {
   position: fixed;
-  left: 0;
+  left: 0;
   top: 0;
   width: 100%;
   height: 44px;
@@ -302,6 +302,44 @@ uni-page-head .uni-page-head__title .uni-page-head__title_image {
   height: 26px;
   vertical-align: middle;
 }
+
+uni-page-head .uni-page-head-shadow {
+  overflow: visible;
+}
+
+uni-page-head .uni-page-head-shadow::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  height: 5px;
+  background-size: 100% 100%;
+}
+
+uni-page-head .uni-page-head-shadow-grey::after {
+  background-image: url("https://cdn.dcloud.net.cn/img/shadow-grey.png");
+}
+
+uni-page-head .uni-page-head-shadow-blue::after {
+  background-image: url("https://cdn.dcloud.net.cn/img/shadow-blue.png");
+}
+
+uni-page-head .uni-page-head-shadow-green::after {
+  background-image: url("https://cdn.dcloud.net.cn/img/shadow-green.png");
+}
+
+uni-page-head .uni-page-head-shadow-orange::after {
+  background-image: url("https://cdn.dcloud.net.cn/img/shadow-orange.png");
+}
+
+uni-page-head .uni-page-head-shadow-red::after {
+  background-image: url("https://cdn.dcloud.net.cn/img/shadow-red.png");
+}
+
+uni-page-head .uni-page-head-shadow-yellow::after {
+  background-image: url("https://cdn.dcloud.net.cn/img/shadow-yellow.png");
+}
 </style>
 <script>
 import appendCss from 'uni-platform/helpers/append-css'
@@ -385,6 +423,12 @@ export default {
     titlePenetrate: {
       type: Boolean,
       default: false
+    },
+    shadow: {
+      type: Object,
+      default () {
+        return {}
+      }
     }
   },
   data () {
@@ -425,6 +469,18 @@ export default {
         })
       }
       return btns
+    },
+    headClass () {
+      const shadowColorType = this.shadow.colorType
+      const data = {
+        'uni-page-head-transparent': this.type === 'transparent',
+        'uni-page-head-titlePenetrate': this.titlePenetrate,
+        'uni-page-head-shadow': shadowColorType
+      }
+      if (shadowColorType) {
+        data[`uni-page-head-shadow-${shadowColorType}`] = shadowColorType
+      }
+      return data
     }
   },
   mounted () {