方法一： 使用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" />
-
效果
效果
