css 文字描边 (data-title)

Hermia_yuan

已于 2024-06-03 16:30:59 修改

阅读量158

点赞数 3

文章标签： css 前端 html

于 2024-03-20 10:22:37 首次发布

本文链接：https://blog.csdn.net/Hermia_yuan/article/details/136868013

版权

<div class="num" data-title="Hello World!"> Hello World! </div>

.num{
      position: relative;
      top: 0;
      left: 0;
      font-size: 30px;
      font-weight: 600;
      -webkit-text-stroke: 1px rgba(255, 255, 255, 0.95);  // 描边颜色

    &::before {
        content: attr(data-title);
        -webkit-text-stroke: 0;
        position: absolute;
        top: 0;
        left: 0;
        background:linear-gradient(0deg, #eaf7ff 0.1%, #43a2fd 52.76%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
}