我可以在宽度和高度为 0 的 div 上有一个圆框阴影吗
Can I have a round box shadow on a div of 0 width and height
我正在尝试创建边缘模糊的圆形。
通过创建具有 50% 边界半径的 div 然后应用框阴影,我成功地做到了这一点。
但是,我使用各种框阴影设置随机创建这些形状,当框阴影模糊非常分散时,中心的颜色与 div 不同,并且会出现硬边框。
我尝试将 div 设置为 0px 宽度和高度,但随后框阴影的圆形消失了,它看起来是方形的。
有没有办法让 div 宽度和高度为 0 的圆形框阴影?或者我应该使用另一种方法来实现我想要的?
你可以考虑radial-gradient
有类似的效果:
.box {
width:100px;
height:100px;
border-radius:50%;
background:radial-gradient(farthest-side,red ,transparent );
}
<div class="box">
</div>
您可以结合模糊滤镜来增加阴影效果:
.box {
width:100px;
height:100px;
border-radius:50%;
background:radial-gradient(farthest-side,red ,transparent );
filter:blur(10px);
}
<div class="box">
</div>
我正在尝试创建边缘模糊的圆形。 通过创建具有 50% 边界半径的 div 然后应用框阴影,我成功地做到了这一点。 但是,我使用各种框阴影设置随机创建这些形状,当框阴影模糊非常分散时,中心的颜色与 div 不同,并且会出现硬边框。 我尝试将 div 设置为 0px 宽度和高度,但随后框阴影的圆形消失了,它看起来是方形的。
有没有办法让 div 宽度和高度为 0 的圆形框阴影?或者我应该使用另一种方法来实现我想要的?
你可以考虑radial-gradient
有类似的效果:
.box {
width:100px;
height:100px;
border-radius:50%;
background:radial-gradient(farthest-side,red ,transparent );
}
<div class="box">
</div>
您可以结合模糊滤镜来增加阴影效果:
.box {
width:100px;
height:100px;
border-radius:50%;
background:radial-gradient(farthest-side,red ,transparent );
filter:blur(10px);
}
<div class="box">
</div>