文字阴影加渐变--浮雕效果

方法一： 使用linear-gradient -webkit-filter

<!-- -webkit-filter -->
<template>
<div class="main-box">
  <div class="font-class">文字</div>
</div>
</template>
<style scoped lang='scss'>
.main-box {
  width: 100%;
  height: 100%;
  .font-class {
    // 文字渐变
    font-size: 70px;
    font-weight: bold;
    color: transparent; // 将文字颜色设为透明，使渐变可见
    // background-image: linear-gradient(0deg, #6EC0FF 0%, #FEFEFE 83%); //可用
    background: linear-gradient(0deg, #6EC0FF 0%, #FEFEFE 83%); //可用
    background-clip: text; //将渐变限制在文字区域
    // 文字阴影
    -webkit-filter: drop-shadow(3px 3px 2px rgba(4,35,115,0.96));
  }
}
</style>

• 效果

  
  效果

方法二:使用 linear-gradient text-shadow

• 实现组件

<!-- 文字阴影加渐变--浮雕效果  -->
<template>
  <div class="font-box" :style="{fontSize:size+'px'}">
    <span class="font-box-name-shadow">{{label}}</span>
    <span class="font-box-name-font">{{label}}</span>
  </div>
  </template>
  <script lang='ts' setup>
  
  interface Props {
    label?:string
    size?:number
  }
  const props = withDefaults(defineProps<Props>(),{
    label:'文字',
    size:12
  })
  </script>
  <style scoped lang='scss'>
    .font-box {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      .font-box-name-shadow {
        position: absolute;
        text-shadow: 3px 3px 2px rgba(4,35,115,0.96);
      }
      .font-box-name-font {
        position: relative;
        color: #007AD7;
        background: linear-gradient(0deg, #6EC0FF 0%, #FEFEFE 83%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
  
    }
  </style>

• 使用

<shadow-font  label="文字" :size="17" />

• 效果

  
  效果