探索CSS属性*-gradient的实用价值

本文为做者行舟客投稿，原文地址：

https://yunxiaomeng.blog.csdn.net/article/details/108784246

 欢迎点赞！

先介绍一下一个有趣的属性 —— conic-gradient

圆锥渐变！

对其感兴趣是由于我发现它居然能够用来作圆饼图！好比这样的：这样的：其原理也很简单：就是以起始点为中心，而后以顺时针方向绕中心实现渐变效果。其必须接收多种颜色值参数，每一个颜色值后能够跟两个百分比，为当前颜色值的起始点和终止点（中间用空格隔开）：

圆锥渐变原理图

background: conic-gradient(pink 0 30%, yellow 0 70%, lime 0 100%);

还能够分开来写：

background: conic-gradient(pink 0, pink 30%, yellow 30%, yellow 70%, lime 70%, lime 100%);

（第二种方式兼容性比第一种好一点）

慢着！上面第二张图片不就是咱们想要的吗？根据图片，咱们不可贵出下面的代码：

{
    width: 200px;
    height: 200px;
    background: conic-gradient(deeppink 0, deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%);
    border-radius: 50%;
}

But，这里面彻底是“静态”的。

咱们大概大部分人都用过echarts绘制图形：根据后端传来的数据渲染到echarts的Map对象的指定参数（数组）中就能获得一个符合要求的不一样颜色显示的圆饼图了。这用CSS怎么作呢？

咱们固然要借助JS的帮助 —— 由于CSS3推出了 自定义变量 ，它能够很好的让css属性与JavaScript变量相结合：通过探索，目前比较好的实践应该就是给gradient的颜色开始与结束位置设置为自定义变量，而后当JavaScript拿到数据后经过改变其值从而改变圆饼图中的颜色分布！

放一个之前写过的演示demo：

:root{
 --zero:0;
 --one:50%;
}
.circle{
 width: 300px;
 height: 300px;
 border-radius: 50%;
 /* background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red); */
 background: conic-gradient(red var(--zero) var(--one),yellow var(--one) 100%);
}

<div class="circle"></div>
<button id="but">点我改变圆饼图分布</button>
<script>
 but.onclick=function(){
  document.documentElement.style.setProperty('--zero', '10%');
  document.documentElement.style.setProperty('--one', '70%');
 }
</script>

若是要动态增长颜色值（好比新增调查对象），能够动态修改style中的属性：

xxx.style.xxx="xxx";   //改变

这要比用“::after伪元素”实现起来方便多了！

伪元素的方式可能不少人也玩过：利用transform的rotate属性将一个content盒子旋转并显示部分以达到目的。

还有不少“骚操做”网上应该一搜一堆，这里就再也不赘述了（：相比于前两年浏览器对此属性的“不闻不问”到如今的部分支持，也是很大进步了，让咱们继续期待吧）

---

关于 linear-gradient

这个属性除了在一些网站上用做某个元素的背景之外，彷佛并无什么值得关注的地方：好比 条纹背景“若是多个色标具备相同的位置，它们会产生一个无限小的过渡区域， 过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那 个位置忽然变化，而不是一个平滑的渐变过程。” 由于渐变是一种由代码生成的图像，咱们能像对待其余任何背景图像那样对待它，并且还能够经过 background-size 来调整其尺寸；而且因为背景在默认状况下是重复平铺的，整个容器其实已经被填满了水平条纹：

background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;

垂直条纹垂直条纹的代码跟水平条纹几乎是同样的，差异主要在于：咱们须要在 开头加上一个额外的参数来指定渐变的方向。在水平条纹的代码中，咱们其 实也能够加上这个参数，只不过它的默认值 to bottom 原本就跟咱们的意 图一致，因而就省略了。最后，咱们还须要把 background-size 的值颠倒 一下：

background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;

须要注意的是：linear-gradient若是加了第一个参数，则其默认方向就会变为“从下向上”的，为此，笔者还向菜鸟教程投过邮件建议他们在文档中修改措辞。

linear2

倾斜条纹“传统的”仅仅改变linear-gradient第一个参数——角度值的方式或者经过background-size增长“精确度”的方式都不能有效的达到真正意义上完美的倾斜背景：它们老是会在大小改变或者换一个倾斜度时把整个图案搞乱！幸运的是，咱们还有更好的方法来建立斜向条纹：一个不为人知的真相是 linear-gradient() 和 radial-gradient() 还各有一个循环式的增强版：repeating-linear-gradient() 和 repeating-radial-gradient()。它们的工做方式跟前二者相似，只有一点不一样：色标是无限循环重复的，直 到填满整个背景！

background: repeating-linear-gradient(45deg, #fb3, #58a 30px);

哦，对了，同上面同样，全部的“-gradient”属性在没有限制起始位置和终止位置时都会有“渐变光晕”，若是咱们改成下面这样：

background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);

linear4

看到这张图你有没有想到一个著名的案例——三角形？

