CSS3径向(放射性)渐变

最新推荐文章于 2022-12-01 13:43:10 发布

weixin_30625691

最新推荐文章于 2022-12-01 13:43:10 发布

阅读量325

点赞数

原文链接：http://www.cnblogs.com/wanghaibin/articles/2950219.html

版权

<!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>