Home > Article > Web Front-end > How to use CSS to set the shadow effect of text_html/css_WEB-ITnose
How to use CSS to set the shadow effect of text_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:361895browse
How to use CSS to set the shadow effect of text:
Sometimes you need to add shadow to text. Here is a brief introduction on how to add shadow to text with examples. Upper shadow effect. Let’s look at a code example first:
<!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> The above code mainly uses position positioning to implement this function. It converts a and span elements into block-level elements through display, and then converts the a element Use relative positioning to ensure that the reference object for the absolute positioning of the span element is the a element. Finally, use the left and top attributes to control the offset of the span element.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0504/726.html
The most original address is: http://www.softwhy.com /forum.php?mod=viewthread&tid=4646