CSS3文本阴影text-shadow属性详解

2017-02-21 18:25:34 html
下面小编就为大家带来一篇关于CSS3文本阴影text-shadow属性详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦

文本阴影text-shadow属性特效:

1.右下角阴影,左下角阴影,左上角阴影,右上角阴影
 


    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>text-shadow</title>  
        <style>  
            p{   
              text-align:center;   
              margin:0;   
              font-family: helvetica,arial,sans-serif;   
              color:#999;   
              font-size:80px;   
              font-weight:bold;   
              text-shadow:10px 10px #333;   
            }   
        </style>  
    </head>  
    <body>  
        <p>Text Shadow</p>  
    </body>  
    </html>  

文字效果为:

 

如果将text-shadow改成:text-shadow:-10px 10px #333 ,就将出现左下角阴影

将text-shadow改成:text-shadow:-10px -10px #333 , 就将出现左上角阴影

 将text-shadow改成:text-shadow: 10px -10px #333 , 就将出现右上角阴影

2. 使用text-shadow设置立体文字效果
 


    <!DOCTYPE html>  
     <html lang="en">  
     <head>  
         <meta charset="UTF-8">  
         <title>text-shadow</title>  
         <style>  
             p{   
               text-align:center;   
               margin:0;   
               font-family: helvetica,arial,sans-serif;   
               color:#999;   
               font-size:80px;   
               font-weight:bold;   
               text-shadow:-1px -1px #fff,   
                                        1px 1px #333;   
             }   
         </style>  
     </head>  
     <body>  
         <p>Text Shadow</p>  
     </body>  
     </html>  


以上这篇CSS3文本阴影text-shadow属性详解就是小编分享给大家的全部内容了,希望能给大家一个参考