css3实现字体的颜色渐变,记录一下,在些页面时有时会用到。
效果图:
html源码:
<div class="mTitle_main"><h2>金玉良缘</h2></div>
css样式
<style type="text/css">
}
.mTitle_main {
width: 500px;
height: 100px;
background:#000000 ;
}
.mTitle_main h2{
width: 500px;
height: 100px;
margin: 0px 0px 0px 0px;
padding:0px 5px;
display: inline-block;
color: #fb7519;
font-size: 100px;
ont-family: ´微软雅黑´;
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(234, 101, 10, 1)), to(rgba(246, 199, 156, 1)));//起作用关键的样式
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
结语:暂时,只有谷歌浏览器支持。