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

最新推荐文章于 2023-07-07 16:05:03 发布

noonnightstorm

最新推荐文章于 2023-07-07 16:05:03 发布

阅读量1w

点赞数

文章标签： css CSS Css div DIV html Html HTML

本文链接：https://blog.csdn.net/noonnightstorm/article/details/8350045

版权

记得有个师兄在一个分享讲座中提到了由内到外渐变，为了实现这种效果，就用图片去做背景，假如加载得太多图片会使网页加载得很慢，所以有必要跟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)：控制渐变的方式

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

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

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

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

第八个参数：开始的颜色

第九个参数：结束的颜色

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

效果图：

noonnightstorm

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3 由内到外(放射性)渐变

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

扫一扫