时间戳

首页 > 解决方案 > 如何在 png 图像上制作圆形阴影

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

问题描述

我正在尝试重新创建在 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);

}

标签： cssfilterdropshadow

解决方案

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

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

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>

推荐阅读