Javascript 网页上的颜色根据位置在阴影中变化

所以我在一个网站上工作，我在使用网页时注意到了一些东西。两种元素具有相同的类别，但颜色的阴影不同。有人知道是什么导致了这样的事情吗

编辑 下面是一些代码：

班级：

.summer{
background-color: #0077be;
/*background-image: -ms-linear-gradient(top, #0077be  0%, #fff 100%);

background-image: -moz-linear-gradient(top, #0077be  0%, #fff 100%);

background-image: -o-linear-gradient(top, #0077be  0%, #fff 100%);

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0077be ), color-stop(100, #fff));

background-image: -webkit-linear-gradient(top, #0077be  0%, #fff 100%);

background-image: linear-gradient(to bottom, #0077be  0%, #fff 100%);*/
}

HTML：

<button onclick="prnt();">Print</button>
<div class="recipe" id="0">
    <div class="tabs">
        <a class="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
    </div>
    <div class="page">
        <p>The recipes you'll find here are ones you can use to impress guests at your next get together</p>
    </div>
</div> <!--recipe card end-->
<div class="recipe" id="1">
    <div class="tabs">
        <a class="tab">Chicken Clubhouse Sandwiches</a>
    </div>
    <div class="page">
        <h1>Chicken Clubhouse Sandwiches</h1>
        <div class="head">
            <b>From: </b> <a href="#">Source</a><br>
            <b>Makes: </b> 2 Sandwiches<br>
            <button onclick="makeLink(1);">Share Link</button><br>
        </div>

        <div class="card">
            <div class="pic">
                <img src="/uploads/1/0/4/0/104012940/custom_themes/406340590114946394/files/images/lunch2.jpg">
            </div>
            <div class="ing">
                <b>Ingredients</b>
                <ul>
                    <li>6 slices of bread</li>
                    <li>6 Slices of bacon</li>
                    <li>Cooked chicken breast, cut into chunks</li>
                    <li>Shredded Lettuce</li>
                    <li>Sliced Tomato</li>
                    <li>Mayonnaise</li>
                    <li>Heinz Chili Sauce</li>
                </ul>
            </div>
            <div class="pro">
                <b>How to Make</b>
                <ol>
                    <li>Toast the bread and cook the bacon</li>
                    <li>Assemble in the following order:
                        <ul>
                            <li>Toast</li>
                            <li>Mayo</li>
                            <li>Lettuce</li>
                            <li>Tomato</li>
                            <li>Toast</li>
                            <li>Chicken</li>
                            <li>Bacon</li>
                            <li>Chili Sauce</li>
                            <li>Toast</li>
                        </ul>
                    </li>
                </ol>
            </div>          
        </div>
    </div>
</div> <!--recipe card end-->   

---

检查这些可能性：

-元素的ID

-元素的类

---

-样式属性被添加到HTML中的元素中

您可以尝试以下方法

.container{
宽度：300px；
高度：50px；
利润率：10px；
边框：1px纯色灰色；
}
.容器：第n个类型（3）{
边框颜色：红色；
}
.容器：第n个类型（2）{
边框颜色：蓝色；
}

内容
内容
内容

发布一些代码。CSS类定义是什么，HTML是什么样子的？其中任何一个元素都有另一个

类

，一个唯一的

id

或

属性

或

标记

，这些元素上有

CSS样式

，覆盖

类样式

。例如

这个文本是红色的。

和

这个文本是蓝色的。

我曾经在一台笔记本电脑上遇到过同样的问题。。。经过大量的CSS测试，我得出结论，它与屏幕本身有关。我不确定这里是否也发生了同样的情况，但听起来很像。对我来说，这确实像是一个监视器问题。也许你可以把你的代码简化成一个小的测试例子，你只需把CSS类分配给几个div，然后把它们放在页面周围进行测试。是的，我移动了其中一个按钮的位置，这似乎就是问题所在。我想我必须把另一个按钮放在靠近页面顶部的位置。我不确定是否是这样的。我尝试直接将颜色指定给元素，但它仍然这样做。谢谢你的建议

function button(season){
switch(season){
  case 1:
        Array.from(document.querySelectorAll('button')).map(function(button) {
        button.className+="spring";
    });
        break;
  case 2:
        Array.from(document.querySelectorAll('button')).map(function(button) {
        button.className += "summer";
    });
        break;
  case 3:
        Array.from(document.querySelectorAll('button')).map(function(button) {
        button.className+="fall";
    });
        break;
  case 4:
        Array.from(document.querySelectorAll('button')).map(function(button) {
        button.className+="winter";
    });
        break;
  default:
        Array.from(document.querySelectorAll('button')).map(function(button) {
               button.style.backgroundColor="#FFF";
    });
        break;
  }  
}