[Web前端技术教学]实现文字阴影

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>文字阴影</title>  
  6. <style type="text/css">  
  7. <!--  
  8. #father{  
  9.     margin:15px;  
  10.     font-family:黑体;  
  11.     font-size:60px;  
  12.     font-weight:bold;  
  13.     position:relative;  
  14. }  
  15. #word{  
  16.     position:absolute;  
  17.     z-index:1;  
  18.         color:red;  
  19. }  
  20. #shadow{  
  21.     color:#AAAAAA;        
  22.     position:absolute;  
  23.     top:4px;          
  24.     left:4px;  
  25.     z-index:0;            
  26. }  
  27. -->  
  28. </style>  
  29. </head>  
  30. <body>  
  31. <div id="father">   
  32.   <div id="word">好好学习</div>   
  33.   <div id="shadow">好好学习</div>  
  34. </div>  
  35. </body>  
  36. </html>  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值