Если вы не видите эту проблему, попробуйте взглянуть на этот codepen, здесь вы должны посмотри, что я имею в виду.
Я пробовал несколько способов исправить это. Ниже в комментариях вы можете увидеть один из них. Тем не менее, кажется, что отображается неровная граница в 1 пиксель между правильной границей и отбрасываемой тенью.
Если это зависит от рендерера браузера, то это ошибка? Как правильно это исправить для всех современных браузеров.
html{
background-color: #554343;
}
div{
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
border-radius: 50%;
border-width: 0; /* no result
border-width: 2px; // uncommented no result
border-style: solid;// uncommented no result even with inset*/
background-color: white;
box-shadow: inset 1px 1px 150px, inset -1px -1px 150px;
}<div>
</div>РЕДАКТИРОВАТЬ: Пробовал и так, но без положительного результата:
html{
background-color: #554343;
}
.container{
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
border-radius: 50%; /* tried 49.5% but it's not acceptable */
box-shadow: inset 1px 1px 150px #000, inset -1px -1px 150px #000;
}
.content{
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: white;
z-index: -1;
}<div class="container">
<div class="content">
</div>
</div>