纯CSS实现多种渐变效果：渐变边框、阴影、文字
趁着周末，整理了常用的，使用纯CSS实现的各种渐变效果，这里所用的渐变全部基于 linear-gradient。
background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b)
linear-gradient()CSS 函数创建一个由两种或多种颜色沿一条直线进行线性过渡的图像，其结果是<gradient>数据类型的对象，此对象是一种特殊的<image>数据类型。
linear-gradient 具体说明可以参考 # linear-gradient() MDN文档，文中用到的其它CSS属性将会在提及的时候简单讲解。
渐变图形
<div class="gradient-box"><span>Gradient Coding</span></div>
<style>
:root {
--gradient-color: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
}
</style>
<style lang="scss" scoped>
.gradient-box {
width: 200px;
background: var(--gradient-color);
border-radius: 10px;
padding: 10px;
text-align: center;
font-size: 18px;
}
斜切渐变图形
它的实现原理就是在普通渐变形状的基础上增加了一个透明色作为起始颜色，并控制边界颜色的位置。
<div class="gradient-bevel-box"><span>Gradient Coding</span></div>
.gradient-bevel-box {
display: flex;
justify-content: center;
align-items: center;
width: 225px;
height: 48px;
padding: 0 45px 0 10px;
background: linear-gradient(
-135deg, // 关键点 1
transparent 45px, // 关键点 2
#4fcf70 45px, // 关键点 3
#fad648,
#a767e5,
#12bcfe,
#44ce7b
);
border-radius: 10px 0 0 10px;
text-align: center;
font-size: 18px;
}
渐变边框
<div class="gradient-border"><span>Gradient Coding</span></div>
这里的 CSS 稍微复杂一些，因为增加了一个鼠标hover 边框渐变的变化的效果，所以需要多包裹一层。
使用动画@keyframes flow实现鼠标经过效果，width: 200%; background-size: 50% 100%;就是为了配合这个效果，注释overflow: hidden;可以看到渐变色块的移动效果。
.gradient-border {
width: 200px;
position: relative;
border-radius: 10px;
display: block;
z-index: 1;
padding: 3px;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background: var(--gradient-color);
background-size: 50% 100%;
}
&:hover {
&::before {
animation: slide 1s linear infinite;
}
}
span {
display: block;
text-align: center;
position: relative;
z-index: 2;
font-size: 18px;
padding: 10px 0;
font-size: 18px;
background: #000;
border-radius: 8px;
}
}
@keyframes slide {
to {
transform: translateX(-50%);
}
}渐变阴影
阴影的实现使用了CSS filter: blur(30px);让渐变图形变成高斯模糊效果，然后置于按钮之下，适当调整其大小和位置即可。这里也增加了一个 鼠标 hover 效果，类似像呼吸的感觉
blur MDN 文档地址 ：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/blur)
blur()CSS 方法将高斯模糊应用于输出图片。结果为<filter-function>.
<div class="gradient-shadow"><span>Gradient Coding</span></div>
.gradient-shadow {
width: 200px;
position: relative;
display: block;
z-index: 2;
padding: 3px;
// 去除注释，可以加上边框
// &::before {
// content: '';
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// background: var(--gradient-color);
// border-radius: 10px;
// }
&::after {
position: absolute;
content: '';
top: 10px;
left: -20%;
right: 0;
z-index: 1;
height: 100%;
width: 140%;
margin: 0 auto;
transform: scale(0.8);
filter: blur(30px);
background-image: var(--gradient-color);
opacity: 0.5;
transition: opacity 1s;
}
&:hover {
&::after {
animation: breath 2.5s linear infinite;
}
}
span {
display: block;
text-align: center;
position: relative;
z-index: 2;
padding: 10px 0;
font-size: 18px;
background: #000;
border-radius: 8px;
color: #fff;
}
}
@keyframes breath {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
渐变文字
很常用的效果，CSS 也很简单，关键点在 background-clip
background-clip设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
为了让它更有灵动，继续增加动效 text-slide，这里用到了另一个 CSS filter 的函数 hue-roate()，通过它来改变渐变的色相。我们可以理解为根据角度变化，原来的颜色在色环上转动，显示成其它颜色。
hue-roate MDN 文档地址：https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate
hue-roate 应用色相旋转。
<angle>值设定图像会被调整的色环角度值。值为0deg，则图像无变化。
感兴趣的同学可以继续查阅 CSS filter的文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter， 一定会有所收获。
<div class="gradient-text">Gradient Coding</div>
.gradient-text {
font-size: 60px;
font-weight: bold;
background: var(--gradient-color);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: text-slide 2s linear infinite;
}
@keyframes text-slide {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
以上，平日基础常用的渐变图形都贴出了完整的代码，可以根据自己的实际需求和idea，不断创造出更多有趣的 CSS效果。
