移动端边框或者阴影显示不全的解决方案

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