css制作圆球

使用CSS制作圆球的方法

利用border-radius属性

通过将元素的border-radius设置为50%，可以将方形元素变为圆形。结合width和height设置相同的值，确保形状对称。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff0000;
}

使用aspect-ratio保持比例

现代CSS支持aspect-ratio属性，可以更简洁地确保宽高比例一致。

.circle {
  width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ff0000, #990000);
}

添加阴影或光泽效果

通过box-shadow或伪元素模拟立体感，增强圆球的视觉效果。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff, #ff0000);
  box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.2);
}

动画效果

使用@keyframes和transform为圆球添加旋转或弹跳动画。

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
}
.circle {
  animation: bounce 2s infinite;
}

响应式设计

通过vw或rem单位实现圆球大小随屏幕尺寸调整。

.circle {
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
}

注意事项

• 确保父容器有足够的空间，避免圆球被裁剪。
• 测试不同浏览器的兼容性，尤其是旧版本对aspect-ratio的支持。
• 渐变和阴影可能影响性能，复杂场景需优化。