<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>径向(放射性)渐变</title>
<style>
div {
width: 200px;
height: 100px;
margin-top: 10px;
border: 1px solid #ddd;
}
.test {
background: -moz-radial-gradient(center center, circle, #f00, #ff0, #080);
background: -webkit-radial-gradient(center center, circle, #f00, #ff0, #080);
background: -o-radial-gradient(center center, circle, #f00, #ff0, #080);
background: -ms-radial-gradient(center center, circle, #f00, #ff0, #080);
background: radial-gradient(center center, circle, #f00, #ff0, #080);
}
.test2 {
background: -moz-radial-gradient(circle contain, #f00, #ff0, #080);
background: -webkit-radial-gradient(circle contain, #f00, #ff0, #080);
background: -o-radial-gradient(circle contain, #f00, #ff0, #080);
background: -ms-radial-gradient(circle contain, #f00, #ff0, #080);
background: radial-gradient(circle contain, #f00, #ff0, #080);
}
.test3 {
background: -moz-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);
background: -webkit-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);
background: -o-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);
background: -ms-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);
background: radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);
}
.test4 {
background: -moz-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);
background: -webkit-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);
background: -o-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);
background: -ms-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);
background: radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
</body>
</html>
