css - ionic 图标周围的阴影/轮廓

Question

我正在尝试在彩色图标周围设置实线边框。

应该足够直截了当，显然它适用于字形，但我无法让它适用于 <ion-icon>

我试过...

<ion-icon [name]="'heart'" style="font-size: 25px; color: #d00; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;"></ion-icon>

// like this fiddle: http://jsfiddle.net/9suc171t/1/

或者...

<ion-icon [name]="'heart'" style="font-size: 25px; color: #d00; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);"></ion-icon>

而且我已经为 text-shadow 尝试了其他格式, 但除了红色图标外，我没有得到任何其他东西。

感觉有点卡住了，感谢任何帮助!

Answer 1

看起来 ion-icon 正在使用影子 DOM，以免干扰其他样式。你可以通过 JS 访问影子 DOM 并直接编辑它:

document.querySelector('ion-icon').shadowRoot.childNodes[0].innerText+="path{stroke:black; stroke-width:10})"

这将选择图标，获取其 shadowRoot 的第一个子节点，即 <style>标记，然后添加更多样式。