移動端邊框或者陰影顯示不全的解決方案

BUG如圖：

CSS：

.boxshadow {
  -webkit-box-shadow: 0px 0px 6px #d8d8d8;
  box-shadow: 0px 0px 6px #d8d8d8;
}

原本應該是顯示一圈陰影的。結果就顯示一半。

最主要的是其他的DIV也是設置了同樣的代碼，一點問題都沒有，顯示完全正常。

嘗試了。各種的可能性：

1.層級問題，有沒有可能是其他的div給他擋住了。可設置position:relative; z-inde:999，問題依然存在。

2.渲染問題，有時候顯示的是正常的。手指滑動頁面就會出現顯示不全。滑倒一定高度，又顯示全。。。好奇怪。。動態設置了。class的name。滑動后刪除“.boxshadow”calss名。過1秒后再自動加上。。。。唉。還是不可以。

3.添加背景顏色后，顯示不正常。去掉背景色倒是正常。。可是。DIV就是要背景色的。。。不可行。

4.最外層的div的子元素。添加一層DIV保住里面的所有內容。給最外層，添加boxshadow。給里面添加背景色。然后倒換過來。。還是不行。。。。😞😞。。

5.最終，突然想起了移動端，利用偽類添加1px實線 的方法。。想想試試看。結果：

.package-option-info:before{
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      -webkit-box-shadow: 0px 0px 6px #d8d8d8;
      box-shadow: 0px 0px 6px #d8d8d8;
  }

最終，完美解決。。。哈哈~~不錯。。。

這真的是BUG，不知道是手機瀏覽器的問題，還是我的寫法問題。

以前在IOS，Android上也曾經遇到過，發現過類似的問題，不過不是陰影，而是border出現斷開，不完整的現象。當時沒有及時的把解決方法記錄下來。

雖然不知道什么原理，但總是覺得還是和層級有關系，不清楚，不過總算是解決了。特此記錄一下，防止以后出現又是忘記怎么解決了。。。尷尬。。。。。

PS：

記性一直不好，唉，不好到什么程度？

說有一天，同事一起抽着煙，聊起戒煙的一本書《這本書能讓你戒煙》，這哥們（吳昊：一介紹自己，就口天吳，日天昊。你這么屌，你媽媽知道么？你咋沒上天呢。。哈哈！）晚上回去就看完了，第二天來了就說戒煙了。這么有魔性？真的很神奇啊。

懷着好奇的心理我也看了看。我TM看了兩三天也沒看玩，看不看完無所謂了。。不過這本書看起來還是很愉快的。不會令人感到反感。

想了想既然打算戒掉十多年的煙癮，抽完身上的這盒煙就開始不買煙了。結果抽完就真的忘記買了。

真的忘了。。。。

忘煙，你敢信？哈哈~~哈~~（ 路人：我不信，PS：你愛TM信不信！😉 😉 ）