css3的text-shadow 和box-shadow

标签：

css3 的文字阴影text-shadow 的使用方法，是给位子添加阴影效果比如添加到H1 等等的标签上

今天我们接着一起来探讨一下css3中的另一个属性text-shadow的使用方法。css3的text-shadow有点类似于text-shadow，只不过不同的是text-shadow是对象的文本设置阴影，而text-shadow是给对象实现图层阴影效果。

使用方法

-webkit-box-shadow:1px 1px 1px #aaa;
-moz-box-shadow:1px 1px 1px #aaa;
box-shadow:1px 1px 1px #aaa;

效果

代码

h1 {
text-align: center;
padding: 20px 20px 10px 20px;
font-weight: 400;
text-shadow: 15px 15px 15px black;
font-size: 34px;
}

li {
list-style-type:none;
float:left;
display:block;
width:53px; vertical-align:middle;
-webkit-box-shadow:1px 1px 1px #aaa;
-moz-box-shadow:1px 1px 1px #aaa;
box-shadow:1px 1px 1px #aaa;
}

html代码

<h1>jquery+css3缩略图悬停效果</h1>

<div class="more">
<ul>
<li><a href="javascript:viod(0)">DEMO 1</a></li>
<li><a href="javascript:viod(0)">DEMO 1</a></li>
<li><a href="javascript:viod(0)">DEMO 1</a></li>
<li><a href="javascript:viod(0)">DEMO 1</a></li>
<li><a href="javascript:viod(0)">DEMO 1</a></li>
<li><a href="javascript:viod(0)">DEMO 1</a></li>
<li><a href="javascript:viod(0)">DEMO 1</a></li>
<li><a href="javascript:viod(0)">DEMO 1</a></li>
<li><a href="javascript:viod(0)">DEMO 1</a></li>
<li><a href="javascript:viod(0)">DEMO 1</a></li>
</ul>
<div class="clear"></div>
</div>

css3的text-shadow 和box-shadow

标签：

原文地址：http://www.cnblogs.com/FutJia/p/4245107.html