这里我们尝试使用径向渐变来实现一个鸡蛋圆，虽然在实际开发中，我们并不会这样做，但是它可以让小伙伴们熟悉一下径向渐变是怎么使用的。

实现代码如下：

在线测试
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
    <style type="text/css">
        div
        {
            width:160px;
            height:100px;
            line-height: 200px;
            text-align: center;
            border-radius:80px/50px;
            color:white;
            background:-webkit-radial-gradient(top left,yellow,orangered);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

border-radius:80px/50px;表示画一个椭圆，其中椭圆水平半径为80px，垂直半径为50px。对于border-radius属性，我们会在 “17.2 圆角效果”这一节中详细介绍。