css实现文字根据条件渐变

body 选择器

复制代码
`body {
padding: 50vh 0;
text-align: center;
font-size: 6em;
}`

padding: 50vh 0; 设置了body的上下内边距为视口高度的50%,左右内边距为0。text-align: center; 使得body内的文本内容居中显示。font-size: 6em; 设置了字体大小为当前字体尺寸的6倍(通常,在根元素(<html>)上未设置字体大小时,这相当于浏览器默认字体大小的6倍)。

h1 选择器

复制代码
`h1 {
background: linear-gradient(#fe4e00 58%, lightblue 50%) 
100vh fixed;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-stroke: 2px #060afe;
}`
  • background: linear-gradient(#fe4e00 58%, lightblue 50%) center center / 100vw 100vh fixed;

    • 这行代码现在正确地设置了线性渐变,其颜色从#fe4e00lightblue,在58%和50%的位置发生变化(但请注意,由于渐变是线性的,并且方向默认从上到下,所以这两个颜色点可能不会按预期显示,因为58%50%非常接近)。
    • center center 是背景位置,表示渐变中心对齐。
    • / 100vw 100vh 是背景大小,但这里的使用可能是不恰当的,因为当使用background-clip: text;时,渐变的大小和位置通常不需要设置为整个视口大小。然而,如果这是您的特定需求(例如,您想要渐变在文本周围有一个特定的视口大小的"框"),则保留它。但请注意,这可能会导致渐变超出h1文本的范围。
    • fixed 是背景附件,表示背景图像不会随页面滚动而滚动。
  • background-clip: text;-webkit-background-clip: text; 允许渐变仅显示在文本上。

  • color: transparent; 使文本颜色透明,从而允许渐变显示在文本上。

  • -webkit-text-stroke: 2px #060afe; 为文本添加了一个2像素宽的蓝色描边。

实现效果如下

相关推荐
JianZhen✓19 分钟前
现在在本地开发了一些代码A,又有了新需求要紧急开发代码B需要只上线代码B的代码,如何更好的处理这种情况
前端
郝学胜-神的一滴38 分钟前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
蒙奇D索大1 小时前
【计算机网络】408计算机网络高分指南:物理层编码与调制技术精讲
java·前端·学习·计算机网络
无盐海1 小时前
CSRF漏洞攻击(跨站请求伪造攻击)
前端·csrf
慧一居士2 小时前
CSS3 全部功能点介绍,使用场景,对应功能点完整使用示例
前端
烛阴2 小时前
深入Lua包(Package)与依赖管理
前端·lua
IT_陈寒2 小时前
5个Vue3性能优化技巧,让你的应用提速50% 🚀(附实测对比)
前端·人工智能·后端
god002 小时前
chromium项目中添加源文件(BUILD.gn项目中添加源文件)
java·服务器·前端
快乐非自愿2 小时前
Vue 缓存之坑,变量赋值方式和响应式数据
前端·vue.js·缓存
Github掘金计划2 小时前
别再用 “臃肿监控” 了!这款轻量监控神器开源 3 月狂揽 1.3k Star!
前端·监控