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