html - 盒子阴影没有出现，当我检查元素时没有参考它

Question

我正在尝试制作一个带有边框半径和框阴影的自定义按钮。这是我的 html 和 css

.selectOptionButton{
  display: block;
  -webkit-box-shadow: inset 1px 1px 15px 2px #e7e6e0;
  -moz-box-shadow: inset 1px 1px 15px 2px #e7e6e0; 
  box-shadow: inset 1px 1px 15px 2px #e7e6e0; 
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px; 
  border-radius: 100px; 
  height: 50px;
  width: 100px;
  background-color: #e7e6e0;
}

<div class="selectOptionButton text-center">Test</div>

出于某种原因，当我检查元素时，我看到了这个：

.selectOptionButton {
    background-color: #E7E6E0;
    border-radius: 100px 100px 100px 100px;
    display: block;
    height: 50px;
    width: 100px;
}

Answer 1

它是与背景颜色相同的嵌入颜色

看看这个小提琴

-webkit-box-shadow: inset  0px 0px 15px 2px #333aaa;
-moz-box-shadow: inset 0px 0px 15px 2px #333aaa; 
box-shadow: inset 0px 0px 15px 2px #333aaa;