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的支持。 - 渐变和阴影可能影响性能，复杂场景需优化。
