徑向漸變效果一.png
徑向漸變效果二.png
徑向漸變效果三.png
徑向漸變效果四.png
徑向漸變效果五.png
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> New Document </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
*{margin:0;padding:0;}
body{margin:0 auto;}
.box1{
margin:20px auto;
width:400px;height:400px;
border-radius:200px;
/*border:1px #000 solid;*/
background:-webkit-radial-gradient(
50% 50%,
red 0%,
yellow 20%,
green 50%,
blue 100%) ;
}
.box2{
margin:20px auto;
width:400px;height:400px;
border-radius:0;
border:1px #000 solid;
background:-webkit-radial-gradient(
left top,red,green) ;
}
.box3{
margin:20px auto;
width:400px;height:400px;
border-radius:200px;
border:1px #000 solid;
background:-webkit-radial-gradient(
left top,
#f00 0%,
#f60 30%,
#fff 100%) ;
}
.box5{
margin:20px auto;
width:400px;height:400px;
background: -o-radial-gradient( red, purple, green);
background: -webkit-radial-gradient( red, purple, green);
background: -ms-radial-gradient( red, purple, green);
background: -moz-radial-gradient( red, purple, green);
background: radial-gradient( red, purple, green);
}
.box7{
margin: 20px auto;
width: 400px;
height: 400px;
background: -o-radial-gradient(bottom right,red 0%,yellow 50%,#0f0 100%);
background: -sm-radial-gradient(bottom right,red 0%,yellow 50%,#0f0 100%);
background: -moz-radial-gradient(bottom right,red 0%,yellow 50%,#0f0 100%);
background: -webkit-radial-gradient(bottom right,red 0%,yellow 50%,#0f0 100%);
-webkit-background-clip:text;
-sm-background-clip:text;
-moz-background-clip:text;
-o-background-clip:text;
border-radius:400px/400px;
overflow: hidden;
color: transparent;
}
</style>
<link href="" style="text/css" rel="stylesheet"/>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7">今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦今天回家啦啦啦拉拉阿拉啦啦啦啦啦啦啦</div>
</body>
<script src=""> </script>
<script type="text/javascript">
<!--
//-->
</script>
</html>
