linear-gradient()图像渐变属性详解

最新推荐文章于 2024-05-09 20:59:01 发布

sunsineq

最新推荐文章于 2024-05-09 20:59:01 发布

阅读量8.7k

点赞数 7

分类专栏： CSS 文章标签： css

原文链接：https://blog.csdn.net/qq_18661257/article/details/50640633

版权

CSS 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

对于linear-gradient()我学习的时候，查了很多资料，但是发现不管是网上还是一些书籍，都没有将这个属性的运用讲得明白，清楚，对此，我写了这篇博客，虽然不能保证每一位读者都能够看懂，但是也希望这篇博客能为你提供一些帮助，如有问题，请在博客中提出，谢谢。

首先给大家讲的就是兼容性，在IE浏览器中这个属性的设置是不兼容的，当然在IE浏览器中也可以实现类似的效果，那边是滤镜(fliter)的作用了.其他的不同的浏览器也是有不同的，比如chrome一般要加-webkit-前缀，如：-webkit-linear-gradient，比如opera就是-o-linear-gradient。

linear-gradient是属于CSS3中Gradient中的两个属性一个，这两个属性分别为linear-gradient（线性渐变）和radial-gradient（径性渐变）,其中linear-gradient线性渐变呈现线性变化，大家一看名称就可以知道这相当于是直线变化，比如充左上角到右下角的变化，或者从上到下，而radial-gradient径性渐变呈现径性变化，这便是大家经常见到的圆圈渐变效果，从图像的中间向四周进行变化，像是大家仍块石头到河里荡起的涟漪一样。而本片博客则是讲解linear-gradient,当然，linear-gradient和radial-gradient是相通的，他的使用方法一样，则是呈现的效果不同而已。

如下是简单的linear-gradient的使用

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>linear-gradient</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	.posDir{margin:100px auto;}
	.linearBar{width:100px;height:100px;border:1px solid #ccc;
		background-image:linear-gradient(45deg, #000,#fff);
	/*********************************偏向角度,起始点颜色,终止点颜色***************/
	}
	</style>
</head>
<body>
	<div class="linearBar posDir"></div>
</body>
</html>

这里提到了background-image:对这个属性进行linear-gradient,简单的说这个linear-gradient设置是针对图片的，所以必须是放图片的属性才能运用这个linear-gradient进行设置.

除了以上的角度使用(40deg),除此之外，还有提供的一些类似于C语言中的常量的东西,如下:

linear-gradient(left bottom, #000, #fff);

将代码中的 background-image改为如上代码，会呈现如下效果:

如此，这效果，是#99CC33, #FF6666,#336699,#FF0033均匀分布产生的结果，自然默认是均匀的，那么自然也存在不均匀的，这就需要我们自己设置了，这也是网上资料坑爹的地方，他们没有对这一属性的使用进行简单明了的讲解，所以我来插一脚，写一个:

background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

大家看着这个代码可能会有点迷糊，这是什么，写得也太长了，但是我想说的是，这个东西基本就是不均匀自主控制渐变的一个典型例子，首先，大家要明确一个概念，就是第一个 rgba(255,255,255,.15) 25%,说的是从左下角开始起到 25%为 rgba(255,255,255,.15),这里默认隐藏了其实点的设定，然后 transparent 25%到 50%是透明的( transparent),然后就是 25%到 75%为 rgba(255,255,255,.15)这个颜色，接着就是从75%到100%为transparent,这里又省略了一个100%他是默认值,这代码直接使用时没有什么效果的，他必须有背景颜色做衬托。
我加了一行这个:background-color:#33CC99;呈现的效果如下:

如此便是有一个运用，那就是进程条，当我们将这个东西运用到实际的时候，会发现，这个东西形成的东西如此美观，代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>linear-gradient</title>
	<style type="text/css">
	*{margin:0;padding:0;font-family:"微软雅黑";}
	.progress{margin:100px auto;width:80%;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);border-radius:4px;
		height:20px;overflow:hidden;background-color: #f5f5f5;}
	.progress-bar{float:left;width:0;height:100%;line-height:20px;color:#fff;text-align:center;
		background-color: #5cb85c;box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);}
	.progress-bar-striped{width:100px;height:100px;border:1px solid #ccc;
		background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
		background-size:40px 40px;
	}
	</style>
</head>
<body>
	<div class="progress">
		<div class="progress-bar progress-bar-striped" style="width:60%">60%</div>
	</div>
</body>
</html>

效果如下:

如上的效果中的间隔式的波浪便是渐变的效果，是不是非常的美观好看，此中还有个background-size这个设置，这是为了设置渐变图片大小,当然大家还是会疑惑，为什么会出现这样的效果，其中还有个默认的属性background-image:repeat重复，我们设置的图片只有40px, 40px这样只会产生一个图片，只有进行重复才能形成上面的效果，也许大家会疑惑，为什么要设成40px 40px进程条的高度至于20px，可不可以写成20px 20px,答案可以告诉大家，肯定可以，但是并不美观，大家可以思考思考。

linear-gradient便是讲到这里，可能其中存在什么缺陷，我日后会进行修改更新。

sunsineq

关注

7
点赞
踩
19

收藏

觉得还不错? 一键收藏
3
评论
linear-gradient()图像渐变属性详解

对于linear-gradient()我学习的时候，查了很多资料，但是发现不管是网上还是一些书籍，都没有将这个属性的运用讲得明白，清楚，对此，我写了这篇博客，虽然不能保证每一位读者都能够看懂，但是也希望这篇博客能为你提供一些帮助，如有问题，请在博客中提出，谢谢。首先给大家讲的就是兼容性，在IE浏览器中这个属性的设置是不兼容的，当然在IE浏览器中也可以实现类似的效果，那边是滤镜(fliter)的作用了.其他的不同的浏览器也是有不同的，比如chrome一般要加-webkit-前缀，如：-webkit-lin
复制链接

扫一扫