На скриншоте ниже вы можете увидеть два элемента div с тенью для обоих блоков.Второй выглядит немного иначе с более длинной тенью, и я хотел бы выяснить, почему.Я пытаюсь сделать так, чтобы он выглядел так же, как и первый.
Единственная разница между ними - это радиус границы.Я использую Chrome версии 71.0.3578.98, на macOS 10.14.2.Я тестировал с 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>
снимок экрана с тенью от теней:
