css3实现渐变色文字和镂空文字

前端之家收集整理的这篇文章主要介绍了css3实现渐变色文字和镂空文字前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家,也给大家做个参考。

<style>
.text-fill-color2{
	font-size:20px;
	width:950px;
	margin:0 auto;
	background:-webkit-linear-gradient(top,#fff,#9d9c9a);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	text-transform:uppercase;
}
</style>
<div class="text-fill-color2">text-fill-color2</div>
<style>
.text-fill-color{
	 font-size:20px;
	width:950px;
	margin:0 auto;
	background:-webkit-linear-gradient(top,#9d9c9a,#000);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	text-transform:uppercase;
}
</style>
<div class="text-fill-color">text-fill-color</div>

<style>
.text-fill-color3{
	 font-size:40px;
	width:950px;
	margin:0 auto;
	background:-webkit-linear-gradient(top,#000);
	-webkit-background-clip:text;	
	 color:transparent;
	text-transform:uppercase;
}
</style>
<div class="text-fill-color3">渐变字体</div>

<style>
.text-fill-color4{
	 font-size:80px;
	width:950px;
	margin:0 auto;
	-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px #fff;
  background:#000;
}
</style>
<div class="text-fill-color4">镂空字体</div>

以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

猜你在找的CSS相关文章