如何利用CSS设置文字的阴影效果
摘要：如何利用CSS设置文字的阴影效果:有时候需要给文字加上阴影，下面就结合实例简单介绍一下如何给文字加上阴影效果。先看一段代码实例:蚂蚁部落 蚂蚁部落欢迎您蚂蚁部落欢迎您 太阳出来了太阳出来了 只有努力才能够取得成功您只有努力才能够取得成功 以上代码主要是运用position定位...
如何利用CSS设置文字的阴影效果:
有时候需要给文字加上阴影，下面就结合实例简单介绍一下如何给文字加上阴影效果。先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
div, ul, li{
margin:0px;
padding:0pc;
list-style:none;
font-size:16px;
color:#666;
}
a {
position:relative;
display:block;
height:25px;
width:250px;
line-height:25px;
text-decoration:none;
color:#666;
}
span{display:none;}
a:hover span{
height:25px;
width:250px;
line-height:25px;
display:block;
position:absolute;
left:-3px;
top:3px;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">蚂蚁部落欢迎您<span>蚂蚁部落欢迎您</span></a></li>
<li><a href="#">太阳出来了<span>太阳出来了</span></a></li>
<li><a href="#">只有努力才能够取得成功您<span>只有努力才能够取得成功</span></a></li>
</ul>
</div>
</body>
</html>
以上代码主要是运用position定位实现的此功能，通过display将a和span元素转换为块级元素，再将a元素使用相对定位，以保证span元素的绝对定位的参考对象是a元素，最后使用left和top属性控制span元素的偏移量即可。
最为原始的地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4646
相关文章
最新发布
阅读排行
热门文章
猜你喜欢