background: #eee;
background-image: linear-gradient(45deg, transparent 75%, #bbb 0);

而咱们之前用CSS通常是像这样写的：

width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: black ;

其实，linear-gradient用处还远远不止这些...

---

2020-10-17更新

radial-gradient及总体应用

咱们大概都知道：滚动条是一种常见的界面控件，用来提示一个元素除了能够看到的内容以外，还包含了更多内容。可是，它每每太过笨重，在视觉上喧宾夺主，所以现代操做系统已经开始简化它的外观，当用户不与可滚动的元素交互时，滚动条就会被彻底隐藏。目前已知的“去除滚动条”的方法中，最经常使用的有：::-webkit-scrollbar{display:none;} ，可是很显然，IE上没法使用 —— 它只容许改变滚动块的颜色。

在CSS3的时代，咱们能够在想要加滚动条的地方外包裹一层div，为其设置overflow:hidden，内部用calc()函数动态计算width使其溢出！这能够有效解决IE下兼容性问题。

咱们如今已经不多经过滚动条来滚动页面了（更多的是使用触摸手势），但滚动条对于元素内容可滚动的提示做用仍然是十分有用的，哪怕对于那些没有发生交互的元素也是如此；并且这种提示方式十分巧妙。听说曾经 Google 推出了一款 RSS 阅读器（已经没了），它的用户体验设计师找到了一种很是优雅的方式来做出相似的提示：当侧边栏的容器还有更多内容时，一层淡淡的阴影会出如今容器的顶部和底部。就像这样：

让咱们首先从一段简单的结构代码开始，一个带有示意性内容的普通无序列表：

<ul>
 <li>Ada Catlace</li>
 <li>Alan Purring</li>
 <li>Schrödingcat</li>
 <li>Tim Purrners-Lee</li>
 <li>WebKitty</li>
 <li>Json</li>
 <li>Void</li>
 <li>Neko</li>
 <li>NaN</li>
 <li>Cat5</li>
 <li>Vector</li>
 <li>Ada Catlace</li>
 <li>Alan Purring</li>
 <li>Schrödingcat</li>
 <li>Tim Purrners-Lee</li>
 <li>WebKitty</li>
 <li>Json</li>
 <li>Void</li>
 <li>Neko</li>
 <li>NaN</li>
 <li>Cat5</li>
 <li>Vector</li>
 <li>Ada Catlace</li>
 <li>Alan Purring</li>
 <li>Schrödingcat</li>
 <li>Tim Purrners-Lee</li>
 <li>WebKitty</li>
 <li>Json</li>
 <li>Void</li>
 <li>Neko</li>
 <li>NaN</li>
 <li>Cat5</li>
 <li>Vector</li>
 <li>Ada Catlace</li>
 <li>Alan Purring</li>
 <li>Schrödingcat</li>
 <li>Tim Purrners-Lee</li>
 <li>WebKitty</li>
 <li>Json</li>
 <li>Void</li>
 <li>Neko</li>
 <li>NaN</li>
 <li>Cat5</li>
 <li>Vector</li>
</ul>

咱们能够给 <ul> 元素设置一些基本的样式，让它的高度略短于内容，从而让其内容能够滚动：

overflow: auto;
width: 10em;
height: 8em;
padding: .3em .5em;
border: 1px solid silver;

接下来，有趣的事情即将发生。咱们用一个径向渐变在顶部添加一条阴影：

background: radial-gradient(at top, rgba(0,0,0,.2),transparent 70%) no-repeat;
background-size: 100% 15px;

如今，当咱们滚动列表时，这条阴影会一直停留在相同的位置。这正是背景图像的默认行为：它的位置是相对于元素固定的！不论元素的内容是否发生了滚动。这一点也适用于 background-attachment: fixed 的背景图像。它们惟一的区别是，当页面滚动时，后者是相对于视口固定的。有没有办法让背景图像跟着元素的内容一块儿滚动呢？

如今常见的值只有inherit、scroll、fixed，可是从W3C文档中能够看到：后来为background-attachment 属性增长了一个新的关键字，叫作 local ！若是将此属性应用到这条阴影上，它会带给咱们正好相反的效果：当咱们滚动到最顶端时，能看到一条阴影；但当咱们向下滚动时，这条阴影就消失了。

但这不重要，咱们的思路对了！

我想到了一个很经常使用的hack：咱们须要两层背景：一层用来生成那条阴影，另外一层基本上就是一个用来遮挡阴影的白色矩形，其做用相似于遮罩层。生成阴影的那层背景将具备默认的 background-attachment 值（scroll），由于咱们但愿它老是保持在原位。咱们把遮罩背景的 background-attachment 属性设置为 local，这样它就会在咱们滚动到最顶部时盖住阴影，在向下滚动时跟着滚动，从而露出阴影。

background: linear-gradient(white 30%, transparent),
    radial-gradient(at 50% 0, rgba(0,0,0,.2),transparent 70%);
background-repeat: no-repeat;
background-size: 100% 50px, 100% 15px;
background-attachment: local, scroll;

没错，这就是linear-gradient的另外一个应用 —— 渐变遮罩层！

可是如今咱们会发现：如今只有上边有，下边怎么搞？这就须要用到css中的“简写”以及对*-gradient的理解了：若是不加第一个参数（不指明方向），则默认是从上到下渐变的，可是若是加了第一个参数可是没有指明to bottom或100%，那么它默认是从下向上渐变的！

background: linear-gradient(white 30%, transparent) top / 100% 50px,
 radial-gradient(at 50% 0, rgba(0,0,0,.2),transparent 72%) top / 100% 15px,
 linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) bottom / 100% 50px,
  radial-gradient(at bottom, rgba(0,0,0,.2), transparent 72%) bottom / 100% 15px;
background-repeat: no-repeat;
background-attachment: local, scroll,local, scroll;

最后

• 欢迎加我微信(winty230)，拉你进技术群，长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端，作个专业的技术人...