css3渐变用法（全网最全最好用的知识总结）

背景:深感自己做的页面，就是不太好看，看到太多网站做到非常漂亮，都用到过渡，等css3的知识，还有布局也用到flex弹性分配布局方式，即好看又考虑移动端， 除此之外，还有一个真正重要的理由，css样式里面完成各种，以前需要借助脚本，图片完成效果，减少对服务器的请求次数，总之，css3越来越像一门真正的语言，已经有类似变量的东西，感觉真到了非认真学不可的地步。

 

第一部分：线性渐变

线性渐变基本语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

套路写法：background:linear-gradient(0deg,blue 10%,orange 50%,red 30%);

个人理解：默认向下为零度，角度为逆时针方向，推荐写法，灵活，下面方向都可以通过角度得到

可简单认为只有这一种写法，能实现相应效果，其他写法太多记不住，或是功能不强！

第一个参数指定的是渐变的方向，同时决定渐变颜色的停止位置，默认值是 to bottom ，此参数可省略，设置此参数有两种指定方法。通过角度和通过关键字来设置，通过角度来设置就是通过角度来确定渐变的方向，0度表示为从下到上，90度表示从左到右，就是起始位置为从下到上，然后角度从起始位置以顺时针方向增大。通过关键字设置就比较简单了，比如可以设置 "to top"，"to bottom"，"to left"，"to right"，除此之外，还可以设置"to top left"，"to bottom right"之类的，具体的作用就是它们的中文意思。

第二个和第三个参数是开始颜色和结束颜色，当然中间可以添加更多的渐变色，格式可以是任意的css颜色模式

 

颜色结点：要呈现平稳过渡的颜色。

如

background:linear-gradient(orange,orangered);

background:linear-gradient(to right,orangered,orange);

background:linear-gradient(to bottom right,red,darkslategray);

background:linear-gradient(90deg,red,darkslategray);

background:linear-gradient(90deg,blue 10%,red 90%,darkslategray 20%);

故意写一个暗岩灰 后面一种颜色没有渐变，不深究

关于以上详细html代码见：https://jingyan.baidu.com/article/a948d6512cd2d60a2dcd2e8a.html

关于颜色部分，暗岩灰 darkslategray ,推荐一个网站，查看主题颜色，相关附属的颜色，轻松找到相关搭配的颜色

https://encycolorpedia.cn/2f4f4f

初次接触，总结归纳了一般常用的用法，一些高级用法，日后遇到这个需求再谈，

如：https://blog.csdn.net/u013267266/article/details/51134335

 

第二部分：径向渐变

径向渐变基本语法：

background: radial-gradient(center, shape size, start-color, ..., last-color);

径向渐变由它的中心定义，创建一个径向渐变，必须至少定义两种颜色结点；

center：渐变的中心的位置

shape：形状（圆形或椭圆形）

size：大小。

默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）

总结：

第一种情况：位置 ，形状，大小可以只给一个

只有位置：

background:radial-gradient( at 10% 100px, red,yellow,green,blue);椭圆位置

（圆的位置：background:radial-gradient( circle at 10% 100px, red,yellow,green,blue);）

只有形状

background:radial-gradient(circle, red,yellow,green,blue);

(椭圆形状：background:radial-gradient(ellipse 10px 60%, red,yellow,green,blue);)

只有大小

background:radial-gradient(60px, red,yellow,green,blue);圆大小

（椭圆大小：background:radial-gradient(ellipse 10px 60%, red,yellow,green,blue);）

第二种情况：给其中任何两个

circle 60px,red,yellow,green,blue;

circle at 0 0,red,yellow,green,blue;

background:radial-gradient(60px at 10px 100%, red,yellow,green,blue);

ellipse 60px 100px 等效60px 100px

总之椭圆给大小是两个数，或是常亮farthest-side

依次给形状，羽化，位置顺序其中两个，

background:radial-gradient(60px 100px at 10px 100%, red,yellow,green,blue);

总之椭圆给大小是两个数，或是常亮farthest-side

依次给形状，羽化，位置顺序其中两个，

第三种情况，都给位置放在最后，依次是形状，羽化大小，位置

大小给法两种都可以

但圆形，大小只能给数值，不能给常量，也许因为没办法确定远端，或是远角落，

给，一定只能是椭圆

background:radial-gradient(circle farthest-side at 0 0, red,yellow,green,blue);

要么给background:radial-gradient(circle 10px at 10% 100px, red,yellow,green,blue);

background:radial-gradient(ellipse 50% 60px at 10% 100px, red,yellow,green,blue);

background:radial-gradient(ellipse farthest-corner at 10% 100px, red,yellow,green,blue);

实测有效果，当然径向渐变，需要考虑兼容性，尽量加上各种前缀

 

关于参数给定，建议参考https://www.jianshu.com/p/cd916ae7f6a9

由于水平有限，疏忽遗漏谬误之处，请留言指出，其他涉及更复杂，重复渐变，以及原理部分，参考官网，再次不做总结，以后遇到再说，

https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient

以上是今天全部内容。