網頁頂部陰影邊框效果
分享一段程式碼例項,它實現了網頁頂部陰影邊框效果。
當然美不美觀另當別論,每一個人的審美觀是不同的,這裡主要學習一下相關屬性的用法。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; } </style> </head> <body> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).:before參閱CSS E:before/E::before一章節。
(2).box-shadow參閱CSS3 box-shadow一章節。
相關文章
- CSS圖片邊框陰影效果CSS
- css實現邊框陰影效果CSS
- view邊框陰影View
- CSS 邊框陰影立體邊框CSS
- CSS3圖片邊框陰影效果程式碼例項CSSS3
- css邊框陰影程式碼例項CSS
- css3實現div邊框陰影效果程式碼例項CSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- ios 手機端網頁input高度設定和內建頂部陰影iOS網頁
- [分享]iOS開發-UImageview加邊框加陰影iOSUIView
- android shape的使用詳解以及常用效果(漸變色、分割線、邊框、半透明陰影效果等)Android
- css實現網頁”回到頂部“的程式碼效果CSS網頁
- CSS3實現的文字框陰影發光效果CSSS3
- CSS:遮罩效果、陰影效果、毛玻璃效果CSS遮罩
- canvas設定陰影效果Canvas
- WPF 實現陰影效果
- 從頁面底部回到頂部+動畫效果 & 翻頁後從按鈕處回到頁面頂部動畫
- 如何在pyqt中給無邊框視窗新增DWM環繞陰影QT
- 陰影進階,實現更加的立體的陰影效果!
- js之返回網頁頂部JS網頁
- iOS清除輸入框內陰影iOS
- CSS陰影效果三劍客CSS
- CSS 陰影進階,實現更加的立體的陰影效果!CSS
- 點選返回網頁頂層效果網頁
- view的陰影效果shadowColorView
- css動態邊框效果CSS
- jquery點選返回網頁頂部程式碼jQuery網頁
- 實現給一個DIV加陰影效果!
- 使用純 CSS 實現滾動陰影效果CSS
- 每天一邊js -- 回到頂部JS
- jQuery文字從頂部掉落效果jQuery
- CSS3多層邊框效果CSSS3
- CSS虛線邊框效果程式碼CSS
- css實現的交叉邊框效果CSS
- js——頁面回到頂部JS
- CSS 文字陰影 text-shadow 懸停效果CSS
- 短視訊系統,實現介面陰影效果
- Android開發中陰影效果的實現Android