CSS linear-gradient All In One

CSS linear-gradient All In One

CSS linear-gradient 影响因素：

font-family
font-weight
font-size
width
height
字间距,行高等等属性

solution

background: linear-gradient(162deg, #fe9eff, #fe9eff 25%, #99fffc, #eaffa7 75%, #eaffa7);

百分比 %

div {
  height: 100px;
  background-color: red;
  background-image:  linear-gradient(
      to right, 
      #fffdc2,
      #fffdc2 25%,
      #fffdc2 50%,
      #fffdc2 75%,
-    #fffdc2 100%,
+    #fffdc2 100%
    );
}
/* ✅  css 最后一个 color 后没有逗号，不然会报错 (CSS 不是 JS )*/

demo

refs

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient

https://css-tricks.com/css3-gradients/

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---