字体颜色渐变和边框渐变的一个方法

字体渐变：background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(234, 101, 10, 1)), to(rgba(246, 199, 156, 1)));//起作用关键的样式 -webkit-background-clip: text;

-webkit-text-fill-color: transparent;

边框渐变：先做一个白色的小一点的div，然后用伪类做了一个大一点的彩色的，让他低一点被盖住，就会露出一个彩色渐变的框，缺点是框内是用颜色填充的，不是透明的（这是2.5日），代码：

.test { position: relative; margin: auto; height: 80px; width: 200px; border-radius: 40px; background-color: #fff; &:before { content: ''; background: linear-gradient(to right, red, blue) no-repeat; position: absolute; top: -5px; left: -5px; height: 90px; width: 210px; border-radius: 45px; z-index: -1; } }

然后在2.6日的今天发现，直接用border-img就可以实现边框渐变

border-image: linear-gradient( 330deg, #4f70a9 , #bcad80) 40% 1%; border-image: -webkit-linear-gradient( 330deg, #4f70a9 , #bcad80) 40% 1%;

border-image: linear-gradient( 330deg, #4f70a9 , #bcad80) 40% 1%; border-image: -webkit-linear-gradient( 330deg, #4f70a9 , #bcad80) 40% 1%;