码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-12-17 15:44:56      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:

如何利用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="#">蚂蚁部落欢迎您<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

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

 

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

标签:

原文地址:http://www.cnblogs.com/xiaofinder/p/5054101.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!