css3實現的文字陰影效果程式碼例項
本章節分享一段程式碼例項,它實現了使用css3文字陰影效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .All-orange { font:normal 14px 微軟雅黑,sans-serif; max-width:auto; max-height: auto; background-color:#f8f8f8; padding:30px 30px 20px 30px; color:#666; border-radius: 5px; } .All-orange h1 { font: normal 32px 微軟雅黑,sans-serif; padding: 20px 0 20px 40px; display: block; margin: -30px -30px 10px -30px; color: #FFF; background-color: #0CF; border-radius: 5px; text-shadow: 5px 2px 6px #000; box-shadow: 5px 2px 6px #000; } .All-orange img { float:left; } .All-orange h1 img { margin-top: -15px; } </style> </head> <body> <div class="All-orange" id="all"> <h1>螞蟻部落</h1> </div> </body> </html>
上面的程式碼實現了我們想要的功能,更多內容可以參閱相關閱讀:
(1).border-radius可以參閱CSS3 border-radius一章節。
(2).box-shadow可以參閱CSS3 box-shadow一章節。
相關文章
- CSS3實現的div陰影效果程式碼例項CSSS3
- CSS3文字陰影效果程式碼例項CSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- css3實現div邊框陰影效果程式碼例項CSSS3
- CSS3圖片邊框陰影效果程式碼例項CSSS3
- CSS3實現的文字框陰影發光效果CSSS3
- css3實現的文字下滑出現效果程式碼例項CSSS3
- CSS3圖層陰影程式碼例項CSSS3
- CSS3文字漸現效果程式碼例項CSSS3
- css3實現的折角效果程式碼例項CSSS3
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- CSS3文字凹凸效果程式碼例項CSSS3
- CSS3實現的滑鼠懸浮文字顏色漸變效果程式碼例項CSSS3
- css3實現的斑馬紋效果程式碼例項CSSS3
- CSS3實現的div圓角效果程式碼例項CSSS3
- css3實現的旋轉魔方效果程式碼例項CSSS3
- css3實現的動態大白效果程式碼例項CSSS3
- css3實現的多啦a夢效果程式碼例項CSSS3
- CSS3實現的禁止文字選中程式碼例項CSSS3
- css邊框陰影程式碼例項CSS
- css3文字鏤空效果程式碼例項CSSS3
- WPF 實現陰影效果
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- css3實現的動物頭像效果程式碼例項CSSS3
- css3實現的皮球上下彈動效果程式碼例項CSSS3
- css實現的多行文字垂直居中效果程式碼例項CSS
- 實現密碼框預設文字效果例項程式碼密碼
- css3實現button按鈕美化效果程式碼例項CSSS3
- css3實現網狀球體效果程式碼例項CSSS3
- css實現帶有陰影的立體文字效果CSS
- 滑鼠懸浮文字實現霓虹燈效果程式碼例項
- 模擬實現文字框游標效果程式碼例項
- canvas實現文字線性漸變效果程式碼例項Canvas