css画3d小球

web前端
通过css的background画3d的小球
1
2
3
4
5
6
7
<span style="display:inline-block;width: 30px;height:30px;border-radius:15px;opacity:1;background:-webkit-radial-gradient(30% 30%,#fff 5%,blue 95%);"></span>

<span style="display:inline-block;width: 30px;height:30px;border-radius:15px;opacity:1;background:-webkit-radial-gradient(50% 20%,#fff 5%,blue 95%);"></span>

<span style="display:inline-block;width: 30px;height:30px;border-radius:15px;opacity:1;background:-webkit-radial-gradient(30% 30%,#fff 5%,red 95%);"></span>

<span style="display:inline-block;width: 30px;height:30px;border-radius:15px;opacity:1;background:-webkit-radial-gradient(60% 30%,#fff 5%,red 95%);"></span>
示例