css3實現3D字型帶陰影的效果

來源:互聯網
上載者:User
這篇文章主要介紹了關於css3實現3D字型帶陰影的效果,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

3D字型而且還帶有陰影,這種效果想必大家只有認為一些進階的作圖工具才可以實現的吧,css3的出現讓這一切看似不可能的實現成為可能,接下來為大家介紹下3D字型帶陰影製作效果的實現步驟,感興趣的你可不要錯過了哈

如下:

源碼如下:

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> CSSReX | Drop Shadow with CSS3 </title> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> </head> <body> <p id="wrapper"> <h1>CSSReX</h1> <p>任何的異常都是Throwable類,並且在它之下包含兩個字類Error / Exception,而Error僅在當在Java虛擬機器中發生動態串連失敗或其它的定位失敗的時候,Java虛擬機器拋出一個Error對象。典型的簡易程式不捕捉或拋出Errors對象,你可能永遠不會碰到需要執行個體化Error的應用,那就讓我們關心一下Exception。 Unchecked Exception.:包括 Error與RuntimeException. 這類異常都是RuntimeException的子類。 Checked Exception:除了Error與RuntimeException,其他剩下的異常. 這類異常都是Exception的子類 。在編譯時間在文法上必須處理的異常,因此必須在文法上以try..catch加以處理;</p> </p><!-- /wrapper --> </body> </html>

style.css:

body{ background:#d5d5d5; } #wrapper{ width:960px; min-height:500px; padding:50px 10px 0 10px; margin:0 auto; text-align:center; } #wrapper h1{ font:normal 60pt Arial; color:#FFFFFF; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } #wrapper p{ font:normal 40pt Arial; color:#FFFFFF; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); }

以上就是本文的全部內容,希望對大家的學習有所協助,更多相關內容請關注topic.alibabacloud.com!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.