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>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。