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

Question

我正在尝试重新创建我在 Behance 上找到的网站模板。虽然我找到了一个很好的解决方案并通过过滤器学到了一些新东西：dropshadow();我真的很想把我的 png 上的阴影做成圆形。我尝试了 border-radius 更改，但没有证明 blur() 但这会使图像模糊，我希望你能做一些像 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);

}

Answer 1

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

片段中使用的原始图像是 original image 请参考片段。

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>

Answer 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);
}

<div class="weapon weapon-1 mx-2"></div>

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

How to make a rounded drop shadow on a png image

css

filter

dropshadow