css3径向渐变实现圆球

<div class="box"></div>

css

* {
  margin: 0;
  padding: 0;
}

.box {
  width: 600px;
  height: 600px;
  /* border-radius圆角边框是CSS3的新属性，以前网页设计开发中要实现元素的圆角边框，通常是用背景图片来实现的。 */
  border-radius: 50%;
  margin: 20px auto;
  /* circle at 100px 100px(高光出现在哪) */
  background-image: radial-gradient(circle at 200px 200px, #5cabff, #000);
}

代码演示：

如果想实现椭圆，可以设置不同的宽高。