<!DOCTYPE html>
<html>
<head>
<style>
.gradient-ball {width: 100px;height: 100px;background: radial-gradient(circle at 30% 30%, #ffffff 0%, #4e9eff 30%,#1e90ff 60%,#0066cc 100%);border-radius: 50%;position: relative;box-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
}.gradient-ball::after {content: '';position: absolute;top: 15%;left: 15%;width: 30%;height: 30%;background: rgba(255, 255, 255, 0.6);border-radius: 50%;filter: blur(3px);
}.dotted-border {position: absolute;top: -10px;left: -10px;right: -10px;bottom: -10px;border: 2px dotted rgba(30, 144, 255, 0.5);border-radius: 50%;animation: rotate 10s linear infinite;
}@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}
</style>
</head>
<body><div class="gradient-ball"><div class="dotted-border"></div></div>
</body>
</html>- 使用 radial-gradient 创建从白色到蓝色的渐变效果
- 添加了顶部左侧的高光效果（白色半透明圆形）
- 外围有一个旋转的虚线边框
- 使用 box-shadow 添加了发光效果
主要的CSS技术点：
- border-radius: 50% 创建圆形
- radial-gradient 创建径向渐变
- ::after 伪元素创建高光效果
- animation 实现虚线边框的旋转效果
你可以通过调整以下参数来自定义效果：
- 改变 width 和 height 调整球的大小
- 修改 radial-gradient 中的颜色值调整渐变效果
- 调整 box-shadow 的值改变发光效果
- 修改 animation 的时间改变旋转速度