文字颜色渐变且加阴影

付月半子

于 2024-03-18 16:37:12 发布

阅读量426

点赞数 9

文章标签： css css3 javascript

本文链接：https://blog.youkuaiyun.com/qq_34169240/article/details/136813686

版权

<p data-txt="我是渐变色且有阴影的文字">我是渐变色且有阴影的文字</p>


/*利用background-clip属性实现文字颜色从绿到白的渐变效果*/
      p {
        margin-left: 30px;
        position: relative;
        color: transparent;
        text-shadow: 1px 4px 0px #038080;

        &::after {
          content: attr(data-txt);
          display: block;
          position: absolute;
          color: #fff;
          left: 0;
          top: 0;
          z-index: 2;

          background-image: linear-gradient(360deg, #A0FFF8 0%, #FFFFFF 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          text-shadow: none;

        }
      }