css制作椭圆阴影

使用 box-shadow 属性制作椭圆阴影

在 CSS 中，可以通过 box-shadow 属性为元素添加阴影效果。要制作椭圆阴影，需要结合椭圆形状的元素和阴影属性。

为元素设置椭圆形状：

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background-color: #ffffff;
}

添加阴影效果：

.ellipse {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

使用 filter: drop-shadow() 制作更自然的椭圆阴影

filter 属性中的 drop-shadow() 函数可以创建更符合元素形状的阴影效果，特别适合不规则形状的元素。

.ellipse {
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

多层阴影增强效果

通过叠加多个 box-shadow 值可以创建更丰富的阴影效果。

.ellipse {
  box-shadow: 
    0 0 10px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 0, 0, 0.2),
    0 0 30px rgba(0, 0, 0, 0.1);
}

阴影动画效果

可以通过 CSS 动画让椭圆阴影产生动态效果。

@keyframes shadow-pulse {
  0% { box-shadow: 0 0 10px rgba(0, 0, 255, 0.5); }
  50% { box-shadow: 0 0 20px rgba(0, 0, 255, 0.8); }
  100% { box-shadow: 0 0 10px rgba(0, 0, 255, 0.5); }
}

.ellipse {
  animation: shadow-pulse 2s infinite;
}

注意事项

• 阴影效果会受到元素 border-radius 的影响，确保椭圆形状正确设置
• 阴影颜色使用 rgba() 格式可以更好地控制透明度
• 多层阴影时，先定义的阴影会显示在上层
• filter: drop-shadow() 的性能消耗通常比 box-shadow 更大