如何利用CSS设置文字的阴影效果,利用css文字阴影

如何利用CSS设置文字的阴影效果,利用css文字阴影

如何利用CSS设置文字的阴影效果:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
有时候需要给文字加上阴影,下面就结合实例简单介绍一下如何给文字加上阴影效果。先看一段代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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="#">蚂蚁部落欢迎您蚂蚁部落欢迎您</a></li>
    <li><a href="#">太阳出来了太阳出来了</a></li>
    <li><a href="#">只有努力才能够取得成功您只有努力才能够取得成功</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

更多内容可以参阅:http://www.softwhy.com/divcss/

 

http://www.bkjia.com/Javascript/1081072.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1081072.htmlTechArticle如何利用CSS设置文字的阴影效果,利用css文字阴影
如何利用CSS设置文字的阴影效果: 建议
:尽可能的手写代码,可以有效的提高学习效率和…