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

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信不信！😉 😉 ）