如何实现带有模糊阴影的圆形效果？

实现方案（CSS + HTML） #

通过CSS的 border-radius 属性可以轻松创建圆形，搭配 box-shadow 属性就能添加模糊阴影效果，代码示例如下：

<div class="shadow-circle"></div>

<style>
.shadow-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%; /* 使元素呈现圆形，需保证宽高一致 */
  background-color: #4285F4; /* 圆形填充颜色，可自定义 */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* 模糊阴影：水平偏移、垂直偏移、模糊半径、阴影颜色 */
}
</style>

参数调整说明 #

• 若要改变圆形大小，只需同步修改width和height的数值，保持两者相等即可。
• 调整box-shadow的第三个参数（模糊半径）可以改变阴影的模糊程度，数值越大阴影越模糊；修改rgba的第四个值（透明度）能调整阴影的深浅。

内容的提问来源于stack exchange，提问作者Antar Das