Странная граница с CSS box-shadow

Question

Я применил следующий стиль к кнопке отправки, видимой в этом тесте page :

border-radius: 25px;
border: none;
background: #FE6181;
box-shadow: 0 0 0px 0.4em #f4f4f4 inset;
padding: 20px;

Как видите, есть какая-то ужасно нерегулярная розовая рамка, которая не имеет никакого отношения к кнопке. Почему это?

Answer 1

Свойство "box-shadow", по-видимому, плохо отображается из-за фона.

В вашем случае использование "border" может решить проблему

border-radius: 25px;
border: 0.4em solid #F4F4F4;
background: #FE6181;
padding: 20px;

Answer 2

Ваша тень на вставке не заполняется до конца, и фон остается видимым.

Я не знаком с тенью от рамки, но вам нужна тень, которая является как вставной, так и исходной,но только примерно на пиксель, поэтому он скрывает контур.