<style type="text/css">
.lrcBox{position:relativeheight:400pxwidth:400pxdisplay:blockoverflow:hiddenborder:1px solid #60Ffont-size:12px}
.lrcBox .top{display:blockposition:absoluteheight:30pxwidth:100%top:0pxz-index:2background:url(lrc_cover_big_04640cde.png) no-repeat left top}
.lrcBox .warp{display:blockpadding:10pxbackground-color:#fffheight:100%}
.lrcBox .body{display:bolockwidth:100%height:100%background-color:#39F}
.lrcBox .body ul,.lrcBox .body li{display:blocklist-style:nonepadding:0margin:0text-align:center}
.lrcBox .body ul{ width:100%}
.lrcBox .body li{ padding-top:3pxpadding-bottom:3px}
.lrcBox .bottom{display:blockposition:absoluteheight:30pxwidth:100%bottom:0pxz-index:2background:url(lrc_cover_big_04640cde.png) no-repeat left bottom}
</style>
<div class="lrcBox">
<!--上边的渐变背景层-->
<div class="top"></div>
<!--歌词层-->
<div class="warp">
<div class="body">
<ul>
<li>这里是一行歌词</li>
<li>这里是一行歌词</li>
<li>这里是一行歌词</li>
</ul>
</div>
</div>
<!--下边的渐变背景层-->
<div class="bottom"></div>
</div>
至于lrc_cover_big_04640cde.png这张图片你可以自己做，也可以到百度首页随心听的图片资源中找到，下载就可以。
<script type="text/javascript">$(document).ready(function() {
$("input").click(function() {
$(this).hide().fadeIn(700).addClass('b')//当前这个input先隐藏再渐显，你可以测试一下，如果不是你想要的效果，你可以查一下jq的渐隐效果函数或者animate（）函数，控制这个input的透明度就好了，例如 $(this).animate（‘opacity’，‘0’）；
//点击text增加b效果
$("body").one("click", function() {
$("input").removeClass("b")
//点击其他地方消除b效果
})
return false
})
})
动态渐变
<span style="font-size:12px"><html>
...
<body>
<center>
<div id="fade" style="width:600pxheight:200px"></div>
</center>
</body>
</html></span>
为了方便查看，使用内嵌样式，还是推荐使用外链样式的使用啊，接下来进行简单编写动态实现渐变效果
<span style="font-size:12px"><script type="text/javascript">
var node=document.getElementById("fade")
var color="#0000"
var level=1
window.load=function fading(){
node.style.background=color.+level.toString()+level.toString()
level++
if(level>16){
clearTimeOut(fading)
}else{
setTimeOut(fading,300)
}
}
<script></span>
静态渐变
在css样式中添加：
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff))
简单解释下：
linear：这个就碰到了线性渐变和径向渐变的两个概念，无非是在一条线上进行变化的线性和像圆一样向四周扩散的径向；
后面的四个值：分别代表相应方向的px值，可以从左顺时针转的顺序记忆，但是它代表的是to，截止到的颜色
from：这就是开始的颜色了
to：和from是同时出现的，最后渐变结束的颜色
而color-stop：则是指在变化到线的哪个位置的时候会出现什么颜色，当然是从周围过渡过去的，相当于from，to过渡点，from过渡点，to；
附送下简单的其他的基本代码
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8)/*IE6*/
background:-moz-linear-gradient(left,#ffffff,#ff0000)/*非IE6的其它*/
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff))/*非IE6的其它*/
