时间戳

首页 > 解决方案 > Safari (Webkit) 不正确地显示阴影（过滤器：drop-shadow）

html - Safari (Webkit) 不正确地显示阴影（过滤器：drop-shadow）

问题描述

我最近创建了一个带有悬停阴影效果的搜索栏，它在除 Safari（桌面）之外的所有浏览器上都能正常工作，并在版本 13.1.1 (15609.2.9.1.2) 上进行了测试。那里的阴影似乎没有走出 div。

阴影是用

filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.1));

我也尝试过 -webkit-filter 失败。以及使用溢出修复它：可见

这是该错误的简短视频：https ://imgur.com/a/aBafuXl

您可以通过创建此 html 文件自行测试

.searchbar {
  width: 500px;
  height: 70px;
  margin: auto;
  border-radius: 35px;
  background: white;
  border: 1px gray solid;
}

.searchbar:hover {
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.1));
  border: 1px solid white;
}
<div class="searchbar"></div>

标签： htmlcsswebkit

解决方案

您是否尝试过使用 box-shadow 而不是 filter drop-shadow

.searchbar {
  width: 500px;
  height: 70px;
  margin: auto;
  border-radius: 35px;
  background: white;
  border: 1px gray solid;
  transition: filter .1s;
  filter: drop-shadow(0 1px 5px rgba(255, 255,255, 0));
}

.searchbar:hover {
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .1));
  border: 1px solid white;
}
<div class="searchbar"></div>

推荐阅读