Heim > Artikel > Web-Frontend > 如何利用CSS设置文字的阴影效果_html/css_WEB-ITnose
如何利用CSS设置文字的阴影效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:361892Durchsuche
如何利用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.51texiao.cn/div_cssjiaocheng/2015/0504/726.html
最为原始的地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4646
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：SASS用法指南_html/css_WEB-ITnoseNächster Artikel：css3 transition 实现图片放大缩小_html/css_WEB-ITnose