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

CSS3 由内到外(放射性)渐变

2012-12-20 15:34 267 查看

记得有个师兄在一个分享讲座中提到了由内到外渐变，为了实现这种效果，就用图片去做背景，假如加载得太多图片会使网页加载得很慢，所以有必要跟boss“吵架”！那时候我就觉得好像有点不科学，不过因为要复习所以没去探讨，今日无聊起来就自己写了个小demo，呵呵！有时候不一定要跟BOSS吵架，或许能提高自己的技术来适应boss的需求。

废话不说，先看代码:

html:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="../css/text.css">
</head>
<body>
<div class="box box-1">杀</div>
<div class="box box-2">不</div>
<div class="box box-3">住</div>
<div class="box box-4">的</div>
<div class="box box-5">海</div>
<div class="box box-6">鲜</div>
</body>
</html>

css:

*{
margin: 0;
padding: 0;
}
.box{
float: left;
width: 50px;
height: 50px;
font-size: 20px;
line-height: 50px;
text-align: center;
margin: 20px auto auto 20px;
}
.box-1{
background:-webkit-gradient(radial,25 25,0,25 25,25,from(#dffdf6),to(#adffeb));
}
.box-2{
background:-webkit-gradient(radial,25 25,0,25 25,25,from(#ffd4b2),to(#ffa861));
}
.box-3{
background:-webkit-gradient(radial,25 25,0,25 25,25,from(#c6fdae),to(#8afb59));
}
.box-4{
background:-webkit-gradient(radial,25 25,0,25 25,25,from(#f6fba5),to(#f5ff5b));
}
.box-5{
background:-webkit-gradient(radial,25 25,0,25 25,25,from(#feb3ad),to(#fd695d));
}
.box-6{
background:-webkit-gradient(radial,25 25,0,25 25,25,from(#fca8fd),to(#fd7aff));
}

解析:

主要是使用了渐变的属性，以前我们经常使用线性渐变（linear），但现在我使用的是径向的渐变（radial）；两种渐变有啥区别呢？线性渐变式是按着线段的方向变化，而径向渐变式从一个圆到另外一个圆的变化！说起来有点抽象，基本把参数理解了跟看了一下效果就会明白，最后有图片显示。

第一个参数(radial)：控制渐变的方式

第二个参数和第三个参数：是第一个圆的圆心

第四个参数：是第一个圆的半径

第五个参数和第六参数：是第二个圆的圆心

第七个参数：第二个圆的半径

第八个参数：开始的颜色

第九个参数：结束的颜色

（颜色从第一个圆渐变到第二个圆）

效果图：

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

标签：

相关文章推荐

新的分享

章节导航