Question

我遇到了webkit-boxshadow的问题，它在最新的Chrome浏览器中无效这是代码可以给任何解决方案请。它在firefox中运行良好。

option:checked { box-shadow: 0 0 10px 100px #2eb135 inset;
-webkit-box-shadow: 0 5pc -5px 100px #2eb135 inset;}

option:hover{-webkit-box-shadow: 0px 0px 8px 2px #CCCCCC inset;}

Answer 1

根据CanIUse，box-shadow属性不再需要前缀。所以你可以使用以下样式：

option:checked {
    box-shadow: inset 0 0 10px 100px #2eb135;
}

option:hover {
    box-shadow: inset 0 0 8px 2px #CCCCCC;
}

Answer 2

确实有效。您可能想重新考虑您的参数。难道你不认为100px传播有点多吗？尝试减少该值！

样品：

.c-test {
  width: 10vw;
  height: 10vw;
  margin: auto;
  margin-bottom: 25px;
  padding: 10px;
  background-color: #f00;
}

.c-test__ok {
  box-shadow: 0 0 10px 10px #2eb135 inset;
  -webkit-box-shadow: 0 5pc -5px 10px #2eb135 inset;
}

.c-test__your-code {
  box-shadow: 0 0 10px 100px #2eb135 inset;
  -webkit-box-shadow: 0 5pc -5px 100px #2eb135 inset;
}

<div class="c-test c-test__ok">
  DIV with OKish shadow
</div>

<div class="c-test c-test__your-code">
  Your CSS
</div>

webkit-box-shadow：inset无法在Chrome版本48.0.2564.109上运行

2 个答案: