文字颜色渐变和边框渐变写法

文字颜色渐变、边框渐变，新手宝宝看过来啦

1. 文字渐变的核心是：
   

• background-clip:text; // 背景被裁剪成文字的前景色。
  

• 在这里一定要注意代码的顺序，要先写background属性，然后在写background-clip属性，否则background-clip属性是不生效的，正确代码如下

background: linear-gradient(135deg, #81ffef, #f067b4);
background-clip: text;
color: transparent;

2. 边框渐变的核心是：两个盒子，思路如下

• 外面盒子用渐变色，里面盒子用纯色覆盖外面盒子的颜色，所以意味着里面的颜色只能是纯色，不能是带有透明度的颜色，如果有透明度会把外面盒子的渐变色透出来

• 给外面盒子加2像素padding，让渐变色漏出来，实现渐变边框
  

图片代码

html

<div className="card-container">
    <div className="card"> 
        <p>文字渐变</p> 
    </div> 
</div>

css
.card-container { 
    width: 200px; 
    margin:300px auto; 
    flex: 1; 
    height: 100px; 
    padding: 2px; 
    background: linear-gradient(135deg,#81ffef,#f067b4); 
    border-radius: 20px; 
    box-shadow: 2px 2px 20px rgba(0,0,0,0.1); 
        .card{ 
            width: 100%; 
            height: 100%; 
            background: #fff; 
            border-radius: 20px; 
            text-align: center; 
                p{ 
                    line-height: 100px; 
                    font-size:30px ; 
                    font-weight: 900; 
                    background: linear-gradient(135deg,#81ffef,#f067b4); 
                    background-clip:text; 
                    color: transparent; 
                } 
        } 
}