当前位置：首页 > CSS

css制作椭圆阴影

2026-04-01 23:31:15CSS

使用 box-shadow 属性创建椭圆阴影

在 CSS 中，可以通过 box-shadow 属性为元素添加阴影效果。要创建椭圆阴影，需要结合 border-radius 属性使元素呈现椭圆形。

.ellipse {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

调整阴影参数

box-shadow 属性接受多个参数来控制阴影效果：

css制作椭圆阴影

水平偏移量（10px）：阴影水平方向的偏移距离
垂直偏移量（10px）：阴影垂直方向的偏移距离
模糊半径（20px）：阴影的模糊程度
扩展半径（可选）：阴影的扩展大小
颜色（rgba(0, 0, 0, 0.5)）：阴影颜色和透明度

多重阴影效果

可以为一个元素添加多个阴影，创建更复杂的效果：

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background-color: #3498db;
  box-shadow: 
    5px 5px 10px rgba(0, 0, 0, 0.3),
    15px 15px 30px rgba(0, 0, 0, 0.2);
}

内阴影效果

使用 inset 关键字可以创建内阴影：

css制作椭圆阴影

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background-color: #3498db;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

结合伪元素创建特殊效果

通过伪元素可以创建更复杂的阴影效果：

.ellipse {
  position: relative;
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background-color: #3498db;
}

.ellipse::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  z-index: -1;
}

使用 filter 属性创建阴影

CSS 的 filter 属性也可以用来创建阴影效果：

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background-color: #3498db;
  filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.5));
}

注意 filter: drop-shadow() 与 box-shadow 的区别在于它会跟随元素的形状，包括透明部分。