通常情况下要实现文字的阴影效果，我们都知道需要在PS里面使用图层样式才可以实现，如果能直接在网页中实现这个效果，不仅省去了在PS中实现的麻烦，而且还可以为网站增色不少！

下面我们就来看一下通过jQuery插件来轻松实现这个长阴影效果：

首先需要在网页中引入对应的jquery，这一步是必不可少的。

<script src=”http://code.jquery.com/jquery-1.9.1.js”></script><script src=”jquery.flatshadow.js”></script>

再有就是CSS样式问题：

<style>

html {

height: 100%;

}

body {

background: #f4eedf;

padding: 0;

text-align: center;

font-family: ‘open sans’;

position: relative;

margin: 0;

height: 100%;

}

h1, h2 {

width: 100%;

float: left;

}

h1 {

margin-top: 170px;

color: #555;

margin-bottom: 5px;

}

h2 {

color: #999;

font-weight: 100;

margin-top: 0;

margin-bottom: 60px;

}

.flat-icon {

text-align: center;

padding:23px 28px;

font-weight: bold;

display: inline-block;

line-height: 100%;

overflow: hidden;

text-transform: uppercase;

margin-right: 15px;

width: 40px;

font-size: 50px;

border-radius: 50px;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

}

</style>

<script>

$(document).ready(function(){

$(“.flat-icon”).flatshadow({

fade: true

});

});

</script>

示例内容代码

<div> 1 </div>

<div> 2 </div>

<div> 3 </div>

<div> 4 </div>

浏览效果：

这里几个按钮的颜色在刷新时会发生变化，具体的颜色可以在jquery.flatshadow.js里面调整，这个js可以直接从网上搜索下载。