css - 如何摆脱图标的边框？

Question

我的目标是让图标发光，但如果应用阴影，它会带有一个丑陋的圆形 div。

反应代码：

<SunIcon
  className="h-10 w-10 rounded-3xl mr-2.5 text-suncolor shadow-sunshadow"
     />

日影是0 0 20px 7px rgb(255 204 51 / 66%)

我得到的输出：我得到了那个大纲

我也尝试使用无大纲，但不起作用

标签： cssreactjstailwind-cssweb-frontend

Answer 1

我猜测您使用的图标库正在渲染 SVG 元素。在 SVG 上使用box-shadow会在您发布的图像中产生效果。

SVG 可以显示阴影，您可以在此处阅读，但是当使用预先存在的库时，修改它们可能很困难。

对于 CSS 驱动的阴影，您可以drop-shadow在 a 中使用filter，但是我总是发现效果太淡了：

filter: drop-shadow( 0 0 5px rgba(255, 204, 51, .66));

请注意，浏览drop-shadow器兼容性有限。