html5文字陰影效果text-shadow使用示例

字號:


    使用html5的text-shadow實現(xiàn)沒有模糊效果,有模糊效果,陰影疊加的具體代碼如下,想學習的朋友可以了解下哈,希望對大家學習html5有所幫助
    代碼如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title> 
    <style type="text/css"> 
    /*<![CDATA[*/ 
    #text 
    { 
    text-shadow:2px 2px 0px orange; 
    } 
    #text1 
    { 
    text-shadow:2px 2px 5px orange; 
    } 
    #text2 
    { 
    text-shadow:2px 2px 5px orange,-2px 2px 5px green; 
    } 
    /*]]>*/ 
    </style> 
    </head> 
    <body> 
    <div id="text"> 
    沒有模糊效果 
    </div>
    <div id="text1"> 
    有模糊效果 
    </div>
    <div id="text2"> 
    陰影疊加 
    </div>
    </body> 
    </html>