CSS3怎么实现径向渐变效果

　　那么我们在前面的文章中，已经给大家介绍了CSS3实现线性渐变效果。

　　下面我们就通过简单的示例继续给大家介绍css3实现径向渐变的效果。

　　所谓径向渐变（RadialGradients）就是由它们的中心开始定义。

　　代码示例如下：

　　<!DOCTYPE>

　　<html>

　　<metacharset="utf-8">

　　<head>

　　<title>CSS3创建径向渐变效果示例</title>

　　<styletype="text/css">

　　.container{

　　text-align:center;

　　padding:20px0;

　　width:960px;

　　margin:0auto;

　　}

　　.containerdiv{

　　width:200px;

　　height:150px;

　　display:inline-block;

　　margin:2px;

　　color:#ec8007;

　　vertical-align:top;

　　line-height:230px;

　　font-size:20px;

　　}

　　.radial{

　　background:radial-gradient(#4b6c9c,#5ac4ed);

　　}

　　</style>

　　</head>

　　<body>

　　<divclass="container">

　　<divclass="radial">Radial径向渐变</div>

　　</div>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c54406.shtml