CSS之字体效果（含渐变和阴影效果）

之前看到这个效果感觉很不错，应用起来也不算复杂，下面是效果图和代码，有兴趣的同学可以尝试一下。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体效果</title>
<style>
h1{font-size: 32px;font-weight: 550;padding-left: 50px;text-align: center;letter-spacing: 1px;position: relative;color: transparent;
}
.bg{position: relative;background-color: #ff791a;text-align: center;height: 200px;overflow: hidden;
}
.title{background-clip: text;-webkit-background-clip: text;background-image:linear-gradient(196deg,#ef951b 18%,#fff8eb 50%,#ef951b 79%);z-index: 1;
}
.titleShadow{text-align: center;text-shadow: 0 2px 4px rgba(178,103,27,.43);margin-top:-61px;
}
</style>
</head>
<body><div class="bg"><h1 class="title">让我们开始新征程吧</h1><h1 class="titleShadow">让我们开始新征程吧</h1></div>
</body>
</html>

CSS之字体效果（含渐变和阴影效果）相关推荐

CSS 实现字体发光效果 text-shadow
一.CSS字体发光效果: CSS3 并没有直接设置发光效果的属性,但是利用text-shadow属性实现此效果 1.text-shadow:该属性为文本添加阴影效果. text-shadow: h-s ...
css 实现简单的镂空渐变文字效果
css 实现简单的镂空渐变文字 html: <body><div class="box">hello</div> </body> c ...
css实现液晶字体效果
<!DOCTYPE html> <html lang="zh-cn"><head><meta charset="utf-8&qu ...
window lcd css,纯CSS实现液晶字体效果
使用css实现液晶字体效果 /*The Digits*/.light{width:300px;background:#f4f5f7;height:60px;text-align:center; }.d ...
【Web】CSS实现抖音风格字体效果（设置文本阴影）
简单记录 -慕课网- 步骤一:抖音风格字体效果案例:抖音风格的字体特效. 实现这个需要设置网页背景颜色字体颜色字体大小文本阴影重点介绍如何设置文本阴影 CSS的文本阴影text-shad ...
HTML css 实现字体渐变颜色
利用CSS中的-webkit-gradient背景渐变属性实现,-webkit-gradient是background的一个属性值,webkit内核的safari. Chrome的Linear Gra ...
CSS实现跨浏览器兼容性的盒阴影效果
2019独角兽企业重金招聘Python工程师标准>>> CSS实现跨浏览器兼容性的盒阴影效果一.无关紧要碎碎念在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了. ...
TextView描边、渐变、阴影效果
前段时间的需求,涉及到大量带各种效果的字体的使用,比如描边.渐变.阴影等.一般情况下,我们在Android开发中用到花里胡哨字体的情况不多.但是,拿到了这样的需求,我们还是要实现这样一款支持多种效果的 ...
css中字体下划线样式,css下划线浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...

CSS之字体效果（含渐变和阴影效果）

CSS之字体效果（含渐变和阴影效果）相关推荐

最新文章

热门文章