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

| 阅读数:--次| 作者:html,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

返回顶部
学到老代码浏览 关闭浏览