Chrome框阴影不一致答案

【问题标题】：Chrome box shadow inconsistencyChrome框阴影不一致
【发布时间】：2023-03-30 09:00:01
【问题描述】：

在下面的屏幕截图中，您可以看到两个 div 都应用了盒子阴影。第二个看起来有点不同，阴影更长，我想弄清楚原因。我试图让它看起来和第一个一样。

它们之间的唯一区别是边界半径。我在 macOS 10.14.2 上使用 Chrome 版本 71.0.3578.98。我用 Safari 和 Firefox 测试，没有发现这个问题。

<html>
<head>
    <style>
        body { 
            background-color: #efefef;
        }
        div {
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 
                        0 1px 5px 0 rgba(0, 0, 0, 0.12), 
                        0 3px 1px -2px rgba(0, 0, 0, 0.2);
            padding: 16px;
            margin: 24px;
            background-color: #fff;
        }
        div.one {
            border-radius: 5px 5px 5px 5px;
        }
        div.two {
            border-radius: 0px 0px 5px 5px;
        }
    </style>
</head>
<body>
    <div class="one">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.Curabitur convallis ut est at tristique.
    </div>
    <div class="two">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur convallis ut est at tristique.
    </div>
</body>
</html>

box-shadow 问题截图：

【问题讨论】：

你发现了一些极端情况，如果你用 +/- 1px 改变任何值，阴影就会改变

标签： html css google-chrome

【解决方案1】：

我不知道为什么，但似乎它有效。

 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 
                        0 1px 2px 0 rgba(0, 0, 0, 0.12), 
                        0 3px 1px -2px rgba(0, 0, 0, 0.2);

【讨论】：