Chrome 中出现了第二个 Box-Shadow？答案

【问题标题】：Second Box-Shadow Showing up in Chrome?Chrome 中出现了第二个 Box-Shadow？
【发布时间】：2019-09-29 08:45:10
【问题描述】：

我对编码比较陌生，我正在将此作为我的 CS195 (HTML/CSS) 课程的作业。我试图让两种布局在两种浏览器中看起来都一样，但我不知道我的编码在哪里对 Chrome 来说是错误的。如果有帮助的话，我正在使用 SublimeText3。

（忽略导航栏，我也没有修复。）

我尝试过调整 webkit 框大小和 moz 框大小，但我不确定还能做什么，因为它会影响网站的 IE 版本，但并没有摆脱 Chrome 上的辅助框...

我用于盒子的代码：

.box {
    overflow: hidden;
    overflow-y:auto;
    height: 200px;
    width: 565px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,1) 100%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 25px;
    padding: 20px;
    opacity: 0.85;
}

.box2 {
    overflow: hidden;
    overflow-y:auto;
    left: 20%;
    height: 545px;
    width: 650px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,1) 100%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 25px;
    padding: 20px;
    opacity: 0.85;
}

.box3 {
    overflow: hidden;
    overflow-y:auto;
    height: 220px;
    width: 400px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,1) 100%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 25px;
    padding: 20px;
    opacity: 0.85;
}

.box4 {
    overflow: hidden;
    overflow-y:auto;
    height: 220px;
    width: 400px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,1) 100%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 25px;
    padding: 20px;
    opacity: 0.85;
}

Chrome results

IE results

This is one of the resources I tried - 第一部分，上面写着：

.shadow {
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

任何帮助都会非常非常感激。这是为了我的决赛。谢谢！

【问题讨论】：

我做了一个演示，使用您的代码显示一个框。它在 chrome 和 IE 中看起来相同。我认为您的代码的其他部分会影响框的显示。您能否分享与框相关的其他代码（HTML 代码和 CSS 代码）以查找问题？
我确定这是我的代码的其他部分，只是不确定具体在哪里。我在想同样的事。我将所有内容发布到jsfiddle 中（但它不会运行，因为它都在我的电脑上，而不是在线发布）。这是我唯一能想到的帮助。谢谢，顺便说一句！我已经被这个问题困扰了一段时间了，这让我很困扰。

标签： html css google-chrome internet-explorer

【解决方案1】：

我复制了您在 jsfiddle 中提供的部分代码，我发现如果我们将 padding: 20px; 放在 css 中的 <div> #main, #recent, #favs, #followus 中，第二个 box-shadow 将在 Chrome 中消失。

【讨论】：

谢谢你，于！那行得通，我为没有三次检查而感到愚蠢，哈哈。真的，谢谢你，我已经坚持了一周左右！