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

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

 

转载于:https://www.cnblogs.com/q460021417/p/7553999.html