css3 渐变实例2径向渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:400px;
height:200px;
border:2px solid #fcf;
padding:4px;
/* 设计同心圆，圆心坐标(200,100) ，内圆半径10，外圆半径100 从内圆红色到外圆绿色径向渐变 */
/* background:-webkit-gradient(radial, 200 100,10,200 100,100,from(red),to(green)); */
/* 添加色标 */
background:-webkit-gradient(radial,
200 100,10,
200 100,100,
from(red),to(green),
color-stop(80%,blue)
);
-webkit-background-origin:padding-box;
-webkit-background-clip:content-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:400px;
height:200px;
border:2px solid #fcf;
padding:4px;
/* 设计同心圆，圆心坐标(200,100) ，内圆半径10，外圆半径100 从内圆红色到外圆绿色径向渐变 */
/* background:-webkit-gradient(radial, 200 100,10,200 100,100,from(red),to(green)); */
/* 添加色标 */
/* background:-webkit-gradient(radial,
200 100,10,
200 100,100,
from(red),to(green),
color-stop(80%,blue)
); */
/* 当内圆圆心和外圆圆心距离小于两元半径的差 会呈现锥形径向渐变效果 */
background:-webkit-gradient(radial,
120 100,10,
200 100,100,
from(red),to(green));
-webkit-background-origin:padding-box;
-webkit-background-clip:content-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:400px;
height:200px;
border:2px solid #fcf;
padding:4px;
/* 设计同心圆，圆心坐标(200,100) ，内圆半径10，外圆半径100 从内圆红色到外圆绿色径向渐变 */
/* background:-webkit-gradient(radial, 200 100,10,200 100,100,from(red),to(green)); */
/* 添加色标 */
/* background:-webkit-gradient(radial,
200 100,10,
200 100,100,
from(red),to(green),
color-stop(80%,blue)
); */
/* 当内圆圆心和外圆圆心距离小于两元半径的差 会呈现锥形径向渐变效果 */
/* background:-webkit-gradient(radial,
120 100,10,
200 100,100,
from(red),to(green)); */
/* 设计球形效果 */
background:-webkit-gradient(radial,
180 80,10,
200 100,90,
from(#00c),to(rgba(1,159,98,0)),
color-stop(98%,#0cf));
-webkit-background-origin:padding-box;
-webkit-background-clip:content-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;
height:200px;
border:2px solid #fcf;
padding:4px;
/* 设计多个气泡效果 */
background:-webkit-gradient(radial,
60 45,10,
52 50,60,
from(#a7d30c),to(rgba(1,159,98,0)),
color-stop(90%,#019f62)),
-webkit-gradient(radial,
105 105,20,
112 120,80,
from(#ff5f98),to(rgba(255,1,136,0)),
color-stop(75%,#ff0188)),
-webkit-gradient(radial,
95 15,15,
102 20,60,
from(#00c9ff),to(rgba(0,201,255,0)),
color-stop(80%,#00b5e2));
-webkit-background-origin:padding-box;
-webkit-background-clip:content-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
