您的当前位置:首页正文

带背景颜色的字体渐变

2023-05-22 来源:帮我找美食网

 .index_other{
        width: 40px;
        height: 38px;
        display: inline-block;
        line-height: 40px;
        background: rgba(38, 83, 120, 0.338);
        // opacity: 0.15;
        color: rgba(255, 255, 255, 0);
        position: relative;
            // color: #00F0FF;
            font-size: 24px;
            font-family: Myriad Pro;
    }
    .index_other:before {
            content: attr(text);
            position: absolute;
            // z-index: 10;
            color: #00F0FF;
            -webkit-mask: linear-gradient(to bottom, transparent, #00F0FF);
           
            // opacity: 0.15;
        }

2、字体渐变色、背景渐变色、边框渐变色

.container{
    width:150px;
    height:350px;
    background-image: linear-gradient(to bottom ,#072249, #0f4072) //背景渐变色
    border: 1px solid black;//边框渐变色
    border-image: linear-gradient(to bottom ,#0dbaff, #326ebf) 1;//边框渐变色

//文字渐变色
        background-image:-webkit-linear-gradient(top,#ffbb92,#ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color:transparent;

}

因篇幅问题不能全部显示,请点此查看更多更全内容

热门图文

Top