Heim > Web-Frontend > HTML-Tutorial > 如何利用CSS设置文字的阴影效果_html/css_WEB-ITnose

如何利用CSS设置文字的阴影效果_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:40:36
Original
1958 Leute haben es durchsucht

如何利用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>
Nach dem Login kopieren

以上代码主要是运用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

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage