CSS 日常实用总结

CSS 日常脱坑实用代码 (验证好用过得额 持续更新+++++)

input输入框透明 文字不透明

1. 让背景颜色变透明(二选一)

background-color:rgba(0,0,0,0);
background:rgba(0,0,0,0);

2. 让边框变透明(二选一)

border-color: transparent;
border: 1px solid rgba(0,0,0, 0);

3. css3文字渐变 !!!这个好用!!!

color:#DA0A0A;
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(248, 0, 0, 1)), to(rgba(95, 4, 4, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

线性渐变

1. 两边渐变到正中间

border-bottom: 2px solid;
border-image: linear-gradient(
    -90deg,
    rgba(255, 255, 255, 0) 0%,
    $base-color-login 50%,
    rgba(255, 255, 255, 0) 99%
)
2 2 2 2;

1. 两边渐变到右侧

• 写法一

border-bottom: 2px solid;
border-image: linear-gradient(90deg, rgba(0, 216, 247, 0) 0%, #00afed 100%) 2
2 2 2;

• 写法二

border-bottom: 2px solid;
border-image: linear-gradient(to right, rgba(0, 216, 247, 0) 0%, #00afed 100%) 2
2 2 2;