您的位置：首页 > Web前端 > CSS

css3 渐变实例2径向渐变

2016-04-08 17:31 579 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航