CSS3圖層陰影程式碼例項
使用css3的box-shadow屬性可以實現此效果。
關於box-shadow屬性可以參閱CSS3 box-shadow一章節。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> *{ margin:0; padding:0; } .shadow{ width:200px; height:50px; box-shadow:3px 3px 3px 3px #000; margin:50px; } </style> </head> <body> <div class="shadow"></div> </body> </html>
相關文章
- CSS3圖片邊框陰影效果程式碼例項CSSS3
- CSS3文字陰影效果程式碼例項CSSS3
- CSS3實現的div陰影效果程式碼例項CSSS3
- css3實現的文字陰影效果程式碼例項CSSS3
- css3實現div邊框陰影效果程式碼例項CSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- css邊框陰影程式碼例項CSS
- css3動態背景圖片程式碼例項CSSS3
- css3繪製谷歌圖示程式碼例項CSSS3谷歌
- css圖片陰影、文字陰影CSS
- CSS3雪人程式碼例項CSSS3
- CSS3實現的梯形圖案程式碼例項CSSS3
- css3繪製QQ企鵝圖示程式碼例項CSSS3
- css3繪製心形圖案程式碼例項CSSS3
- css3實現的太極圖程式碼例項CSSS3
- CSS3卡通形象程式碼例項CSSS3
- css3 animation動畫程式碼例項CSSS3動畫
- css3星空效果程式碼例項CSSS3
- css3水滴效果程式碼例項CSSS3
- CSS3 名片效果程式碼例項CSSS3
- CSS3繪製太極圖程式碼例項詳解CSSS3
- CSS3筆記(二)陰影CSSS3筆記
- CSS3紙飛機程式碼例項CSSS3
- CSS3發光背景程式碼例項CSSS3
- css3 calc()應用程式碼例項CSSS3
- css3橢圓形程式碼例項CSSS3
- CSS3繪製菱形程式碼例項CSSS3
- CSS3小黃人效果程式碼例項CSSS3
- css3晃動效果程式碼例項CSSS3
- CSS3心形效果程式碼例項CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3彈球效果程式碼例項CSSS3
- CSS3 旋轉太極八卦圖程式碼例項CSSS3
- css3實現滑鼠懸浮出現一個說明層程式碼例項CSSS3
- css3實現tab選項卡程式碼例項CSSS3
- css3實現的谷歌瀏覽器圖示程式碼例項CSSS3谷歌瀏覽器
- css3實現的天氣型別圖示程式碼例項CSSS3型別
- css3實現旋轉的太極圖效果程式碼例項CSSS3