如何在 png 图像上制作圆形阴影答案

【问题标题】：How to make a rounded drop shadow on a png image如何在 png 图像上制作圆形阴影
【发布时间】：2018-11-10 12:50:07
【问题描述】：

我正在尝试重新创建在 Behance 上找到的网站模板。虽然我找到了一个很好的解决方案并通过过滤器学到了一些新东西：dropshadow();我真的很想让我的 png 上的阴影变圆。我尝试了边界半径更改，但没有证明可能会模糊（），但这会使图像模糊，我希望你可以做一些类似 drop-shadow(blur());这将是厚脸皮。

为了清楚起见，下面是codepen 的图片和代码。谢谢。

.weapon-1{

    background: url(../pictor/pistols/360fx360f.png) center center no-repeat;
    background-size: contain;
    width: 100px;
    height: 100px;
    -moz-filter: drop-shadow(0 0 10px #B3135D);
    -webkit-filter: drop-shadow(0 0 10px #B3135D);
    filter: drop-shadow(0 0 10px #B3135D);

}

【问题讨论】：

标签： css filter dropshadow

【解决方案1】：

对于圆形投影，您可以在背景中使用径向渐变和透明图像。

sn-p中使用的原始图像是original image 请参考sn-p。

body{background-color: black}
img {

    /* For browsers that do not support gradients */
    background-image: radial-gradient(circle, white, black, black);
    padding: 50px;
}

<body>

<img src="https://vignette.wikia.nocookie.net/fantendo/images/a/ae/250px-Captain_Falcon_SSB4.png" />
</body>

【讨论】：

合法，我直接扫过径向渐变。这个问题仍然可以帮助其他人。谢谢！
@StegnatSum 好的...那么请接受这个答案。帮助其他人找到解决方案

【解决方案2】：

您还可以组合元素以获得真正独特的效果，尤其是复合颜色。在这里，我使用蓝色和紫色。

.weapon-1{
    background: url(https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_hkp2000_aq_p2000_boom_light_large.39f01b0b86b795bea56300432fecfbf93415ee58.png) center center no-repeat,  radial-gradient(ellipse at center, #9C08E2 -100%, transparent 40%);
    background-size: contain;
    width: 200px;
    height: 200px;
    -moz-filter: drop-shadow(0 0 10px #2C18AF);
    -webkit-filter: drop-shadow(0 0 10px #2C18AF);
    filter: drop-shadow(0 0 10px #2C18AF);
}

&lt;div class="weapon weapon-1 mx-2"&gt;&lt;/div&gt;

【讨论】：