【css】实现文字渐变+描边功能

.清和.

已于 2025-01-13 17:06:56 修改

阅读量330

点赞数 4

分类专栏： css 文章标签： css 前端

于 2025-01-08 11:43:25 首次发布

本文链接：https://blog.youkuaiyun.com/spicyIsPleasant/article/details/145002383

版权

css 专栏收录该内容

2 篇文章

订阅专栏

一、渐变

1.效果图

2.代码

<div class="liner-style">
    我的渐变样式
</div>

.liner-style{
  font-size: 50px;
  font-weight: bold;
  color: transparent;
  background-image: linear-gradient(90deg,rgba(42, 130, 228, 1),rgba(139, 100, 245, 1));
  -webkit-background-clip: text;
  background-clip: text;
}

二、描边

1.效果图

2.代码

<div class="border-style" data-text="我的描边样式">
    我的描边样式
</div>

.border-style{
  position:relative;
  font-size: 50px;
  font-weight: bold;
  color: black;
}
.border-style::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: black;
  height: 100%;
  text-shadow: 3px 3px 0px #CD7F32, -3px -3px 0px #CD7F32, 3px -3px 0px #CD7F32, -3px 3px 0px #CD7F32;
}
.border-style::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: black;
  height: 100%;
  text-shadow: 3px 3px 0px #CD7F32, -3px -3px 0px #CD7F32, 3px -3px 0px #CD7F32, -3px 3px 0px #CD7F32;
}

三、渐变+描边

1.效果图

2.代码

<view class="liner-border-style" data-text="我的渐变描边样式">
    我的渐变描边样式
</view>

.liner-border-style{
  position:relative;
  font-size: 50px;
  font-weight: bold;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(45deg,black,red);
}
.liner-border-style::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: transparent;
  text-shadow: 3px 3px 0px #CD7F32, -3px -3px 0px #CD7F32, 3px -3px 0px #CD7F32, -3px 3px 0px #CD7F32;
}
.liner-border-style::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(45deg,black,red);
}