简解Css3 - linear-gradient

JerryZou 发布于2019-08-29 13:58 / 1440人阅读

摘要：简解概念函数创建一个表示颜色线性渐变的。简单的说，元素只要用了，它等同于一张图片。使用方式简单起见，只讲一种最通用的使用方式。时可以看作是上图垂直指向顶部的黑色虚线。示例蓝色起点红色终点蓝色起点红色终点参考

简解Css3 - linear-gradient 概念

CSS linear-gradient() 函数创建一个表示颜色线性渐变的  。

简单的说，元素只要用了linear-gradient，它等同于一张图片。
即:
background：linear-gradient(...params) ~= background：url(...image)

所以它只能用在图片可以用的地方。如：background、background-image。

不要把它当作颜色用在color等样式中。

使用方式

简单起见，只讲一种最通用的使用方式。

background: linear-gradient(angle[角度], color-stop[起始颜色],color-stop[终点颜色]);

原理

angle描述渐变的方向，单位是deg，它的有效角度值是0-360deg。默认180deg。
几个常用渐变角度分别为:
从下到上:0deg
从上到下:180deg
从左到右:90deg
从右到左:270deg

如下图所示:

angle的值其实就是以向顶部中央方向为起点顺时针旋转的角度。
0deg时可以看作是上图垂直指向顶部的黑色虚线。

这里我们要理解下渐变线的概念:

渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）。

图中示例了一个45deg经过矩形中心的渐变线，它的起点就是垂直于渐变线的红点，终点是起点对应的反射点，也就是图上的绿点。

不需多言，尽在图中。

示例 1 0deg 蓝色起点红色终点

background: linear-gradient(180deg, blue, red);

2 45deg 蓝色起点红色终点

background: linear-gradient(45deg, blue, red);

参考

MDN-linear-gradient

云服务器 GPU云服务器 css3 css3气泡 css3动画 JS+CSS3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112832.html

CSS3-线性渐变

摘要：兼容性见参考二线性渐变渐变线通过函数可以创建线性渐变图片。线性渐变是通过一个轴定义的，这个轴称为渐变线。等价等价等价等价等价等价等价等价并且和直接距离为，不会渐变，如下图参考线性渐变一、渐变（gradient） 1.1 关于渐变渐变表示从一种颜色平滑的过度到另一种颜色。它是图片类型的一种，但是渐变类型图片没有尺寸，也没有长宽比。它的尺寸取决于被应用的场景，比如作为元素的背景图片时，...

piglei 2019-08-30 14:24 评论0 收藏0
关于css3中linear-gradient中的百分比

摘要：第一个颜色的实色占了总高度的，第二个颜色的实色也占了总高度的，而渐变的过度则占了总高度的。默认的渐变方式为从上往下，所以当某个颜色值设置了百分比后，便会从距离顶端相关的距离百分比计算开始填充实色。而渐变色会在顶部与尾部的中间填充。相关阅读点《Css secret》第二章《背景与边框》第五节《条纹背景》正文在第二章《背景与边框》中第五节《条纹背景》中，谈到了css3的新属性值l...

darryrzhong 2019-08-30 15:53 评论0 收藏0
浅探css3渐变

摘要：基本用法想要知道线性渐变有什么用，当然要先学习它的属性和用法。下面我们先一起学习一下线性渐变的属性。函数的第一个参数是角度或者方向，第二个参数是截止颜色的值，要想产生渐变的效果，当然至少要两个或者两个以上的颜色值。 css3的渐变属性已经在各种网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要...

lieeps 2019-08-29 17:17 评论0 收藏0
背景&边框之魔法武器CSS3

摘要：简述在页面的构建过程中，离不开背景边框，背景和边框就是最基本的设置了为了实现一些特定的视觉效果，单一的纯色背景已经不能满足现有的效果了。在这里，我们使用纯来实现一些相对复杂的背景和边框效果，这些效果不能很好的实现向下兼容。简述在页面的构建过程中，离不开背景、边框，背景和边框就是最基本的设置了UI为了实现一些特定的视觉效果，单一的纯色背景已经不能满足现有的效果了。越来越多的图片背景开...

SwordFly 2019-08-29 15:34 评论0 收藏0
css3 实现一个k歌效果和一个进度条的效果

摘要：歌效果比较简单，先分析歌效果吧。第二个进度条效果其实就是一个小技巧而已，歌字体效果都出来了，地下在叠加一层背景色就了，这个背景色就是对应的颜色值，这里就是修改一下颜色值，就是下面这段代码了未完待续哦先看两个效果：showImg(https://segmentfault.com/img/bVTkEB?w=263&h=91); showImg(https://segmentfault.c...

huangjinnan 2019-08-29 13:28 评论0 收藏0