css制作椭圆盒子

使用CSS制作椭圆盒子

通过CSS的border-radius属性可以轻松将矩形盒子变为椭圆形状。以下是几种实现方法：

方法一：基础椭圆 通过设置border-radius为50%可将正方形变为正圆，矩形变为椭圆：

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

方法二：精确控制弧度 使用斜杠语法分别指定水平和垂直半径：

.ellipse-box {
  width: 300px;
  height: 150px;
  background: #2ecc71;
  border-radius: 150px/75px; /* 水平半径/垂直半径 */
}

方法三：四角独立控制 为每个角单独设置椭圆弧度：

.ellipse-box {
  width: 250px;
  height: 120px;
  background: #e74c3c;
  border-radius: 50% 20% 30% 40% / 60% 30% 70% 50%;
}

方法四：使用CSS变量 通过变量实现动态调整：

.ellipse-box {
  --width: 180px;
  --height: 90px;
  width: var(--width);
  height: var(--height);
  background: #9b59b6;
  border-radius: calc(var(--width)/2) / calc(var(--height)/2);
}

进阶技巧

添加渐变效果

.ellipse-box {
  width: 220px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(45deg, #1abc9c, #3498db);
}

带边框的椭圆

.ellipse-box {
  width: 280px;
  height: 140px;
  border-radius: 50%;
  border: 5px dashed #f39c12;
  background-color: rgba(255, 255, 255, 0.7);
}

椭圆阴影效果

.ellipse-box {
  width: 240px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
  background: #e67e22;
}

这些方法可根据实际需求组合使用，通过调整尺寸比例和弧度值可以获得不同形状的椭圆效果。现代浏览器对这些属性的支持都非常完善，无需考虑兼容性问题。