CSS3实现文字渐变效果

在网页中实现文字渐变效果,最常用的方法是利用CSS3的text-fill-color属性和Gradient属性。由于目前两个属性都只支持webkit核心的浏览器,所以文字渐变效果只能在Chrome浏览器、Safari浏览器下才能看到,不支持Firefox浏览器、IE浏览器。

1、text-fill-color属性

CSS代码

<style type="text/css">
.text-gradient {
display: inline-block;
color: green;
font-size: 8em;
font-family: 微软雅黑;
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
};
</style>

HTML代码

<h3 class="text-gradient">技术控</h3>

演示效果

技术控

CSS代码

<style type="text/css">
.text-fill-color{
width:950px;
margin:0 auto;
background:-webkit-linear-gradient(top,#eee,#aaa 50%,#333 51%,#000);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font:bold 95px/1.231 georgia,sans-serif;
text-transform:uppercase;
}
</style>

HTML代码

<div class="text-fill-color">技术控</div>

演示效果

技术控

2、Gradient属性

CSS代码

<style type="text/css">
h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
color: #d12;
text-decoration: none;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
</style>

HTML代码

<h1><a href="#" mce_href="#">技术控</a></h1>

演示效果

技术控

 
目前共有2条评论
你目前的身份是游客,评论请输入昵称和电邮!

  1. 代码还可以这样哦 我一直是以为全是ps整的...
    小新 2014.01.28 14:15 @
  • 暂无Trackback