-webkit-box-shadow 不适用于 safari 14答案

【问题标题】：-webkit-box-shadow not working on safari 14-webkit-box-shadow 不适用于 safari 14
【发布时间】：2021-01-06 07:24:00
【问题描述】：

我正在使用 CSS box-shadow 属性，该属性在 google chrome 和 Firefox 上运行良好，但不幸的是它不适用于 Safari 浏览器（移动设备和 mac）我使用的 Safari 版本是 14。

我的 CSS 代码：

    .testing-class{
   content: '';
    height: auto;
    position: absolute;
    z-index: 9;
    width: 100%;
    bottom: 0px;
    display: block;
    -webkit-appearance: none;
    -moz-box-shadow: 0px 7px 48px 74px #fff;
   -webkit-box-shadow: 0px 7px 48px 74px white;
    box-shadow: 0px 7px 48px 74px #fff;
     margin-top: 21px;
}

【问题讨论】：

更新：我通过添加颜色暂时解决了这个问题：#fff;背景颜色：#fff；并在那个 div 中写了一个单词。但这不是正确的方法，所以我仍在等待正确的方法。

标签： css safari webkit mobile-safari

【解决方案1】：

它只适用于显示：块元素；尝试将其添加到您的 CSS 代码中

【讨论】：

【解决方案2】：

在 safari 中遇到同样的问题。框阴影不起作用或添加边框半径时：50％；在你的 CSS 中，你会看到一个隐藏在按钮后面的框状结构当我删除 position:absolute 并使用 css

 .testing-class{
   content: '';
    height: auto;
    z-index: 9;
    width: 100%;
    bottom: 0px;
    display: block;
    -webkit-appearance: none;
    -moz-box-shadow: 0px 7px 48px 74px #fff;
   -webkit-box-shadow: 0px 7px 48px 74px white;
    box-shadow: 0px 7px 48px 74px #fff;
     margin-top: 21px;
   }

删除 position:absolute 后，它在 safari 中工作得非常好。但我希望将 position:absolute 包括在内。所以我创建了一个内部和外部标签。例如

<div className="outer">
<div className="inner">
</div>
</div>

添加更多的边距空间

.outer{
 position: absolute;
 z-index: 3;
  margin: 9px;
  box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%),
    0 1px 18px 0 rgb(0 0 0 / 12%);
  
}

    .inner {
z-index: 3; 
     and  rest of the css 
    }

这里唯一的改变是在按钮周围添加更多边距将占用按钮空间并阻止访问其余元素，因此使用外部和内部。上面列出的修复对我有用。如果它不起作用尝试围绕它进行试验，它可能会起作用。

【讨论】：